Animation Curve

現実の物体は一定な速度で動く場合がはほとんどありません。したがって、人間は一定の速度よりは加速、減速、加減速が入っている動きをより自然だと感じます。これらの動きはイージングファンクション(easing-function)と3次ベジェ(Cubic-Bezier) 、スプリング(spring)を適切に活用することで自然で美麗なアニメーションが作れることができます。

Easing Function

最初から用意された加速度に関するプリセットです。プロパティパネルのイーズイン(ease-in),イーズアウト(ease-out)、イーズインアウト(ease-in-out)の中から選べます。

EaseIn
  • easeInSine
    (0.12, 0, 0.39, 0)
  • easeInCubic
    (0.32, 0, 0.67, 0)
  • easeInQuint
    (0.64, 0, 0.78, 0)
  • easeInCirc
    (0.55, 0, 1, 0.45)
  • easeInElastic
  • easeInQuad
    (0.11, 0, 0.5, 0)
  • easeInQuart
    (0.5, 0, 0.75, 0)
  • easeInExpo
    (0.7, 0, 0.84, 0)
  • easeInBack
    (0.36, 0, 0.66, -0.56)
  • easeInBounce
EaseOut
  • easeOutSine
    (0.61, 1, 0.88, 1)
  • easeOutCubic
    (0.33, 1, 0.68, 1)
  • easeOutQuint
    (0.22, 1, 0.36, 1)
  • easeOutCirc
    (0, 0.55, 0.45, 1)
  • easeOutElastic
  • easeOutQuad
    (0.5, 1, 0.89, 1)
  • easeOutQuart
    (0.25, 1, 0.5, 1)
  • easeOutExpo
    (0.16, 1, 0.3, 1)
  • easeOutBack
    (0.34, 1.56, 0.64, 1)
  • easeOutBounce
EaseInOut
  • easeInOutSine
    (0.37, 0, 0.63, 1)
  • easeInOutCubic
    (0.65, 0, 0.35, 1)
  • easeInOutQuint
    (0.83, 0, 0.17, 1)
  • easeInOutCirc
    (0.85, 0, 0.15, 1)
  • easeInOutElastic
  • easeInOutQuad
    (0.45, 0, 0.55, 1)
  • easeInOutQuart
    (0.76, 0, 0.24, 1)
  • easeInOutExpo
    (0.87, 0, 0.13, 1)
  • easeInOutBack
    (0.68, -0.6, 0.32, 1.6)
  • easeInOutBounce

Cubic-Bezier

視覚的なイージングカーブエディターを用いて、3次ベジエカーブを定義する4つの数字でカスタマイズしたイージングカーブを作成することができます。

Example
  • Cubic-bezier
    (0.39, 0, 0.23, 1)
  • Cubic-bezier
    (0.71, 0.41, 0.32, 0.76)

Spring

スプリングカーブはレイヤーがバネの様に弾けるアニメーションを作ります。

*今後アプリ内で直接スプリングカーブのグラフを操作しながら設定できる機能を提供する予定です。

Example
  • Tension 600, Friction 16
  • Tension 250, Friction 19
Back To Top