CODEWITHSUNDEEP
androidandroid-studioanimationvectorandroid-vectordrawable
David Antoon
David Antoon

Reputation: 825

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

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

Upvotes: 7

Views: 5002

Answers (1)

Léo Natan
Léo Natan

Reputation: 57060

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();

Upvotes: 8

Related Questions