Animation Curve
실제 사물들은 일정한 속도로 움직이는 경우가 많지 않습니다. 따라서 사람들은 일정한 속도로 움직이는 것 보다는 가속, 감속, 가감속이 들어가 있는 움직임을 더 자연스럽다고 느낍니다. Easing-Function과 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
네 가지 숫자를 조합하여 커스텀된 easing curve를 사용할 수 있습니다. 그래프를 통해 easing curve를 생성하고 미리보기로 움직임을 확인 할 수 있습니다.
Example
- Cubic-bezier
(0.39, 0, 0.23, 1) - Cubic-bezier
(0.71, 0.41, 0.32, 0.76)
Spring
스프링 커브는 레이어가 스프링처럼 튕기는듯한 애니메이션을 만들 수 있도록 해줍니다.
*추후 studio 내에서 직접 spring curve의 그래프를 직접 조작하면서 정의할 수 있는 기능을 제공할 예정입니다.
Example
- Tension 600, Friction 16
- Tension 250, Friction 19