AnimatedVectorDrawable for Android

AnimatedVectorDrawable

• Vector Animation은 vector 기반이라 이미지를 확대해도 깨지지 않는다
• 총 3개의 파일을 추가한다. 애니메이션을 정의하는 objectAnimator, 애니메이션이 멈추었을 때 보이는 vector image인 vector, 그 둘을 이어주는 animated-vector, 3가지 파일을 정의해야한다

objectAnimator 정의

• res/animator/test_ani.xml

  <set>
    <objectAnimator
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:duration="1000"
        android:propertyName="pathData"
        android:valueFrom="M 10,60, L 10,40, L 30,40, L30,60 Z"
        android:valueTo="M 10,60, L 20,40, L 40,40, L 30,60 Z"
        android:valueType="pathType"
        android:repeatCount="-1"
        android:repeatMode="reverse"/>
  </set>

• Vector Animation을 정의

• valueFrom, valueTo에는 Vector Script가 사용됨

• y축은 위에서 부터 아래로 0부터 커진다

• 10, 60은 x, y좌표

• 소문자도 된다고 적혀 있지만 테스트 시 소문자를 사용하면 도형이 보이지 않음

• M : moveTo, 커서를 이동시키는 명령어, X, Y좌표를 적어야 한다

• L : lineTo, 커서의 현재 좌표에서 부터 뒤에 오는 좌표(X,Y)까지 선을 이어준다

• Z : 커서의 현재 좌표에서 시작좌표까지 선을 그린다

• 즉 M으로 시작해서 내가 원하는 좌표로 이동시키고 L로 선을 이어주고
  Z로 현재좌표에서 시작좌표까지 이동하여 Vector Script를 완료시킨다

vector 정의

• res/drawable/test_ani_icon.xml

  <vector xmlns:android="http://schemas.android.com/apk/res/android"
  android:width="128dp"
  android:height="128dp"
  android:viewportWidth="60"
  android:viewportHeight="60" >
  <path
      android:name="test_icon"
      android:pathData="M 10,60, L 10,40, L 30,40, L30,60 Z"
      android:fillColor="@color/colorPrimary"
      >
  </path>
  </vector>

• vector 이미지 정의

• viewportWidth, Height는 화면에 그릴 도형의 캔버스 좌표 이다. 최대 60,60 이므로 pathData의 X, Y좌표는 60을 넘을 수 없다

animated-vector 정의

• res/drawable/test_animation.xml

  <animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
  android:drawable="@drawable/test_ani_icon"
  >
  <target
      android:name="test_icon"
      android:animation="@animator/test_ani"/>
      >
  </animated-vector>

• vector와 animation을 이어주는 역활

• target과 vector의 path의 name이 같아야 한다

ImageView 정의

<ImageView
    android:id="@+id/imageView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:srcCompat="@drawable/test_ani_icon"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

• vector image를 보여줄 ImageView 정의

Java코드

• MainActivity.java

  ImageView imageView = findViewById(R.id.imageView);
  AnimatedVectorDrawable vector = (AnimatedVectorDrawable)
        ContextCompat.getDrawable(this, R.drawable.test_animation);
  imageView.setImageDrawable(vector);
  vector.start();

• imageView에 animated-vector로 정의한 drawable을 setting

참고1 Understanding VectorDrawable pathData commands in Android
참고2 애니메이션으로 앱에 생동감 불어넣기
참고3 드로어블 그래픽 애니메이션화