[오리가미 스튜디오 Basic 06] 애니메이션 Animation

오리가미 스튜디오Origami Studio는 모던 인터페이스 디자인을 위한 프로토타이핑 툴입니다. 페이스북Facebook 디자이너들이 만들고 사용 중인 프로토타이핑 툴로써, 특히 인터랙션, 애니메이션 및 동작을 위한 프로토타입을 구현하기에 적합한 툴입니다. 

[오리가미 스튜디오 Basic] 목차

1. 소개 Introduction

2. 패치 Patches

3. 레이어 Layers

4. 인터랙션 Interaction

5. 상태 State

6. 애니메이션 Animation

7. 미리보기 & 공유하기 Previewing & Sharing

6. 애니메이션 Animation

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

애니메이션 패치 Animation Patches

- 팝 애니메이션 Pop Animation (단축키 A): 

페이스북 앱에서 흔히 볼 수 있는 자연스럽고 탄력적인 애니메이션으로, iOS용 팝 프레임워크Pop framework, Android용 리바운드Rebound 및 웹용 리바운드 JS를 사용하는 개발자에게 쉽게 값을 전달할 수 있습니다. 

- 클랙식 애니메이션 Classic Animation (단축키 C): 

리니어linear, 이즈-인ease-in, 이즈-아웃ease-out과 같은 이징 곡선easing curve입니다.

- 반복 동작 Repeating Motion: 

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

애니메이션 값 Animating Values

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

트랜지션 Transition

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

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

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

진행률 0:

진행률 0.5:

진행률 1:

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

원문: Origami Studio - Animations

Refresh Studio

해외 최신 웹/모바일/UX 디자인 글과 동향을 소개해 드립니다.