Animation Curve

실제 사물들은 일정한 속도로 움직이는 경우가 많지 않습니다. 따라서 사람들은 일정한 속도로 움직이는 것 보다는 가속, 감속, 가감속이 들어가 있는 움직임을 더 자연스럽다고 느낍니다. Easing-Function과 Cubic-Bezier, Spring을 적절히 활용하면 자연스럽고 미려한 애니메이션을 만들 수 있습니다.

Easing Function

보편적으로 사용되는 가속도에 대한 프리셋입니다. 프로퍼티 패널에서 ease-in, ease-out, ease-in-out중에 선택할 수 있습니다.

EaseIn
  • easeInSine
  • easeInCubic
  • easeInQuint
  • easeInCirc
  • easeInElastic
  • easeInQuad
  • easeInQuart
  • easeInExpo
  • easeInBack
  • easeInBounce
EaseOut
  • easeOutSine
  • easeOutCubic
  • easeOutQuint
  • easeOutCirc
  • easeOutElastic
  • easeOutQuad
  • easeOutQuart
  • easeOutExpo
  • easeOutBack
  • easeOutBounce
EaseInOut
  • easeInOutSine
  • easeInOutCubic
  • easeInOutQuint
  • easeInOutCirc
  • easeInOutElastic
  • easeInOutQuad
  • easeInOutQuart
  • easeInOutExpo
  • easeInOutBack
  • 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