- WaterPin에 적용한 Alpha Animation 효과
WaterPin의 UX &UI 디자인을 효과적으로 구현하기 위해 사용한 Animation 중에 Alpha Animation을 정리해보겠다.
유저 시나리오
1. 리스트가 안보일 경우 사용자가 리스트 아이템을 클릭하면 오늘 마실 물의 목표를 나타내는 Text가
- 파란색 글씨 옆에서 점점 진해지면서 나타나야 한다.
- 파란색 글씨 아래에서 점점 흐려지면서 사라져야 한다.
2. 리스트가 보일 경우 사용자가 리스트 아이템을 클릭하면 오늘 마실 물의 목표를 나타내는 Text가 파란색 글씨 아래에서 점점 진해지면서 나타나야 한다
- 파란색 글씨 옆에서 점점 흐려지면서 사라져야 한다.
- 파란색 글씨 아래에서 점점 진해지면서 나타나야 한다.
Alpha Animation Util
- apply fade animation function
— 500 milliseconds 동안
— alpha 값을 1.0 에서 0.0 으로
—애니메이션이 종료된 상태를 유지한다.
- apply appear animation function
— 500 milliseconds 동안
— alpha 값을 0.0 에서 1.0 으로
— 애니메이션이 종료된 상태를 유지한다.
유저시나리오 1 :
AlphaAnim.startAppearAlphaAnim(itemView.waterGoal)
AlphaAnim.startFadeAlphaAnim(itemView.itemWaterGoal)유저 시나리오 2.:
AlphaAnim.startAppearAlphaAnim(itemView.itemWaterGoal)
AlphaAnim.startFadeAlphaAnim(itemView.waterGoal)이런식으로 사용 가능하다.
WaterPin의 모든 코드는 제 Github 에서 확인 가능합니다.