애니메이션

Animations

 

애니메이션 패치는 유동적이며 반전할 수 있도록 설계되었습니다. 변화하는 숫자를 사용하고 매끄럽게 하기 위해 트위닝합니다.



애니메이션
패치 Animation Patches

Pop Animation (단축키 A): 페이스북 앱에서 흔히 볼 수 있는 자연스럽고 탄력적인 애니메이션으로, iOSPop framework, AndroidRebound 및 웹용 Rebound JS를 사용하는 개발자에게 쉽게 값을 전달할 수 있습니다.

Classic Animation (단축키 C): 리니어linear, 이즈ease-in, 이즈아웃ease-out 같은 여유 곡선easing curve 입니다.

Repeating Motion: 여유 곡선easing curve을 사용하여 반복하면서 앞뒤로 움직이는 애니메이션 입니다.



애니메이션
Animating Values

애니메이션 패치는 0 또는 1을 출력하는 Interaction 또는 Switch 패치와 함께 해당 값을 트위닝하여 0에서 1로 부드럽게 움직이며, 그 반대의 경우도 마찬가지입니다. 0에서 1로 값이 이동하는 것을 일반적인 진행률로 봅니다.


트랜지션
Transition

0에서 1로 애니메이션을 적용하는 것은 간단하지만 다른 값 사이에서 애니메이션을 적용한다면 어떻게 해야 할까요?

Transition (단축키 T) 패치를 사용하면 0/1을 시작/종료 값으로 변환할 수 있습니다:

예를 들어, 레이어의 너비를 100px에서 200px로 애니메이션을 지정하려는 경우, 시작 값 100과 종료 값 200을 지정하면 됩니다. 0부터 1까지의 애니메이션 값과 결합하여 레이어의 너비를 쉽게 애니메이트 할 수 있습니다.

진행률 0:

진행률 0.5:

진행률 1:

애니메이션 패치와 함께 이제 두 값 사이에서 쉽게 애니메이션을 만들 수 있습니다.

원문: http://origami.design/documentation/basics/Animations.html