[안드로이드] Vector Drawable Animation 사용법 및 설명

안녕하세요 YTS 입니다.

오늘은 Vector Drawable Animation 사용법에 대해 설명 드리려고합니다.

안드로이드 스튜디오에서 기본적으로 제공을 해누는 Vertor Drawable!

이것을 코딩으로 손쉽게 Animation을 적용할 수 있습니다.

1. res -> drawable 폴더 오른쪽 클릭 후 -> new - > Vector Asset 클릭

2. 원하는 Vector Drawable을 생성한다.

3. 해당 Drawable의 그룹화와 animation효과를 코딩한다. (ic_favorite_anim.xml)

<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:aapt="http://schemas.android.com/aapt"
    xmlns:tools="http://schemas.android.com/tools"
    tools:targetApi="lollipop">
    <aapt:attr name="android:drawable">
        <vector xmlns:android="http://schemas.android.com/apk/res/android"
            android:width="24dp"
            android:height="24dp"
            android:viewportHeight="24.0"
            android:viewportWidth="24.0">
            <group
                android:name="favorite_group"
                android:pivotX="24"
                android:pivotY="24"
                android:rotation="0.0">
                <path
                    android:name="favorite"
                    android:fillColor="@color/colorPrimary"
                    android:pathData="M12,21.35l-1.45,-1.32C5.4,15.36 2,12.28 2,8.5 2,5.42 4.42,3 7.5,3c1.74,0 3.41,0.81 4.5,2.09C13.09,3.81 14.76,3 16.5,3 19.58,3 22,5.42 22,8.5c0,3.78 -3.4,6.86 -8.55,11.54L12,21.35z"
                    android:strokeColor="@color/colorPrimary"
                    android:strokeLineCap="round"
                    android:strokeLineJoin="round"
                    android:strokeWidth="2.0" />
            </group>
        </vector>
    </aapt:attr>
    <target android:name="favorite">
        <aapt:attr name="android:animation">
            <set xmlns:android="http://schemas.android.com/apk/res/android">
                <objectAnimator
                    android:duration="300"
                    android:interpolator="@android:interpolator/fast_out_slow_in"
                    android:propertyName="fillColor"
                    android:valueFrom="@color/colorPrimary"
                    android:valueTo="@color/transparent" />
                <objectAnimator
                    android:duration="300"
                    android:interpolator="@android:interpolator/fast_out_slow_in"
                    android:propertyName="strokeColor"
                    android:valueFrom="@color/colorPrimary"
                    android:valueTo="@color/gray_dark_three" />
            </set>
        </aapt:attr>
    </target>
    <target android:name="favorite_group">
        <aapt:attr name="android:animation">
            <set xmlns:android="http://schemas.android.com/apk/res/android">
                <set xmlns:android="http://schemas.android.com/apk/res/android">
                    <objectAnimator
                        android:duration="75"
                        android:interpolator="@android:interpolator/fast_out_slow_in"
                        android:propertyName="rotation"
                        android:valueFrom="0"
                        android:valueTo="5" />
                    <objectAnimator
                        android:duration="75"
                        android:interpolator="@android:interpolator/fast_out_slow_in"
                        android:propertyName="rotation"
                        android:startOffset="75"
                        android:valueFrom="5"
                        android:valueTo="0" />
                    <objectAnimator
                        android:duration="75"
                        android:interpolator="@android:interpolator/fast_out_slow_in"
                        android:propertyName="rotation"
                        android:startOffset="150"
                        android:valueFrom="0"
                        android:valueTo="-5" />
                    <objectAnimator
                        android:duration="75"
                        android:interpolator="@android:interpolator/fast_out_slow_in"
                        android:propertyName="rotation"
                        android:startOffset="225"
                        android:valueFrom="-5"
                        android:valueTo="0" />
                    <objectAnimator
                        android:duration="300"
                        android:interpolator="@android:interpolator/fast_out_slow_in"
                        android:propertyName="pivotX"
                        android:valueFrom="20.0"
                        android:valueTo="24.0" />
                    <objectAnimator
                        android:duration="300"
                        android:interpolator="@android:interpolator/fast_out_slow_in"
                        android:propertyName="pivotY"
                        android:valueFrom="20.0"
                        android:valueTo="24.0" />
                </set>
            </set>
        </aapt:attr>
    </target>
</animated-vector>

<path></path> 태그로 쌓여있는부분에서는 pathData, Color 등을 설정 할 수 있습니다!

<group></group> 태그는 pivoX, pivoY, rotation 을 설정 할 수 있습니다.

정말 중요한부분은 여기서 애니메이션 효과를 줄 수 있는부분도 마찬가지입니다.

1. 만약 <path> 태그에서 rotation와 같은것 을 설정 하고 애니메이션 효과를 넣으면 에러가 납니다!!!

2. <target> 태그의 이름과 <path> 혹은 <grop> 의 네임이 같아야합니다!

3. 애니메이션 효과로 pathData를 변경 하시려면 valueFrom 과 valueTo 의 pathData 길이가 같아야합니다.

이부분들을 이해하시면 drawable 쪽은 마무리가 됐다고 보시면됩니다.

<android.support.v7.widget.AppCompatImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content
    android:padding="8dp"
    app:srcCompat="@drawable/ic_favorite_anim" />

다음으로 ImageView 에 drawable을 연결 합니다.

public void like(View view) {
    if (view instanceof ImageView) {
        ImageView imageView = (ImageView) view;
        Drawable drawable = imageView.getDrawable();
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
            if (drawable instanceof AnimatedVectorDrawable) {
                AnimatedVectorDrawable animatedVectorDrawable = (AnimatedVectorDrawable) drawable;
                animatedVectorDrawable.start();
            }
        } else {
            if (drawable instanceof AnimatedVectorDrawableCompat) {
                AnimatedVectorDrawableCompat animatedVectorDrawableCompat = (AnimatedVectorDrawableCompat) drawable;
                animatedVectorDrawableCompat.start();
            }
        }
    }
}

클릭 이벤트를 넣어 애니메이션 효과를 얻습니다!

저는 drawable 부분에서 정말 애를 먹었는데요.

위에 적어놓은 주의 사항 3개 모두를 겪고 적었습니다...

 

부디 이 글을 보시는 분들은 저와같은 고통을 안겪길바라면서 마무리 하겠습니다.

감사합니다.