android animation의 종류로는 기본적으로 3가지가 있다.

1. frame animation

2. tween animation (view animation)

3. property animation

.

.

.

.

.

.

.

.

frame animation

frame animation은 xml화일에 <animation-list> 와 <item>을 이용하여 만든다. 이를 ImageView에 src에 연결한다. 코드상에서는 ImageView를 통해서 AnimationDrawable obj형태로 받아오게된다.

res/drawable에 xml 형태로 저장된다.

참조) android docs AnimationDrawable https://developer.android.com/reference/android/graphics/drawable/AnimationDrawable

예시코드)

<!-- Animation frames are wheel0.png through wheel5.png
     files inside the res/drawable/ folder -->
 <animation-list android:id="@+id/selected" android:oneshot="false">
    <item android:drawable="@drawable/wheel0" android:duration="50" />
    <item android:drawable="@drawable/wheel1" android:duration="50" />
    <item android:drawable="@drawable/wheel2" android:duration="50" />
    <item android:drawable="@drawable/wheel3" android:duration="50" />
    <item android:drawable="@drawable/wheel4" android:duration="50" />
    <item android:drawable="@drawable/wheel5" android:duration="50" />
 </animation-list>
// Load the ImageView that will host the animation and
 // set its background to our AnimationDrawable XML resource.
 ImageView img = (ImageView)findViewById(R.id.spinning_wheel_image);
 img.setBackgroundResource(R.drawable.spin_animation);

 // Get the background, which has been compiled to an AnimationDrawable object.
 AnimationDrawable frameAnimation = (AnimationDrawable) img.getBackground();

 // Start the animation (looped playback by default).
 frameAnimation.start();

.

.

.

.

.

.

.

.

tween animation (view animation)

  • view의 display형태만 바꾸는 방법이며 실제로 view의 위치는 바뀌지 않는다. 사용자가 이동된 위치에서 터치를 해도 반응하지 않는다. 
  • animation은 translate, scale, rotate, alpha 4가지가 있다.
  • xml 형태로 만든 animation은 res/anim 폴더안에 넣는다.
  • tween animation은 view, drawable (ShapeDrawable, BitmapDrawable), layout에 적용가능하다.
  • tween animation은 내부적으로 Matrix, Transformation class를 사용한다. 
  • AnimationUtils의 loadAnimation()를 이용해서 xml형태의 Animation을 가져온다.

tween animation에서 만들때 사용가능한 animation tag들은 아래와 같다.

image
image

.

.

image
image
image
image

.

.

<set>을 이용하여 여러가지 animation을 동시에 구현할수 있다.

image
image
image
image

.

.

일반적으로 사용되는 위의 4가지 animation이 아닌 다른 움직임을 구현하기 위해서는 custom animation을 이용한다. 이는 Animation을 extends하고 필요한 method를 override해서 구현한다.

image

.

.

xml형태로 만들어진 tween animation은 layoutAnimation에 적용가능하다. layoutAnimation을 이용하면 layout내의 view들이 처음 등장할때 animation대로 등장하게된다.

https://youtu.be/qMQar9UNqjU?t=2311

image

.

.

activity간 전환에 적용되는 animation도 tween animation (view animation) 이다.

app 내에서 모든 window의 생성, 사라짐에 사용되는 animation를 지정할때는 theme에서 사용될 view animation을 지정해 주면된다.

image
image

단하나 주의점은 animation의 작동시간을 지정해도 0.25초안에 마무리 되게 된다. 

image
image

.

.

fragment 전환간 animation에도 tween animation (view animation)이 사용된다.

image
image

.

.

추가적으로 ViewSwitcher (TextSwitcher, ImageSwitcher), ViewFlipper는 tween animation (view animation)을 이용한다. 맨 아래부분 참조

.

.

.

.

.

.

.

.

property animation

ValueAnimator, ObjectAnimator를 이용하는 방법이 있다. 기본적으로 ObjectAnimator는 ValueAnimator를 기반으로 extends 해서 만들어졌다.

ValueAnimator는 특정범위에안에서 변화된 값을 만들어낸다. 이때 addUpdateListener를 통해 연결된 listener에서 onAnimationUpdate() 안에서 변화되는 값에 접근할수 있다.

Animator, ObjectAnimator를 xml로 만드는 경우에는 res/animator에 만든다.

아래는 code에서 ValueAnimator를 이용한 경우

image

.

아래는 xml를 이용한 ValueAnimator 경우

image
image

.

ObjectAnimator를 code에서 이용하는 법과 xml을 통해 이용하는 방법을 보여주고 있다.

image
image

.

.

animator 를 이용한 animation을 AnimatorSet으로 묶어서 순서를 가지고 수행하거나 동시에 수행하는 방법을 설명하고 있다.

image
image

.

.

Animator를 이용해서 layout내의 view가 등장하거나 사라지거나 다른 view가 등장 사라짐에따라 위치가 변경되는 경우에 사용되는 animation을 만들수 있으며 이를 LayoutTransition이라고 한다.

image

.

.

Animator를 이용한 animation인데 기존의 경우 ValueAnimator가 특정범위에안에서 변화된 값을 만들어내고 addUpdateListener를 통해 연결된 listener에서 onAnimationUpdate() 안에서 변화되는 값을 통해 view의 속성값을 변화시켰다. 아래의 경우도 같은 효과를 가진다. 다만 ViewPropertyAnimator (support library를 사용한겨우 ViewPropertyAnimatorCompat)를 생성하기위해 View.animate (또는 support 라이브러리의 경우 ViewCompat.animate) 에 속성값을 animate할 view를 arg로 받게 된다.

image
image

.

.

RecyclerView내의 item이 생성되거나 사라질때 애니메이션을 이용할수 있는데 이때에도 Animator를 기반으로한 property animation을 사용한다. 

참조 영상 ) RecyclerView 내의 item 생성소멸시 animation 사용예 https://youtu.be/8sQmuafiaAQ?t=220  

image
image

.

.

AdapterViewAnimator, AdapterViewFlipper, StackView는 property animator를 기반으로 하고 있다.

.

.

.

.

.

이름이 ViewAnimator이지만 기본적으로 ViewSwitcher (TextSwitcher, ImageSwitcher), ViewFlipper는 tween animation (view animation)을 이용한다.

AdapterViewAnimator, AdapterViewFlipper, StackView는 property animator를 기반으로 하고 있다.

실제 사용 예시)

Comments are closed.

Post Navigation