iOS
CoreAnimation
Swift

CoreAnimationでカスタムのEasing Functionを使う

More than 3 years have passed since last update.

CoraAnimationでは、timingFunctionで、Easing Functionを設定できます。これにより、やりリアルで自然なアニメーションを表現できます。

animation.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseInEaseOut)

ですが、標準で用意されているのは、次の5つのみです。


  • Linear

  • EaseIn

  • EaseOut

  • EaseInEaseOut

  • Default


カスタムのEasing Functionを使う

上記の5つ以外にもEasing Functionはたくさんあります。

image

Easing Function 早見表をみると、その一覧と実際のアニメーションも見ることができて便利です。例えば、この中のEaseInOutBackを使う場合は、cubic-bezierの値をコピペしてこうします。

animation.timingFunction = CAMediaTimingFunction(controlPoints: 0.55, 0, 0.59, 0.13)

完全に値をカスタマイズしたい場合は、cubic-bezier.com を使って、cubic-bezierを調整しましょう。

image


おまけ

EaseInとかEaseOutとか単語が多くて混乱するときは、こういうふうに覚えるといいです。


  • EaseIn:Ease(ゆっくり)In(入る)


    • ゆるやかに始まるアニメーション



  • EaseOut:Ease(ゆっくり)Out(出る)


    • ゆるやかに終わるアニメーション



easeはeasyからきていて、「気楽さ」とか「ゆっくり」といった意味があります。