Android Animation System 정리

Android 의 다양한 Animation Apis

안드로이드를 개발하다 보면, 다양한 Animation 효과를 내고 싶어서 구글링 하다보면 너무 다양한 API들이 있는 것을 확인할 수 있습니다.

그래서! 그것을 정리해보고자 합니다. 

가장 처음 등장한 API 순으로 정리해 보겠습니다. 

1. View Animations
(android.view.animation)

Api 1부터 존재해온 가장 오래된 방식으로, 현재는 Deprecated 가 되려고 한다. (실제로 스튜디오에서 Deprecated가 뜨지는 않음)

렌더링 방식: 

안드로이드의 모든 뷰가 그렇듯이 measure -> layout -> draw 방식을 거친다. 

불행히도, Animation은 Draw 단계에서만 실행된다. 

즉, Deferring rendering 도 불가능하고, 실제로 버튼의 위치를 바꾸게 되면 실제 버튼이 움직이는 것이 아니라 보여지는 뷰만 draw 중인 것이다. 

그러나! 사용을 권장하는 부분이 있다. 

1. Window Animation
(새 액티비티 열기 등)

부연 설명: The fact that it runs in a draw pass is useful because it guarantees that the view is already measured when you do this.
뷰가 이미 계산되어 있을 경우기 때문에 사용해도 된다고 한다. (액티비티의 경우 뷰의 위치가 이미 정해져있고, 그 전체를 draw 효과를 통해서만 animation 효과를 주는 방식을 사용하기 때문에 사용에 적절하다고 볼 수 있다.)

2. Fragment Transactions

anim 방식

그러나, 더 좋은 Animator api 가 있으니 이제는 이걸 사용하는걸 추천한다. 

animator 방식

 

---

2. Animator

• API 11 부터 등장
• 활용도가 높다 
  • AnimatorVectorDrawable
  • ItemAnimator in RecyclerView

<Animator 종류>

IS-A : 상속관계 / BACKED BY : 참조 / USED BY : 변수로 사용

1) ObjectAnimator

- 단일 속성 변경

(참고로 View.ALPHA 형식의 심볼릭 값은 API 14 에 등장)

 

- 다중 속성 변경

PropertyValuesHolder 를 사용하면 된다.

xml로 대체 가능

 

2) AnimationSet

3) ViewPropertyAnimator

• Backed by a valueAnimator
• Concise
• Slightly more efficient (하나의 뷰만을 담당해서 그런듯)
• Fire-n-Forget
  • No animation coordination
  • No seeking/reversing/repeating

4) ValueAnimator

자세히 보면Setting up yout accout 뒤에 ... 이 바뀐다. 

 

<Animator 를 적절하게 쓰려면?>

• ObjectAnimator : general purpose, property animator
• ValueAnimator : more custon animation
• ViewPropertyAnimator
  • Multiple properties on the same View
  • Fire and Forget
• PropertyValuesHolder : multiple properties on the same object at ObjectAnimator
• AnimatorSet : choreograph a set of animations
  (choreograph : 연출하다.)

 

---

3. Animated Vector Drawable

화려한 아이콘 같은 Vector Graphic Animations을 다루기에 적합하다. 

Animated Vector Drawable은 Vector Drawable과 Object Animator에 의해서 작동된다. 

val avd = AppCompatResources.getDrawable(
	context, R.drawable.avd_foo) as AnimatedVectorDrawable

imageView.drawable = avd
avd.start()

 

• Vector 그래픽을 활용하여 성능이 좋다. 
  • Nougat 부터  Re-implemented in native code 되었다. 
    (native code 동작으로 넘어갔다. 즉 성능 향상)
  • and also offloaded to the render thread
    (렌더 스레드와 분리되었다. 사용자가 UI-Thread 를 사용하고 있어도 animation은 멈추지않고 진행된다.)
• 언제 사용하면 좋을까?
  • Icon animation (by using vector graphic)
  • 'Fire & Forget' animations
  • Performance critical 
• 과정을 컨트롤 할 수 없다
  • 무슨의미? => vector 그래픽이 파일처럼 완성되어 있는 것이기 때문에. 
• 과정을 컨트롤 하고 싶다면?
  • Lottie : airbnb의 Lottie animation
  • Kyrie: (애는 처음들어봐서 찾아봐야할듯)

 

Animation vs Animator 

Animations only change visual representation. but Animator is Really change physical properties.
(https://stackoverflow.com/questions/28220613/what-is-the-difference-between-an-animator-and-an-animation)

 

---

4. Physics

•  특징
  • Interruptible : 반응형? 
  • Continuity
  • Realistic look

아래 참조 코드의 특징은 onTouch() 함수의 커스터마이징이다. 

https://developer.android.com/training/gestures/movement?hl=ko

터치 및 포인터 움직임 추적하기  |  Android 개발자  |  Android Developers

 

---

5. Transitions API

 

• 간단히 설명하자면 A layout에서 B layout으로 전환해주는 API이다
• 코드가 짧고 사용법이 아주 간단하다
• MotionLayout 을 사용하길 더 추천한다

 

오른쪽(초록색) 의 코드처럼 

https://github.com/android/plaid

android/plaid

 

<SharedElementTransition> 을 사용한 방법 

위에 화면 전환은 SharedElement 와 Window Content Transition 가 사용된다. 

• SharedElementTransition
  • between two activities 간의 이동
• Window content Transition 
  
  • activity 실행 또는 종료 

 

• 언제 사용하면 좋을까?
  • Shared element activity transitions
  • Window content enter/exit
  • Modularize animations (xml로 빼기)
  • Simple changes

 

---

6. MotionLayout 

- 추후 정리 예정

 

---

* Final Summarize  

 

---

<마치며>

개인적으로 아직도 Animation을 쓰기도 하고, ObjectAnimator를 자주 사용해 오고 있다. 
TransitionLayout과 Animation Vector Drawable도 가끔 사용을 하곤 하지만.. 

필요한 상황에 따라 가장 효율적인 방법을 생각하진 못했다. 
(적절한 상황에 맞춰서 선별해서 사용해야함을 뼈저리게 느꼈다.)

그리고 무엇보다도 MotionLayout이 최종 보스느낌이니 적극 사용해봐야할듯 하다.

---

<참고>

ViewAnimationUtils.createCircularReveal() 라는 것도 있음

val cx = setting?.centerX
val cy = setting?.centerY

val radius = hypot(right.toDouble(), bottom.toDouble())

val reveal = ViewAnimationUtils.createCircularReveal(v, cx ?: 0, cy ?: 0, 0F,
radius.toFloat()
)

// AccelerateInterpolator 클래스 상속받아서 수치를 커스터마이징 할 수 있다. getInterpolation Override
reveal.interpolator = AccelerateInterpolator(1.5f)
reveal.duration = 1500
reveal.startDelay = 0
reveal.start()

 

---

참고자료: https://www.youtube.com/watch?v=N_x7SV3I3P0