Material Design Animated Vector Drawables | Vector Picture Animation

Look at the effect first.

Realization steps (for example, changing grief into smiling face)

1. Create vector resource files for vector elements under res/drawable/.

vector_smile.xml

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
        android:width="200dp"
        android:height="200dp"
        android:viewportHeight="100"
        android:viewportWidth="100">
    <path
        android:fillColor="@color/yello"
        android:pathData="M 50,50 m -48 ,0 a 48,48 0 1,0 96,0 a 48,48 0 1,0 -96,0"/>
    <path
        android:name="eye_left"
        android:pathData="M 28,40 Q 36,50 43,40"
        android:strokeColor="@color/colorBlack"
        android:strokeLineCap="round"
        android:strokeWidth="4"/>
    <path
        android:name="eye_right"
        android:pathData="M 58,40 Q 66,50 73,40"
        android:strokeColor="@color/colorBlack"
        android:strokeLineCap="round"
        android:strokeWidth="4"/>
    <path
        android:name="smile"
        android:pathData="M 30,75 Q 50,55 70,75"
        android:strokeColor="@color/colorBlack"
        android:strokeLineCap="round"
        android:strokeWidth="4"/>
</vector>

OK, the SVG picture of a smiling face is ready to be drawn. If you are not familiar with how to draw SVG picture, please read this blog to learn.

2. Create animation change paths for eyes and mouth under res/animator/

We need to add animations for each part of the change:

First is the left eye.

animator_eye_left.xml

<?xml version="1.0" encoding="utf-8"?>
<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
                android:duration="1000"
                android:interpolator="@android:anim/accelerate_interpolator"
                android:propertyName="pathData"
                android:valueFrom="M 28,40 Q 36,50 43,40"
                android:valueTo="M 28,40 Q 36,30 43,40"
                android:valueType="pathType"/>

Then the right eye.

animator_eye_right.xml

<?xml version="1.0" encoding="utf-8"?>
<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
                android:duration="1000"
                android:interpolator="@android:anim/accelerate_interpolator"
                android:propertyName="pathData"
                android:valueFrom="M 58,40 Q 66,50 73,40"
                android:valueTo="M 58,40 Q 66,30 73,40"
                android:valueType="pathType"/>

Finally, the mouth.

animator_mouth_smile.xml

<?xml version="1.0" encoding="utf-8"?>
<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
                android:duration="1000"
                android:interpolator="@android:anim/accelerate_interpolator"
                android:propertyName="pathData"
                android:valueFrom="M 30,75 Q 50,55 70,75"
                android:valueTo="M 30,65 Q 50,85 70,65"
                android:valueType="pathType"/>

ProperrtyName specifies the properties of the control
valueFrom and valueTo control the starting value of the animation

• Note: If the specified property of propertyName is pathData, name also needs to add an attribute valueType= "pathTpye" to tell the system to transform pathData.

Similar situations:

• rotation animation
• fillColor implements color animation valueType="colorType"
• PathData transforms shape and location to valueType="pathData"
• trimPathEnd and trimPathStart Carry out Trajectory Animation valueType="floatType"

3. Create animated-vector element vector resource animation under res/drawable/.

animated_smile.xml

<?xml version="1.0" encoding="utf-8"?>
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
                 android:drawable="@drawable/vector_smile">
    <target
        android:name="eye_left"
        android:animation="@animator/animator_eye_left"/>
    <target
        android:name="eye_right"
        android:animation="@animator/animator_eye_right"/>
    <target
        android:name="smile"
        android:animation="@animator/animator_mouth_smile"/>
</animated-vector>

• It is important to note that the name attribute of target must be consistent with the name attribute of vector, so that the system can find the elements to implement animation.

4. Once all the XML files are ready, you can control the SVG animation in your code.

First, the Animated Vector Drawable XML file (animated_smile.xml) is given to an ImageView to set the background.

      <ImageView
          android:id="@+id/image_smile"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:layout_centerInParent="true"
          android:src="@drawable/animated_smile"/>

In the code ((Animatable) imageView. getDrawable (). start ();

summary

• If the curve of change is realized by arc, it is impossible to realize the process of path change, so we need to use second-order Bessel.

• SVG animation can realize simple graphics transformation animation and trajectory animation. At present, animated-vector can not support controlling the execution time and sequence of each animator.

I download the full code point GitHub

Thank you

• The above are only the problems I have encountered in my study. If you have more opinions, please feel free to exchange them. issues
• Email: andriodguoy@gmail.com