[Android][compose] Animated drawable graphics

애니메이션을 표시해야 하는 경우 AnimationDrawable이나 AnimatedVectorDrawable을 사용한다.

1. AnimationDrawable

AnimationDrawable에서는 drawable 리소스를 차례로 로드하여 애니메이션을 만든다.

AnimationDrawable 클래스 API를 활용하면 AnimationDrawable을 쉽게 구현할 수 있다.

    <animation-list xmlns:android="http://schemas.android.com/apk/res/android"
        android:oneshot="true">
        <item android:drawable="@drawable/rocket_thrust1" android:duration="200" />
        <item android:drawable="@drawable/rocket_thrust2" android:duration="200" />
        <item android:drawable="@drawable/rocket_thrust3" android:duration="200" />
    </animation-list>
    

위의 파일을 res/drawable 디렉토리에 정의한다.
animation-list 내부에 item으로 drawable 리소스를 정의하고 지속 시간을 작성한다.
animation-list에는 oneshot 속성이 있다.

• true로 설정: 한 번만 item을 순환한 다음 마지막 프레임에서 정지
• false로 설정: 애니메이션 연속 재생

위와 같이 작성한 xml 리소스 파일은 코틀린 파일에 아래처럼 작성하여 활용할 수 있다.

    private lateinit var rocketAnimation: AnimationDrawable

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.main)

        val rocketImage = findViewById<ImageView>(R.id.rocket_image).apply {
            setBackgroundResource(R.drawable.rocket_thrust)
            rocketAnimation = background as AnimationDrawable
        }

        rocketImage.setOnClickListener({ rocketAnimation.start() })
    }
    

상호작용이 필요하지 않은 경우에는 onCreate() 대신 onStart() 메서드를 사용한다.

2. AnimatedVectorDrawable

AnimatedVectorDrawable 클래스를 사용하면 벡터 드로어블을 회전하거나 경로 데이터를 변경하여 다른 이미지로 변형하는 등 VectorDrawable을 애니메이션화 할 수 있다.

AnimatedVectorDrawable은 일반적으로 다음 세 가지 xml 파일을 통해 정의한다.

• res/drawable/에 vector 요소가 있는 벡터 드로어블
• res/drawable/에 animated-vector 요소가 있는 애니메이션화된 벡터 드로어블
• res/animator/에 objectAnimator 요소가 있는 하나 이상의 객체 애니메이터

1. vector 요소의 정의
group및 path 요소의 속성을 애니메이션화 할 수 있다.

• group: 경로 또는 하위 그룹 조합을 정의함
• path: 애니메이션을 그릴 경로 정의

<!--res/drawable/vectordrawable.xml 파일-->

    <vector xmlns:android="http://schemas.android.com/apk/res/android"
        android:height="64dp"
        android:width="64dp"
        android:viewportHeight="600"
        android:viewportWidth="600">
        <group
            android:name="rotationGroup"
            android:pivotX="300.0"
            android:pivotY="300.0"
            android:rotation="45.0" >
            <path
                android:name="v"
                android:fillColor="#000000"
                android:pathData="M300,70 l 0,-70 70,70 0,0 -70,70z" />
        </group>
    </vector>
    

2. animated-vector 요소의 정의
VectorDrawable을 사용하여 그룹과 경로를 참조하고, ObjectAnimator를 통해 애니메이션을 참조한다.

<!--res/drawable/animatorvectordrawable.xml 파일-->

    <animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
      android:drawable="@drawable/vectordrawable" >
        <target
            android:name="rotationGroup"
            android:animation="@animator/rotation" />
        <target
            android:name="v"
            android:animation="@animator/path_morph" />
    </animated-vector>
    

3. objectAnimator 요소의 정의

<!--res/animator/rotation.xml 파일-->

    <objectAnimator
        android:duration="6000"
        android:propertyName="rotation"
        android:valueFrom="0"
        android:valueTo="360" />

위의 코드는 타겟 그룹을 360도 회전하는 애니메이션이다.

<!--res/animator/path_morph.xml-->

    <set xmlns:android="http://schemas.android.com/apk/res/android">
        <objectAnimator
            android:duration="3000"
            android:propertyName="pathData"
            android:valueFrom="M300,70 l 0,-70 70,70 0,0   -70,70z"
            android:valueTo="M300,70 l 0,-70 70,0  0,140 -70,0 z"
            android:valueType="pathType" />
    </set>
    

위의 코드는 벡터 드로어블 경로를 한 도형에서 다른 도형으로 변형한다.