오리가미 다운로드

    if (/android|webos|iphone|ipad|ipod|blackberry|windows phone/i.test(navigator.userAgent))     {(function(){document.writeln(' ');})();}     else{(function(){document.writeln(' ');})();}

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

p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px '.Apple SD Gothic NeoI'; color: #454545} p.p2 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px 'Helvetica Neue'; color: #454545; min-height: 14.0px} p.p3 {margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px 'Helvetica Neue'; color: #454545} p.p4 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px 'Helvetica Neue'; color: #454545} p.p5 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px 'Helvetica Neue'; color: #454545; min-height: 15.0px} span.s1 {font: 12.0px 'Helvetica Neue'} span.s2 {font: 14.0px '.Apple SD Gothic NeoI'} span.s3 {font: 12.0px '.Apple SD Gothic NeoI'}

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

트랜지션 Transition

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

p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px 'Helvetica Neue'; color: #454545} p.p2 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px '.Apple SD Gothic NeoI'; color: #454545} p.p3 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px '.Apple SD Gothic NeoI'; color: #454545; min-height: 12.0px} span.s1 {font: 14.0px '.Apple SD Gothic NeoI'}

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

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

p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px '.Apple SD Gothic NeoI'; color: #454545} p.p2 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px '.Apple SD Gothic NeoI'; color: #454545; min-height: 12.0px}

진행률 0:

진행률 0.5:

진행률 1:

p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px '.Apple SD Gothic NeoI'; color: #454545}

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

    if (/android|webos|iphone|ipad|ipod|blackberry|windows phone/i.test(navigator.userAgent))     {(function(){document.writeln(' ');})();}     else{(function(){document.writeln(' ');})();}

원문: Origami Studio - Animations

Refresh Studio

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