MenuToggle Menu
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
視覚的なイージングカーブエディターを用いて、３次ベジエカーブを定義する４つの数字でカスタマイズしたイージングカーブを作成することができます。
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