Is there a way to automatically animate VectorDrawable by setting start and end vectors

Question

AnimatedVectorDrawable

I'm wondering if can create two vector drawables in Android, and animate it automatically from the first vector the second one.

Something like ViewTransiton and TransitionManager.go

Answer 1

You have a drawable vector (@drawable/vector.xml):

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:viewportWidth="170"
    android:viewportHeight="170"
    android:width="500dp"
    android:height="500dp">
    <path
        android:name="my_vector_path"
        android:fillColor="#FF000000"
        android:pathData="M85,40
                          c10,0 20,0 30,0
                          c0,-5 -10,-20 -30,-20
                          c-20,0 -30,15 -30,20
                          c10,0 20,0 30,0"
    />
</vector>

Create an animated vector (@drawable/animated_vector.xml):

<?xml version="1.0" encoding="utf-8"?>
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
                 android:drawable="@drawable/vector" >
    <target
        android:name="my_vector_path"
        android:animation="@anim/vector_animation"
    />
</animated-vector>

Create an animation (@anim/vector_animation.xml):

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <objectAnimator
        android:duration="2000"
        android:propertyName="pathData"
        android:valueType="pathType"
        android:valueFrom="M85,40
                           c10,0 20,0 30,0
                           c0,-5 -10,-20 -30,-20
                           c-20,0 -30,15 -30,20
                           c10,0 20,0 30,0"
        android:valueTo="M108,35
                         c5.587379,-6.7633 9.348007,-16.178439 8.322067,-25.546439
                         c-8.053787,0.32369 -17.792625,5.36682 -23.569427,12.126399
                         c-5.177124,5.985922 -9.711121,15.566772 -8.48777,24.749359
                         c8.976891,0.69453 18.147476,-4.561718 23.73513,-11.329308"/>
</set>

The animation contains the from and to values of the vector path.

Finally, in code, start the animation:

ImageView imageView = (ImageView) findViewById(R.id.image_view);
AnimatedVectorDrawable animatedVectorDrawable =
        (AnimatedVectorDrawable) getDrawable(R.drawable.animated_vector);
imageView.setImageDrawable(animatedVectorDrawable);
animatedVectorDrawable.start();