KokoaTalk Clone Coding: navigation screen(animation)

navigation-bar에 animation 

 

• nav__notification 알림에 animation

3단계로 나눠서 y축을따라 움직이고, 회전하는 animation 작성

 

animation 실행 조정

 

 

 

• nav__btn에 animation

아래에서부터 위로 올라오는 animation 작성

 

4개의 icon이 하나씩 위로 올라오도록 조정

첫번 째 icon을 제외한 다음 icon들의  animation을 지연 → animation이 시작하고 0.5초 동안 두번 째 icon은 animation이 없음

 

 

모든 icon이 위에 고정되어 있는 상태에서 animation이 시작하면 아래에서 위로 올라오도록 설정되어 있는 것을 

아래에 고정시키고 위로 올라오게 조정

 

from에 있던 내용을 nav__btn으로 옮겨서 animation 시작과 상관없이 아래에 고정되어 있도록 작성하고

animation에 forwards를 작성해 마지막 keyframes을 기억하도록 함

 

 

완성