[오리가미 스튜디오 Basic] 목차
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 디자인 글과 동향을 소개해 드립니다.
'Origami + Studio ' 카테고리의 다른 글
[오리가미 스튜디오 Basic 07] 미리보기 & 공유하기 Previewing & Sharing (0) | 2017.01.13 |
---|---|
[오리가미 스튜디오 Basic 05] 상태 State (0) | 2016.12.28 |
[오리가미 스튜디오 Basic 04] 인터랙션 Interaction (0) | 2016.12.26 |
[오리가미 스튜디오 Basic 03] 레이어 Layers (0) | 2016.12.23 |
[오리가미 스튜디오 Basic 02] 패치 Patches (0) | 2016.12.20 |
[오리가미 스튜디오 Basic 01] 소개 Introduction (0) | 2016.12.19 |