소개
스켈레톤 UI 로딩 애니메이션은 실제 UI를 나타내며, 화면의 콘텐츠가 로드되는 데 얼마나 걸릴지 사용자에게 알려 줍니다. 스켈레톤 UI는 로딩 정보를 위한 중립적/회색 톤의 자리표시자를 사용합니다. 이 효과는 ProtoPie의 여러 Jump 및 Opacity 응답을 통해 쉽게 구현할 수 있습니다. 이 튜토리얼이 끝나면 사실적으로 보이는 스켈레톤 UI를 만드는 방법을 배우게 됩니다.
배울 내용
이 레슨에서는 다음을 배우게 됩니다:
Tap 트리거와 Jump 응답을 사용해 로딩 중인 장면과 로드된 장면을 전환하는 방법
Opacity 응답을 사용해 스켈레톤 로더에 반짝임 효과를 주는 방법
마지막에는 다음과 같은 것을 만들 수 있게 됩니다!
단계별 안내
1. 스켈레톤 로더 장면으로 이동하기
1. 홈 장면 (scene 1)에서 "Social App" 레이어에 탭 트리거를 추가합니다.
2. Tap 트리거 아래에 Jump 응답을 추가합니다. Jump를 스켈레톤 로더 장면 (scene 2)으로 설정합니다. 전환 효과는 앱 실행 효과를 얻기 위해 Pop으로 설정합니다(프로토타입에 맞게 원하는 전환 효과를 추가할 수 있습니다).
💡 왜 Jump 응답을 사용하나요?
ProtoPie는 장면(Scene) 단위로 동작합니다. 한 장면에서 다른 장면으로 전환하려면 Jump 응답을 사용합니다.
2. 로드된 콘텐츠 장면으로 이동하기
1. 스켈레톤 로더 장면 (scene 2)에서 Start 트리거를 추가합니다
2. Start 트리거 아래에 Jump 응답을 추가합니다. Jump를 로드된 콘텐츠 장면 (scene 3)으로 설정합니다. 정보가 서서히 나타나는 효과를 위해 전환 효과를 Fade로 설정합니다. 또한 정보가 몇 초 후에 로드되도록 3초 지연을 추가합니다.
💡 왜 3초 지연을 추가하나요?
로딩 효과를 시뮬레이션하기 위해서입니다.
3. 스켈레톤 로더에 반짝임 효과 주기
1. 스켈레톤 로더 장면 (scene 2)으로 이동합니다
2. Skeleton 1 레이어의 Start 트리거 아래에 Opacity 응답을 추가하고 불투명도를 100으로 설정합니다. 그런 다음 다음을 수행합니다:
3. Opacity 응답을 두 번 복제합니다. 그리고 새로 만든 두 Opacity 응답을 Skeleton 2와 Skeleton 3 레이어에 설정합니다.
4. 기존의 세 Opacity 응답을 복제합니다. 새로 만든 세 응답의 Start Delay를 0.5로 설정합니다. Opacity를 50으로 설정합니다.
💡 Opacity 응답은 무엇을 하나요?
반짝임 효과는 실제로 불투명도 값이 100과 50 사이에서 반복적으로 변하는 것입니다. Opacity 응답은 레이어의 불투명도 값을 100으로 설정한 다음 다시 50으로 되돌리는 동작을 반복합니다. 이는 화면에서 정보가 로딩되는 효과를 구현하는 데 도움이 됩니다.
이제 완료되었습니다!
끝까지 따라와 주셔서 감사합니다. 이제 이 간단한 방법으로 스켈레톤 로딩 UI 효과를 구현할 수 있습니다. 직접 한번 해보세요!
