👋Android의 모든 것 : 1️⃣안드로이드의 애니메이션의 모든 것

https://goni95.tistory.com/173

👋Android에 모든 것 개념

 

안드로이드에서 애니메이션을 구현하는 방법과 애니메이션 종류는 다양합니다. 그래서 애니메이션의 유형부터 무엇을 선택할지 애니메이션의 사용 방법까지 정리해볼까 합니다.

 

개념을 우선 정리해두고 각각의 API를 사용할 일이 있을 때 예제를 정리하겠습니다.

 

우선 애니메이션 API의 종류는 아래와 같이 정말 다양합니다.

1. ViewAnimations (API 1)
2. ValueAnimator, ObjectAnimator (API 11)
3. ViewPropertyAnimator (API 12)
4. Transitions (API 19)
5. AnimatedVectorDrawable (API 21에 추가되었지만 AndroidX로 하위 버전도 사용 가능)
6. Physics, MotionLayout (AndroidX)

 

1. ViewAnimations

안드로이드 가장 초기에 쓰이던 API

1-1. Tween Animation

View에 적용되는 애미네이션으로 View의 크기 / 위치 / 회전 / 투명도(페이드) 조정을 담당하며 res/anim/ 디렉토리에 <scale>, <translate>, <rotate>, <alpha> 태그를 사용하여 xml 파일을 정의하면 됩니다.

 

1-2. Frame Animation

비디오 프레임처럼 실행되는 애니메이션으로 XML에 정의된 애니메이션을 순차적으로 표시합니다. drawable을 사용하여 적용되고 res/drawable/ 디렉토리에 <animation-list>, <item> 태그 등을 사용해 순차적으로 표시할 drawable 목록을 지정

 

주의할 점은 ViewAnimations View의 속성이 바뀌지 않기 때문에, View를 다른 위치로 이동시키는 애니메이션을 구현했더라도 View의 속성은 처음 위치에 그대로 있기 때문에 클릭 이벤트 등의 이벤트에 반응하지 못합니다.

 

위에서 말한 주의할 점과 View Animations로 구현할 수 있는 것은 ViewProperyAnimator를 사용해도 구현할 수 있고 더 빠르고 간결하기 때문에 잘 쓰이지 않는다고 합니다.

 

2. Property Animation(ValueAnimator, ObjectAnimator)

객체의 속성을 변경하여 애니메이션을 지정하기 때문에 Property Animation으로 불립니다. 

지정할 수 있는 속성은 아래와 같습니다.

1. Duration : 재생 시간 지정
2. Time interpolation : 시간에 따른 속성 값의 변화 정도를 지정
3. Repeat count and behavior : 애니메이션 반복을 지정 / 역방향 재생 가능
4. Animator sets : 애니메이션을 동시에 혹은 순차적으로 재생
5. Frame refresh delay : 애니메이션 프레임의 새로 고침 빈도를 지정

 

2-1. ValueAnimator

ValueAnimator는 다른 애니메이션 API의 기반이 될 정도로 훨씬 강력해진 API로, View 또는 View가 아닌 객체 등 모든 것들에 Animation 효과를 적용할 수 있습니다.

중요한 점은 애니메이션 값을 적용할 위치를 지정하는 onAnimationUpdate() 메서드를 재정의하기 위한 ValueAnimator.AnimatorUpdateListener를 구현해야 합니다.

 

ValueAnimator 클래스를 사용하면 애니메이션화할 int, float, 색상 값 집합을 지정하여 애니메이션이 진행되는 동안 특정 유형의 값을 애니메이션화할 수 있고, Factory method인 onInt(), ofFloat(), ofObject() 중 하나를 호출하여 얻을 수 있습니다.

 

2-2. ObjectAnimator

ValueAnimator의 하위 클래스로 ValueAnimator의 타이밍 엔진 및 값 계산과 대상 객체에 명명된 property에 애니메이션화하는 기능을 결합합니다.

따라서 property가 자동으로 업데이트 되기 때문에 ValueAnimator.AnimatorUpdateListener를 구현할 필요가 없어지므로 객체의 애니메이션화가 훨씬 쉬워집니다.

 

ValueAnimator는 코드에서 ValueAnimator.ofFloat(0f).addUpdateListener { ... }.start() 식으로 사용되며, ObjectAnimaotr는 ObjectAnimator.ofFloat(view, View.ALPHA, 0f).start() 방식과  res/animator/ 디렉토리에 <objectAnimator> 태그를 사용하는 방식으로 사용될 수 있습니다.

 

3. ViewPropertyAnimator

ValueAnimator를 기반으로 동작하는 객체를 직접 Animator object로 인스턴스화 할 필요가 없으므로, 안드로이드에서 제공하는 간단한 애니메이션을 만들 수 있는 API 입니다. 애니메이션의 순차 처리와 커스터마이징한 애니메이션 등의 복잡한 애니메이션은 적용할 수 없습니다.

 

animate() 메서드를 통해서 구현하지만, 자체적으로 반복 기능을 가지고 있진 않기 때문에 외부에서 따로 반복시키도록 처리해주어야 합니다. 애니메이션이 진행 중에 다시 start()를 하면, 이전 애니메이션이 멈춘 지점부터 다시 시작합니다.

밖에서 따로 애니메이션의 진행 상황을 관리할 순 없기 때문에 애니메이션을 실행시키고 신경 쓸 필요 없는 *fire-and-forget 형식으로 쓰입니다.

 

4. Transitions

*Shared Element Transition을 구현할 때 가장 많이 사용되며, 액티비티 간 전환 시 공유 요소에 애니메이션을 적용합니다. 동일한 액티비티 내에서 View 변경 사항을 애니메이션으로 표시할 수 있습니다.

Transition은 액티비티 A에서 컨텐츠 레이아웃으로 전환할 때 액티비티 B에 정의된 Transition에 따라 애니메이션 됩니다.

 

android.transition.Transition에는 미리 정의된 세 가지(Explode, Slide, Fade)의 Transition이 있습니다.

 

5. AnimatedVectorDrawable

ObjectAnimator 또는 AnimatorSet을 사용하여 정의된 애니메이션으로 VectorDrawable의 속성에 애니메이션을 적용합니다.

AndroidX 사용 시 AnimatedVectorDrawableCompat으로 사용되고 기존에 UI Thread에서 실행되던 것과 달리 안드로이드 7.1 (Nougat-MR1 : API 25)부턴 RenderThread에서 실행됩니다.

 

특정 지점으로 seek하는 등의 기능은 지원하지 않기 때문에 *fire-and-forget 형식으로 사용되고 섬세한 컨트롤이 필요한 경우 Lottie를 사용하는 것이 좋습니다.

 

6. MotionLayout

ConstraintLayout 2.0.0 부터 추가된 API로 ConstraintLayout이면서 애니메이션에 중점을 둔 새로운 ViewGroup 입니다.

 

MotionScenes라는 xml 파일에 <Transition> <OnSwipe> <ConstraintSet> 등의 태그를 정의해 애니메이션 효과를 만들어낼 수 있습니다.

---

 

고찰

이렇게 애니메이션을 구혀할 때 사용할 수 있는 API 들을 확인해봤는데, 구현된 애니메이션에 대한 자료를 찾아보면 정말 이쁘고 화려한 애니메이션을 찾아볼 수 있습니다. 하지만 우리가 실제로 사용하는 앱에선 그런 기능들을 활용하는 경우를 많이 찾아보기 어렵다고 생각됩니다.

 

사실 실제로 빌드된 결과물을 확인하며 구현해야 하기때문에 UI를 구현할 때 많은 시간이 소요되기도 하고 MVP, MVVM 같은 아키텍처 패턴을 사용하는 이유 중 하나가 View가 하는 일을 줄이려는 것인데, 애니메이션은 오히려 View Layer에 작업을 부여하여 복잡도가 올라가고 유지보수 비용도 만만치 않습니다. 그리고 UI를 업데이트하는 Animator는 애니메이션이 실행되는 경우 추가 렌더링 작업을 유발하기 때문에 앱 성능에 악영향을 줄 수 있습니다.

 

화려하고 복잡한 Animation 구현이 사용자에게 서비스를 제공하려는 궁극적인 목적에 비해 가성비가 떨어지니 최소화 하려는 것이 아닐까 싶습니다.

 

UI 애니메이션을 구현할 때 Profile GPU Rendering 도구를 이용해 애니메이션 단계를 모니터링 하며 앱 성능에 어느정도 영향을 주는지 확인하며 작업하는 것이 좋고 구현하려는 애니메이션에 따라 적절한 방법을 찾는 것이 좋습니다.

---

 

가이드

그럼 구현하려는 애니메이션에 대해 적절한 Animator를 선택하는 가이드를 알아보겠습니다.

순차적(여러 개의 애니메이션이 차례대로 실행)

동시적(여러 개의 애니메이션이 동시에 실행)

 

1. 특별히 관리가 필요없고 하나의 뷰에서 순차적, 동시적, 반복적인 애니메이션이 아닌 간단한 애니메이션을 구현하고 싶다면 ViewPropertAnimator를 사용

 

2. 하나의 뷰에서 뷰의 모든 속성을 이용하며 순차적, 동시적 애니메이션이 아닌 간단하고 반복적인 애니메이션을 구현하고 싶다면 ObjectAnimator를 사용

 

3. 하나의 뷰에서 동시적 애니메이션을 구현하고 싶다면 PropertyValueHolder를 사용

 

4. 반복적이지 않고 여러 개의 뷰들에 순차적, 동시적 애니메이션을 구현하고 싶다면 AnimatorSet을 사용

 

5. 뷰 또는 객체의 속성이 아닌 것에 애니메이션을 적용하거나 애니메이션의 커스터마이징을 극대화 하고싶다면 ValueAnimator를 사용

 

6. Shared Elemnet Transition을 구현하고 싶다면 Transitions을 사용

 

7. 움직이는 벡터 아이콘을 만들고 싶다면 AnimatedVectorDrawable 또는 Lottie를 사용

---

 

*fire-and-forget : 무기 운용 체계 중, 목표를 항상 지시하지 않고, 발사 시 처음에만 타겟을 지정하여 미사일을 날리면 알아서 타겟을 쫒을거라 믿고 발사 후 신경끄는 방식을 의미합니다. 즉, 처리 결과를 감시하다 결과가 나오면 능동적으로 처리하는 방식

 

*Shared Element Transition : Android 5.0 (Lolipop : API 21) 부터 나온 개념으로, Activity를 전환할 때 View를 마치 공유하는 것 같은 느낌으로 애니메이션 효과를 주는 기법입니다.

---

https://seosh817.tistory.com/18

[Android] Animation 정리

 

https://medium.com/mj-studio/%EC%95%88%EB%93%9C%EB%A1%9C%EC%9D%B4%EB%93%9C-%EC%95%A0%EB%8B%88%EB%A9%94%EC%9D%B4%EC%85%98-%EB%8F%8C%EC%9E%94%EC%B9%98-part-1-feca04af34dc

안드로이드 애니메이션 돌잔치 Part 1

 

https://fornewid.medium.com/android-ui%EC%97%90-animation-%EB%93%A4%EC%9D%B4%EB%B6%93%EA%B8%B0-e95cabbb517c

Android UI에 Animation 들이붓기

 

https://github.com/lgvalle/Material-Animations

GitHub - lgvalle/Material-Animations: Android Transition animations explanation with examples.

 

https://giantsol.github.io/android-animations/

안드로이드의 애니메이션 api 정리 - Hansol’s Blog

 

 

https://shubham08gupta.medium.com/a-beginners-guide-to-implement-android-animations-part-1-2-part-series-b5fce1fc85

A beginners guide to implement Android Animations — Part 1 (2 part series)

 

https://www.crocus.co.kr/1690

[Android] 언제 어떤 Animator를 사용할 것인가?

 

https://velog.io/@tltty123/Android-ValueAnimator

Android ValueAnimator

 

https://velog.io/@tltty123/Android-ObjectAnimator

Android ObjectAnimator