여러 서비스가 동작할 때 얼마나 그 기능이 문제없이 잘 작동하는 것도 중요하지만 사용자의 반응에 맞춰 적절한 애니메이션이 가미된다면 보다 역동적인 앱을 만들 수 있습니다.
안드로이드에서는 다양한 방법으로 애니메이션을 제공해주고 있는데, 그 중 물리학 모션을 기반으로 만들어진 SpringAnimation에 대해서 알아보겠습니다.
스프링 애니메이션이란?
안드로이드 개발자 문서에서는 다음과 같이 설명하고 있습니다.
Spring force is one such force that guides interactivity and motion. A spring force has the following properties: damping and stiffness. In a spring-based animation, the value and the velocity are calculated based on the spring force that are applied on each frame.
스프링 애니메이션은 마치 스프링력이라는 특정 값과 속도에 따라서 계산되는 애니메이션입니다.
이름에서도 나와있지만 스프링처럼 튀는 물리학 효과가 들어간 애니메이션이라고 생각하면 편합니다.
스프링 애니메이션 적용 방법
스프링 애니메이션 적용 순서는 다음과 같습니다.
- 지원 라이브러리 추가
- SpringAnimation 객체 생성
- 모션 동작 설정
그 외 객체에 리스너를 달아 애니메이션이 동작함에 따라 업데이트를 실행하고 관찰 할 수 있게 하거나, 애니메이션의 시작 값, 속도 등등 다양하게 설정합니다.
본인의 서비스에 원하는 방식대로 자유롭게 설정하여 적용할 수 있습니다.
1. 지원 라이브러리 추가
스프링 애니메이션을 이용하려면 라이브러리를 추가해주어야 합니다.
dependencies {
implementation "androidx.dynamicanimation:dynamicanimation:1.0.0"
}
2. Springanimation 객체 생성
SpringAnimation 객체를 생성할 때는 아래의 인자값이 필요합니다.
SpringAnimation(애니메이션이 적용될 뷰, 애니메이션 속성, 애니메이션이 정지할 최종 위치 )
여기서 애니메이션의 속성에 대해 아래에서 좀 더 자세하게 보도록 하겠습니다.
3. 모션 동작 설정
스프링 애니메이션 속성
스프링 애니메이션 속성은 DynamicAnimation의 필드값으로 존재하며 종류는 다음과 같습니다.
(주로 사용하는 것들 위주로만 적어보겠습니다.)
- ALPHA : 투명도를 나타냅니다. 0(투명) 1(불투명)사이의 값으로 투명도를 설정합니다.
- TRANSLATION_X,Y,Z : 상하좌우 높이에 대한 위치를 제어합니다. 여기서 Z는 높이를 기준으로 뷰의 높낮이를 통한 깊이를 의미합니다.
- ROTATION, ROTATION_X,Y : 중심점을 기준으로 회전에 대해 제어합니다.
- SCALE_X,Y : 중심점을 기준으로 크기에 대해 제어합니다.
- X,Y,Z : 전체 컨테이너에서 해당 뷰의 최종 위치를 나타냅니다.
ex) X = `컨테이너의 왼쪽 값 + TRANSLATION_X`
예시를 들어보겠습니다. 내가 이미지뷰에 대해서 X축으로 이동하는 애니메이션 을 적용하고 최종적인 위치는 0이라고 가정한다면 다음과 같은 SpringAnimation 객체를 만들 수 있습니다.
SpringAnimation(ImageView, DynamicAnimation.TRANSLATION_X, 0f)
다음 포스팅에서는 SpringAnimation에서 가장 중요하다고 볼 수 있는 강성과 감쇠비에 대해 알아보고 어떻게 적용하는지에 대해 포스팅해보겠습니다.
'안드로이드' 카테고리의 다른 글
[Android/Kotlin] SpringAnimation - 2. 강성과 감쇠비 (0) | 2021.11.03 |
---|---|
[Android/Kotlin] 중복 클릭을 막아보자(SingleClick) - MingSingleClickListener (3) | 2021.05.21 |
[Android/Kotlin] SharedPreferences 대신 쓰는 DataStore (3) | 2021.03.12 |
[Android/Kotlin] 비동기 작업을 위한 Coroutine을 Araboza! (1) (0) | 2021.01.13 |
[Android/Kotlin] MotionLayout - 3 ( Lottie와 ViewPager 활용 ) (0) | 2020.12.21 |