변속(Easing)

프로토파이에서 변속 기능을 사용하여 사실적인 움직임으로 애니메이션을 향상할 수 있습니다.

실제 생활에서는 물체가 갑작스럽게 움직이기 시작하거나 움직임을 멈추지 않습니다. 그렇기 때문에 자연스러운 애니메이션을 구현하기 위해 프로토타입에 변속을 포함시키는 것이 중요합니다.

변속 함수를 통합하면 디자인에 사실적인 느낌과 자연스러운 움직임을 더하는, 시각적으로 매력적인 전환을 만들 수 있습니다.

표준 변속 옵션(Standard Easing Options)

선형(Linear)

선형 변속을 사용하면 애니메이션 중에 가속이나 감속이 없습니다. 개체는 부드럽고 균일하게 움직이며 전환하는 동안 일정한 속도를 유지합니다.

감속/가속(Ease)

감속/가속 변속은 전환의 가속과 감속을 제어하는 데 사용됩니다. 이 옵션은 애니메이션 효과가 적용되거나 상태 간에 전환되는 개체 또는 요소에 매끄러운 느낌과 자연스러운 움직임을 더합니다.

가속(Ease In)

가속 변속은 전환의 초기 가속을 제어하는 데 사용됩니다. 이 옵션은 점진적이고 부드럽게 애니메이션을 시작하는 데 중점을 둡니다. 개체나 요소가 느리게 움직이기 시작한 다음, 애니메이션이 진행됨에 따라 속도가 빨라집니다.

감속(Ease Out)

감속 변속은 전환의 감속을 제어하는 데 사용됩니다. 이 옵션은 애니메이션이 끝날 때 점진적이고 부드럽게 움직임의 속도를 줄이는 데 중점을 둡니다.

가속 후 감속(Ease In Out)

가속 후 감속 변속은 매끄럽고 균형 잡힌 전환을 만드는 데 사용됩니다. 이 옵션은 가속 및 감속 변속의 특성을 결합하여 시작할 때는 점진적으로 가속하고 중간에는 일정한 속도를 유지하다가 애니메이션의 끝으로 갈수록 점진적으로 감속합니다.

보편적으로 사용되는 가속도에 대한 프리셋입니다. 프로퍼티 패널에서 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

사용자 지정 변속 옵션(Custom Easing Options)

사용자 지정 변속 사전 설정 만들기

프로토파이에서는 사용자 지정 변속 사전 설정을 만들 수 있습니다. 고유의 사용자 지정 변속을 만들려면 다음과 같은 단계를 따르세요.

표준 변속 목록에서 표준 변속 옵션 하나를 선택합니다.
"+" 버튼을 클릭하여 새 변속 사전 설정을 추가합니다.
새 값을 입력하거나 제어점을 원하는 위치로 끌어서 기간 및 사전 정의 값을 수정합니다.
입력 영역 위를 두 번 클릭하여 변속 사전 설정의 이름을 바꿉니다.
새로 만든 변속 사전 설정은 사용자 지정(Custom) 변속 목록에 저장되므로 나중에 언제든지 다시 사용할 수 있습니다.

사용자 지정 변속 사전 설정 내보내기 및 가져오기

사용자 지정 변속 사전 설정을 만든 후에는 .json 파일로 내보내서 로컬 컴퓨터에 저장할 수 있습니다. 이 파일에는 사용자 지정(Custom) 목록에 현존하는 모든 사전 설정이 포함됩니다. 이 기능을 사용하면 간편하게 변속 사전 설정을 팀 구성원과 공유하거나 나중에 사용하기 위해 보관할 수 있으므로, 특히 다른 장치로 전환하는 경우에 유용합니다.