Leah Han 선생님이 새로운 ProtoPie 팁과 함께 찾아왔습니다! 이번 편은 기본 루핑 애니메이션을 다루는 두 편 중 첫 번째입니다. 두 번째 편에서는 무한 페이징 스크롤에 대해 이야기할 예정입니다.
가장 쉬운 것부터 시작해 볼까요!
회전 루핑
레이어가 계속 회전하도록 해 보겠습니다. 방법을 살펴볼까요.
레이어에 ‘Start’ 트리거와 ‘Rotate’ 응답을 추가해 자동으로 회전을 시작하게 합니다.
그다음 회전 각도를 360으로 입력하면 시계 방향으로 한 바퀴를 돌게 됩니다.
멈추지 않고 계속 회전하게 하려면 속성 패널 하단의 ‘Repeat’ 옵션을 체크합니다.
마지막 단계는 ‘Easing’ 곡선을 설정하고 각 반복의 간격 시간을 변경하는 것입니다.
이 예시에서는 간격 없이 Linear 곡선으로 설정했습니다.
회전 루핑 설정하기
놀랍지 않나요? 하지만 아직 더 있습니다!
아래에서 볼 수 있듯이, 설정에 따라 회전 루핑 애니메이션은 서로 다른 느낌을 줍니다.
서로 다른 3가지 회전 루핑 애니메이션
어느 것이 가장 좋다고 생각하시나요? 정답은 없고, 전적으로 여러분의 취향에 달려 있습니다. 회전 루핑을 만들려면 ‘Rotate’ 응답 하나만 추가하면 된다는 점을 기억하세요.
다음 루핑으로 넘어가 볼까요!
이동 루핑
회전과 마찬가지로 먼저 ‘Start’ 트리거와 ‘Move’ 응답을 추가합니다.
그다음 레이어가 돌아오기 전에 얼마나 이동할지 정합니다. ‘move to’를 선택하면 레이어를 정확한 위치(x=200)로 이동시키겠다는 뜻입니다. 또한 ‘move by’를 선택하면 레이어의 현재 위치를 알 필요 없이, 오른쪽으로 200의 거리만큼 앞으로 이동하게 할 수 있습니다.
200의 거리로 Move by
다시 ‘Repeat’ 옵션을 체크하고 ‘Easing’ 곡선을 설정합니다.
(이 예시에서는 ‘move by’ +200을 사용했습니다.)
Repeat 옵션 확인
왜 돌아오지 않을까요? 아직 ‘move back’ 효과를 추가하지 않았기 때문입니다. (당연해 보이지만, 쉬운 것에서 오히려 헷갈릴 때가 있습니다.)
따라서 아직 해야 할 단계가 몇 가지 더 있습니다:
같은 레이어에 ‘Move’ 응답을 하나 더 추가합니다.
위치를 ‘move by’ -200으로 설정해 200의 거리만큼 왼쪽으로 돌아가게 합니다.
‘Repeat’을 체크하기 전에 ‘Start delay’를 설정하는 것을 잊지 마세요. ‘move back’은 레이어가 오른쪽으로 이동한 뒤에 발생해야 하기 때문입니다.
Move back 응답 설정
Radius Looping, Scale Looping, 그리고 Opacity Looping도 두 개의 응답을 사용해야 합니다. 하나는 상태를 변경하는 용도이고, 다른 하나는 상태를 원래대로 되돌리는 용도입니다. Move Looping과 마찬가지입니다.
다음 ProtoPieTips와 루핑 애니메이션의 두 번째 편에서는 아래와 같은 무한 페이징 스크롤을 만드는 방법을 배워볼 것입니다.
무한 페이징 스크롤
다뤄줬으면 하는 다른 팁이 있다면, 답글로 편하게 알려 주세요.
