안녕하세요, 여러분! ProtoPie 강사 Leah가 루핑 애니메이션 두 번째 편으로 찾아왔습니다.
지난주에는 기본 루핑 애니메이션을 다뤘습니다. 이번에는 무한 페이징 스크롤을 만드는 방법을 알려드리겠습니다. 하지만 먼저…
무한 페이징 스크롤이란?
무한 페이징 스크롤은 아래 데모처럼 서로 반대되는 두 방향으로 페이지를 반복해서 슬라이드할 수 있는 기능입니다.
그 원리는 무엇일까요?
이 경우에는 3개의 페이지를 사용하고 페이징 컨테이너로 묶었습니다.
이것은 ProtoPie의 매우 기본적인 기능입니다. 아직 페이징 컨테이너를 만들어 보지 않았다면, 이
내용이 도움이 될 것입니다.
이미 만드는 방법을 알고 계신다고 가정하고, 다음 단계로 넘어가겠습니다.
3번째 페이지를 왼쪽으로 밀면 그 뒤에 따라오는 페이지가 있어야 합니다. 따라서 Page 1을 Page 1'로 복제해 Page 3 뒤에 배치해야 합니다.
Page 1'가 화면 중앙으로 스크롤되면, 그 순간 모든 4개의 페이지가 원래 위치로 돌아가 Page 1이 다시 화면에 보여야 합니다. 시각적으로는 4번째 페이지(Page 1')를 즉시(during=0) 되돌리면 Page 1과 완전히 같기 때문에 사용자가 그 존재를 알아차릴 수 없습니다.
스크롤이 원래 상태로 돌아감
이제 페이지를 오른쪽에서 왼쪽으로 스크롤하는 방법을 알아보겠습니다. 먼저, 앞서와 마찬가지로 1번째 페이지의 왼쪽에 페이지가 하나 더 있어야 하므로 Page 3을 Page 3'로 복제해 Page 1의 왼쪽에 배치했습니다. 그런 다음 이 5개의 페이지가 Page 1부터 스크롤되도록 합니다. 방법을 모른다면 중간 페이지에서 페이징 시작하는 방법을 확인해 보세요.
앞서와 마찬가지로 Page 3'가 화면 중앙으로 이동하면 페이지를 즉시 Page 3으로 되돌려야 합니다. 그래야 오른쪽에서 왼쪽으로 계속 슬라이드할 수 있습니다.
스크롤 및 페이징 완료 예시
ProtoPie에서 이 인터랙션을 어떻게 만들까요?
이를 구현하려면 ‘Range’ 트리거와 ‘Scroll’ 응답을 사용해야 합니다.
Page 1'이 화면 중앙으로 스크롤될 때 거리(scroll offset)는 750입니다. ‘Range’ 트리거를 사용해 scroll offset을 749.5 ~ 750.5 사이로 설정한 다음, ‘Scroll’ 응답을 사용해 페이지를 187.5로 스크롤합니다(= 각 페이지의 너비).
Page 3'이 화면 중앙으로 스크롤될 때 거리(scroll offset)는 0입니다. ‘Range’ 트리거를 사용해 scroll offset을 -1~1 사이로 설정한 다음, ‘Scroll’ 응답을 사용해 페이지를 562.5로 스크롤합니다(= 각 페이지의 너비).
참고: 왜 한쪽은 ±0.5 범위로 설정하고 다른 쪽은 ±1로 설정했을까요? 음… 숫자가 너무 크지 않은 한, 양쪽 모두 같은 숫자로 설정해도 효과는 같습니다.
이 팁은 꽤 쉽지 않죠? 자세히 살펴볼 수 있도록 이 Pie 파일을 다운로드할 수 있습니다.
다뤄 보고 싶은 다른 팁이 있다면, 답장으로 편하게 알려 주세요.
