by
Mar 17. 2021
ProtoPie 루핑 애니메이션 만들기 <1편>
ProtoPie, ProtoPie 강좌, Looping Animation
Free Your Ideas, ProtoPie
프로토타이핑 기술을 향상시킬 수 있는 ProtoPie 팁! 오늘 소개할 내용은 Looping animation을 만드는 방법입니다. 이어지는 2편에서는 Infinite Paging Scroll에 대해 다룰 예정입니다.
#1
Rotate Looping
먼저, 레이어가 지속적으로 회전할 수 있는 방법을 살펴보겠습니다.
① 레이어에 Start trigger와 Rotate response를 추가하여, 자동으로 회전할 수 있도록 만들어줍니다.
② Rotation 각도를 360도로 설정하면, 시계 방향의 완전한 원이 만들어질 것입니다.
③ 멈추지 않고 계속 회전시키려면, 속성 패널 하단의 Repeat 옵션을 선택합니다.
④ 마지막으로 Easing 옵션과 Interval 시간을 설정합니다. 위 예시에서는 Interval 없이 Linear으로 설정했습니다.
Rotate looping을 만들기 위해서는 Rotate response 하나만 추가하면 되고, 옵션을 어떻게 설정하느냐에 따라 위와 같이 다양한 효과를 만들 수 있습니다.
#2.
Move Looping
① Rotate와 마찬가지로 먼저 Start trigger와 Move response를 추가합니다.
② Position 옵션에서 레이어가 이동할 거리를 설정합니다. Move to는 레이어를 특정 위치(x=200)로 이동시킬 때 쓰이며, Move by는 레이어의 현재 위치와 상관없이 200만큼의 거리를 이동시킬 때 쓰입니다.
③ Repeat 옵션과 Easing 옵션을 설정합니다. 위 예시에서 Position은 'Move by', '+200'로 설정했습니다.
이때 레이어가 원래 위치로 되돌아 오는 효과를 주기 위해서는 Move back을 설정해야합니다.
① 동일한 레이어에 Move Response를 한번 더 추가합니다.
② 레이어가 원래의 위치로 되돌아가기 위해, Position을 'Move by', '-200'으로 설정합니다.
③ Repeat을 체크하기전에 Start delay를 설정하십시오. 레이어가 오른쪽으로 이동한 이후에 'Move back'이 진행돼야 하기 때문입니다.
Radius Looping과 Scale Looping, Opacity Looping 등 다른 인터랙션을 제작할 때에도 상태를 변경하는 하나의 Response(e.g. Move)와 현재 상태를 원래 상태로 돌아가게끔 하는 또 하나의 Response(e.g. Move Back)를 사용해야 합니다.
다음 ProtoPie Tip에서는 Infinite paging scroll 만드는 방법을 소개해드리겠습니다!
더 알고 싶은 내용이나 궁금한 점이 있다면 댓글로 알려 주세요.
