WaterPin — Technical stack #6–2 UI & UX — Drop Down Animation

• WaterPin에 적용한 List Drop Down Animation 효과 및 List Slide up, Down Animation 효과

WaterPin의 UX &UI 디자인을 효과적으로 구현하기 위해 사용한 Animation 중에 List Drop Down Animation과 List Slide up, Down을 정리해보겠다.

drop down and slide down, up Animation

유저 시나리오

1. 사용자가 Water History 화면을 보면 매일 마신 물의 기록 정보 리스트가 아래로 내려오는 효과와 함께 점점 진해지면서 나타나야 한다.

2. 사용자가 매일 마신 물의 기록 정보 리스트를 클릭하면 펼쳐지는 효과가 나타나야 한다.

3. 사용자가 펼쳐진 리스트를 클릭하면 닫히는 효과가 나타나야 한다.

List Drop Down Animation

List Drop Down

• 사용자가 Water History 화면을 보면 매일 마신 물의 기록 정보 리스트가 아래로 내려오는 효과와 함께 점점 진해지면서 나타나야 한다.

1. xml로 layoutAnimation을 정의한다.

R.anim.layout_list_animation_drop_down

2. xml로 Animation을 정의한다.

R.anim.list_animation_drop_down

3. onResume에 RecyclerView를 초기화하게 하였다.

• LayoutAnimation 속성을 정의한 xml(R.anim.layout_list_animation_drop_down)을 LayoutAnimationController 클래스를 이용해서 로드해서 RecyclerView를 초기화 할때 애니메이션을 적용하였다.

List Slide Down, Up Animation

List Slide Down, Up

• 사용자가 매일 마신 물의 기록 정보 리스트를 클릭하면 펼쳐지는 효과가 나타나야 한다.
• 사용자가 펼쳐진 리스트를 클릭하면 닫히는 효과가 나타나야 한다.

1. xml로 Slide Down Animation을 정의한다.

R.anim.slide_down_animation

2. xml로 Slide Up Animation을 정의한다.

R.anim.slide_up_animation

• Scalse Animation을 정의한다.

3. Recycler View Adapter의 ViewHolder에 애니메이션을 로드하여 사용하였다.

• 클릭 이벤트가 발생하였을 때 각각의 상황에 맞춰서 slide up, slide down animation을 로드하여서 적용하였다.
• AnimationListener를 달아서 다른 애니매이션 효과(Alpha Animation)도 적용시켰다.

WaterPin — Technical stack #6–1 UI & UX — Alpha Animation

이런식으로 애니메이션을 연계해서 사용하도록 할 수 있다.

WaterPin의 모든 코드는 제 Github 에서 확인 가능합니다.