Android Material Design动画 Animated Vector Drawables|矢量图片动画

本文详细介绍如何使用AnimatedVectorDrawable创建MaterialDesign风格的矢量动画，包括绘制SVG图片、定义动画路径及组合动画等关键步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Material Design动画 Animated Vector Drawables|矢量图片动画

AnimatedVectorDrawable类可以去创建一个矢量资源的动画

先看效果图

这里写图片描述

Animated Vector Drawables实现动画主要分三个步骤：

- 1.画出SVG图片
- 2.画出动画变化路径/条件
- 3.通过animated-vector将图片和动画连接起来

实现步骤(以实现悲伤变笑脸为例)

1.在res/drawable/下创建vector元素的矢量资源文件

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,一个笑脸的SVG图片就画好了，如果还不熟悉如何画SVG图片，请看这篇博客学习SVG 矢量图

2.在res/animator/下为眼睛和嘴创建动画变化路径

我们需要为每个变化的部分添加动画：

首先是左眼

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"/>

然后是右眼

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"/>

最后是嘴部

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"/>

propertyName指定控制的属性
valueFrom和valueTo控制动画的起始值

注意：propertyName的指定属性如果为pathData，name还需要添加一个属性valueType=”pathTpye”来告诉系统进行pathData变换

类似的情况：

fillAlpha 进行透明动画 valueType=”floatType”
translateXY 进行位移动画需要group包裹即可
scaleXY 进行缩放动画需要group 指定pivotXY
rotation 进行旋转动画需要group包裹并指定pivotXY
fillColor实现颜色动画 valueType=”colorType”
pathData进行形状、位置的变换 valueType=”pathData”
trimPathEnd与trimPathStart进行轨迹动画 valueType=”floatType”

3.在res/drawable/下创建animated-vector元素的矢量资源动画

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>

这里需要注意的是target的name属性,必须与vector中需要作用的name属性保持一致，这样系统才能找到要实现动画的元素

4.所有的XML文件都准备好了以后，就可以在代码中控制SVG动画了

先将AnimatedVectorDrawable XML 文件（animated_smile.xml）给一个ImageView设置背景

      <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"/>

在代码中 ((Animatable) imageView.getDrawable()).start();