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