55
45

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2015-12-22

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からきていて、「気楽さ」とか「ゆっくり」といった意味があります。

55
45
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
55
45

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?