안녕하세요!
오늘은 이렇게 데굴데굴
굴러가는 느낌의 로딩화면
프로토타이핑으로 만든
아웃풋 공유해 드려요!
바로가기
https://url.kr/kjag9q
(NIKE PLAY LAB 홈페이지의 로딩 애니메이션을 레퍼런스로 봤는데 조금 더 리얼한 느낌으로 만드려면 두께 등을 조금 더 섬세하게 다듬긴 해야겠네요!)아래 프로세스와
공동작업장 아웃풋. 참고해 보세요
만드는 방법1.
(1)흰색(위)-검은색(아래) / (2)검은색(위)- 흰색(아래) 띠를 오토 레이아웃으로 묶습니다.
2.
1에서 만든 프레임을 앞 뒤로 겹쳐주세요.
3.
레이어명은 예시에 표시해 놓은 것 처럼 서로 교차해서 바꿔줍니다. (예시에 파란색/빨간색으로 표시해 두었어요.)
4.
화면 높이와 비슷한 프레임을 만들고, 2를 집어넣습니다.(예시 참고)
5.
예시처럼 상단에 흰색 띠가 있는 것- 상단에 검은색 띠가 있는 것을
교차하여 배치해 줍니다.
6.
내려가는 효과를 주기 위해서
프레임 안에서 위치를 내려 주세요.
7.
전체 플로우를 컴포넌트 세트로
묶어줍니다.
8.
프로토타입은 After delay 1ms, change to, smart animation 200ms로 애니메이션을 걸어줍니다.