Android动画<第十一篇>：矢量图动画

在完成矢量图动画之前，必须了解矢量图在Android中的代码表示。Android Studio也可以制作自带的矢量图，或者导入svg格式的图片生成矢量图的代码。

我在Android Studio神器之Vector Asset这篇文章上已经做了简单的介绍。其中最为关键之处就是看懂矢量图的代码了。

（1）使用Vector Asset工具随意生成一个矢量图代码

矢量图的代码如下：

<vector android:height="24dp" android:tint="#FF3950"
    android:viewportHeight="24.0" android:viewportWidth="24.0"
    android:width="24dp" xmlns:android="http://schemas.android.com/apk/res/android">
    <path android:fillColor="#FF000000" android:pathData="M12,6v3l4,-4 -4,-4v3c-4.42,0 -8,3.58 -8,8 0,1.57 0.46,3.03 1.24,4.26L6.7,14.8c-0.45,-0.83 -0.7,-1.79 -0.7,-2.8 0,-3.31 2.69,-6 6,-6zM18.76,7.74L17.3,9.2c0.44,0.84 0.7,1.79 0.7,2.8 0,3.31 -2.69,6 -6,6v-3l-4,4 4,4v-3c4.42,0 8,-3.58 8,-8 0,-1.57 -0.46,-3.03 -1.24,-4.26z"/>
</vector>

图像如下：

图片.png

以上是使用Vector Asset工具生成的矢量图和矢量图代码。

android:width：表示是矢量图的宽度；
android:height：表示矢量图的高度；
android:viewportWidth：表示将矢量图的宽分成N等分，这里是分成24等分；
android:viewportHeight：表示将矢量图的高分成N等分，这里是分成24等分；
<path/>：表示一个路径
android:pathData：表示路径上的数据

<path> 可用的命令如下：

名称 解释
M = moveto(M X,Y) 将画笔移动到指定的坐标位置
L = lineto(L X,Y) 画直线到指定的坐标位置
H = horizontal lineto(H X) 画水平线到指定的X坐标位置
V = vertical lineto(V Y) 画垂直线到指定的Y坐标位置
C = curveto(C X1,Y1,X2,Y2,ENDX,ENDY) 三次贝赛曲线
S = smooth curveto(S X2,Y2,ENDX,ENDY) 同样三次贝塞尔曲线，更平滑
Q = quadratic Belzier curve(Q X,Y,ENDX,ENDY) 二次贝赛曲线
T = smooth quadratic Belzier curveto(T ENDX,ENDY) 同样二次贝塞尔曲线，更平滑
A = elliptical Arc(A RX,RY,XROTATION,large-arc-flag,sweep-flag,X,Y) 弧线
Z = closepath() 关闭路径

以上所有命令均允许小写字母。大写的字母是基于原点的坐标系(偏移量)，即绝对位置；小写字母是基于当前点坐标系(偏移量)，即相对位置。

（2）自己绘制一个矢量图

按照上面说到的path命令，我们完全可以自己绘制一个简单的矢量图

<vector
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportHeight="24"
    android:viewportWidth="24">

    <path
        android:strokeWidth="1"
        android:fillColor="#ffffff"
        android:pathData="M10,10 L20,10 z"
        android:strokeColor="#FFFF00" />

</vector>

这是一条直线，如图：

图片.png

然而，更加复杂的矢量图绘制难度很大。

我们完全可以利用绘图工具制作一个SVG图片，然后使用AS生成代码，也可以使用AS自带的Vector Asset工具制作SVG图片。

然后，复杂的SVG生成的代码必然也是更加的复杂，这样就必须加深SVG的了解了。

（3）必须了解的API：VectorDrawable

VectorDrawable 一般是以 <vector> 为根标签定义的 XML 文件，<vector>标签下还可以有三种标签，分别是：<group>、<clip-path>、<path>，下面分别贴出这几种标签对应的属性。

<vector> 定义这个矢量图
android:name 矢量图的名字
android:width 矢量图的内部(intrinsic)宽度,支持所有Android系统支持的尺寸，通常使用dp
android:height 矢量图的内部(intrinsic)高度
android:viewportWidth 矢量图视图的宽度，视图就是矢量图path路径数据所绘制的虚拟画布
android:viewportHeight 矢量图视图的高度
android:tint 矢量图的tint颜色。默认是没有tint颜色的
android:tintMode 矢量图tint颜色的Porter-Duff混合模式，默认值为src_in。(src_in,src_over,src_atop,add,screen,multiply)
android:autoMirrored 设置当系统为RTL(right-to-left)布局的时候，是否自动镜像该图片。比如阿拉伯语
android:alpha 该图片的透明度属性
<group> 设置路径做动画的关键属性的
android:name 定义group的名字
android:rotation 定义该group的路径旋转多少度
android:pivotX 定义缩放和旋转该group时候的X参考点。该值相对于vector的viewport值来指定的。
android:pivotY 定义缩放和旋转该 group 时候的Y参考点。该值相对于vector的viewport值来指定的。
android:scaleX 定义X轴的缩放倍数
android:scaleY 定义Y轴的缩放倍数
android:translateX 定义移动X轴的位移。相对于vector的viewport值来指定的。
android:translateY 定义移动Y轴的位移。相对于vector的viewport值来指定的
<path> 路径
android:name 定义该path的名字，这样在其他地方可以通过名字来引用这个路径
android:pathData 和SVG中d元素一样的路径信息。
android:fillColor 定义填充路径的颜色，如果没有定义则不填充路径
android:strokeColor 定义如何绘制路径边框，如果没有定义则不显示边框
android:strokeWidth 定义路径边框的粗细尺寸
android:strokeAlpha 定义路径边框的透明度
android:fillAlpha 定义填充路径颜色的透明度
android:trimPathStart 从路径起始位置截断路径的比率，取值范围从0到1；注意从一半到起始动画为from-0.5-to-0
android:trimPathEnd 从路径结束位置截断路径的比率，取值范围从0到1；注意从一半到结束动画为from-0.5-to-1.0
android:trimPathOffset 设置路径截取的范围，取值范围从0到1
android:strokeLineCap 设置路径线帽的形状，取值为 butt, round, square.
android:strokeLineJoin 设置路径交界处的连接方式，取值为 miter,round,bevel.
android:strokeMiterLimit 设置斜角的上限
<clip-path> 定义当前绘制的剪切路径。注意，clip-path 只对当前的 group 和子 group 有效
android:name 定义clip-path的名字
android:pathData android:pathData的取值一样。

查看以上标签属性，我们发现<group>标签其实是为动画存在的，它本身对矢量图的绘制关系不大，而这个动画叫做矢量图动画。

那么，这个动画到底怎么实现呢？这里还需要了解一个接口：AnimatedVectorDrawable

（4）必须了解的API：AnimatedVectorDrawable

一般情况，表示一张矢量图不需要group标签，但是如果涉及到动画的话，可能就需要将一个或者多个路径进行分组。

AnimatedVectorDrawable通过ObjectAnimator或AnimatorSet对VectorDrawable的某个属性作一个矢量资源的动画。

AnimatedVectorDrawable就是矢量图动画，完成矢量图动画的要素有三，如下：

  • 一张矢量图，即以vector为标签的xml文件
  • 一个动画，objectAnimator或者AnimatorSet
  • AnimatedVectorDrawable，即以animated-vector为标签的xml文件
【举例】 实现左右箭头移动
41.gif

[第一步] 选择并自动生成一张矢量图

图片.png

生成的矢量图代码如下：

<vector
    android:height="24dp"
    android:tint="#3A2DFF"
    android:viewportHeight="24.0"
    android:viewportWidth="24.0"
    android:width="24dp"
    xmlns:android="http://schemas.android.com/apk/res/android">
    <path android:fillColor="#FF000000" android:pathData="M6.99,11L3,15l3.99,4v-3H14v-2H6.99v-3zM21,9l-3.99,-4v3H10v2h7.01v3L21,9z"/>
</vector>

[第二步] 拆分矢量图的两个箭头

矢量图的路径一般以Z（z）为结尾，根据这个特性，将矢量图拆分，拆分后的代码如下：

<vector
    android:height="240dp"
    android:tint="#3A2DFF"
    android:viewportHeight="24.0"
    android:viewportWidth="24.0"
    android:width="240dp"
    xmlns:android="http://schemas.android.com/apk/res/android">
    <group android:name="left">
        <path android:fillColor="#FF000000" android:pathData="M6.99,11L3,15l3.99,4v-3H14v-2H6.99v-3z"/>
    </group>
    <group android:name="right">
        <path android:fillColor="#FF000000" android:pathData="M21,9l-3.99,-4v3H10v2h7.01v3L21,9z"/>
    </group>
</vector>

[第三步] 准备好左右移动的动画

anim_left.xml

<?xml version="1.0" encoding="utf-8"?>
<objectAnimator
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="1000"
    android:repeatCount="infinite"
    android:propertyName="translateX"
    android:repeatMode="reverse"
    android:valueFrom="0"
    android:valueTo="-10">
</objectAnimator>

anim_right.xml

<?xml version="1.0" encoding="utf-8"?>
<objectAnimator
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="1000"
    android:repeatCount="infinite"
    android:propertyName="translateX"
    android:repeatMode="reverse"
    android:valueFrom="0"
    android:valueTo="10">
</objectAnimator>

[第四步] animated-vector编写

<?xml version="1.0" encoding="utf-8"?>
<animated-vector
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/ic_swap_horiz_black_24dp">
    <target
        android:animation="@animator/anim_left"
        android:name="left">
    </target>
    <target
        android:animation="@animator/anim_right"
        android:name="right">
    </target>
</animated-vector>

其中，ic_swap_horiz_black_24dp为矢量图，animation为某动画，name和矢量图group标签的name对应。

[第五步] 设置src

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

这里需要注意的是，如果设置background动画是无效的，需要设置src才有动画效果。

[第六步] 在代码中执行动画

        case R.id.button:
            Drawable drawable = ((ImageView)findViewById(R.id.imageview)).getDrawable();
            if (drawable instanceof Animatable){
                ((Animatable)drawable).start();
            }
            break;

但是，我们发现，完成一个矢量图动画需要建立多个xml文件，为了解决这个问题，可以将矢量图所用到的xml合并。

合并之后的xml如下：

<?xml version="1.0" encoding="utf-8"?>
<animated-vector
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:aapt="http://schemas.android.com/aapt">

    <aapt:attr name="android:drawable">

        <vector
            android:height="240dp"
            android:tint="#3A2DFF"
            android:viewportHeight="24.0"
            android:viewportWidth="24.0"
            android:width="240dp"
            xmlns:android="http://schemas.android.com/apk/res/android">
            <group android:name="left">
                <path android:fillColor="#FF000000" android:pathData="M6.99,11L3,15l3.99,4v-3H14v-2H6.99v-3z"/>
            </group>
            <group android:name="right">
                <path android:fillColor="#FF000000" android:pathData="M21,9l-3.99,-4v3H10v2h7.01v3L21,9z"/>
            </group>
        </vector>

    </aapt:attr>

    <target
        android:name="left">
        <aapt:attr name="android:animation">
            <objectAnimator
                xmlns:android="http://schemas.android.com/apk/res/android"
                android:duration="1000"
                android:repeatCount="infinite"
                android:propertyName="translateX"
                android:repeatMode="reverse"
                android:valueFrom="0"
                android:valueTo="-10">
            </objectAnimator>
        </aapt:attr>
    </target>
    <target
        android:name="right">

        <aapt:attr name="android:animation">
            <objectAnimator
                xmlns:android="http://schemas.android.com/apk/res/android"
                android:duration="1000"
                android:repeatCount="infinite"
                android:propertyName="translateX"
                android:repeatMode="reverse"
                android:valueFrom="0"
                android:valueTo="10">
            </objectAnimator>
        </aapt:attr>

    </target>
</animated-vector>

使用时，只要直接设置src并且执行动画即可。

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



    Drawable drawable = ((ImageView)findViewById(R.id.imageview)).getDrawable();
    if (drawable instanceof Animatable){
        ((Animatable)drawable).start();
    }
（5）Shape Shifter工具的基本使用

[第一步] 打开网页在线编辑

https://shapeshifter.design/

图片.png

[第二步] 文件导入

图片.png

在本地选择一个SVG格式的矢量图或者Vector Drawble，如下：

导入之后的图片如下：

图片.png

[第三步] 查看文件

图片.png

点击图中的path，可以查看路径代码

图片.png

我们可以对这个路径进行修改，比如修改颜色

图片.png

再看，图中的网状线条，其实就是给矢量图分成了24等份方便坐标表示，这里的pathData就是根据坐标绘制轨迹的。

[第四步] 设置动画时长

图片.png

默认时长为300ms，点击修改动画时长为1秒。

图片.png

[第五步] 考虑好自己想要完成的动画，比如让整个图片进行旋转

结合group标签的知识，group标签的功能有：设置锚点、旋转、缩放、平移。

所以这里的旋转动画可以使用group标签来完成。

[第六步] 添加group标签，并将path添加到group标签中

图片.png

点击图中的“+”，添加一个group图层

图片.png

并将path拖入group中

图片.png

[第七步] 为group添加旋转动画

图片.png

如图，修改group的初始值，将锚点调整到图片中央（图片分成了24等份）

图片.png

点击右上角的“闹钟”图标，添加“rotation”字段

图片.png

在时间线区域不自动生成一个绿色时间线，正好与字段“rotation”字段平行，选中绿色时间线，绿色时间线变为蓝色时间线，在屏幕右上角出现该时间线的属性：

图片.png

startTime:开始时间
endTime：结束时间
interpolator：动画插值器
fromValue：动画的初始旋转角度
toValue：动画的结束旋转角度

图片.png

将动画时间改为1000ms，任意选择动画插值器，将动画角度变化范围调整为0~360度。

[第八步] 播放动画

197.gif

[第九步] 导出矢量图动画文件

图片.png

最后，直接导出文件即可，点击Export-->Animated Vector Drawable。

生成的代码如下：

<animated-vector
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:aapt="http://schemas.android.com/aapt">
    <aapt:attr name="android:drawable">
        <vector
            android:name="vector"
            android:width="240dp"
            android:height="240dp"
            android:viewportWidth="24"
            android:viewportHeight="24">
            <group
                android:name="group"
                android:pivotX="12"
                android:pivotY="12">
                <path
                    android:name="path"
                    android:pathData="M 12 6 L 12 9 L 16 5 L 12 1 L 12 4 C 7.58 4 4 7.58 4 12 C 4 13.57 4.46 15.03 5.24 16.26 L 6.7 14.8 C 6.25 13.97 6 13.01 6 12 C 6 8.69 8.69 6 12 6 Z M 18.76 7.74 L 17.3 9.2 C 17.74 10.04 18 10.99 18 12 C 18 15.31 15.31 18 12 18 L 12 15 L 8 19 L 12 23 L 12 20 C 16.42 20 20 16.42 20 12 C 20 10.43 19.54 8.97 18.76 7.74 Z"
                    android:fillColor="#ff0000"/>
            </group>
        </vector>
    </aapt:attr>
    <target android:name="group">
        <aapt:attr name="android:animation">
            <objectAnimator
                android:propertyName="rotation"
                android:duration="1000"
                android:valueFrom="0"
                android:valueTo="360"
                android:valueType="floatType"
                android:interpolator="@android:interpolator/fast_out_slow_in"/>
        </aapt:attr>
    </target>
</animated-vector>

设置这个矢量图动画

<ImageView
    android:id="@+id/imageview"
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:layout_centerInParent="true"
    android:src="@drawable/yuan_anim"/>

最后再代码中播放动画

    Drawable drawable = ((ImageView)findViewById(R.id.imageview)).getDrawable();
    if (drawable instanceof Animatable){
        ((Animatable)drawable).start();
    }

演示效果如下：

198.gif
（6）Shape Shifter工具的Group属性

group标签除了旋转动画之外以，还有pivotX、pivotY、scaleX、scaleY、translateX、translateY等属性可以设置动态变化。

下面来一一举例：

[pivotX]和[pivotY]：设置锚点

上面图形的旋转动画的锚点的取值是（12,12），这个值从动画开始到动画结束没有发生变化，下面将锚点也随着时间动画变化呢？

图片.png
199.gif

[scaleX]和[scaleY]：动态缩放

图片.png
200.gif

[translateX]和[translateY]：动态平移

【略】

（7）Shape Shifter工具的Path属性

可被设置动画的字段有，pathData、fillColor、fillAlpha、strokeColor、strokeAlpha、strokeWidth、trimPathStart、trimPathEnd、trimPathOffset。

pathData： 和SVG中d元素一样的路径信息，可以将路径设置为动画开始和结束的取值；

【略】

fillColor： 定义填充路径的颜色，如果没有定义则不填充路径

201.gif

fillAlpha： 定义填充路径颜色的透明度

202.gif

strokeColor： 定义如何绘制路径边框，如果没有定义则不显示边框

203.gif

strokeAlpha： 定义路径边框的透明度

【略】

strokeWidth： 定义路径边框的粗细尺寸

【略】

trimPathStart： 从路径起始位置截断路径的比率，取值范围从0到1；

204.gif

这里需要注意的是，截断的是路径，而非填充色，上图的路径加上了边框，这个边框就是轨迹。

trimPathEnd： 从路径结束位置截断路径的比率，取值范围从0到1；

205.gif

这里需要注意的是，截断的是路径，而非填充色，上图的路径加上了边框，这个边框就是轨迹。

trimPathOffset： 设置起点路径和终点路径偏移量的范围，取值范围从0到1

206.gif

这里需要注意的是，截断的是路径，而非填充色，上图的路径加上了边框，这个边框就是轨迹。

（8）Shape Shifter工具自带Demo解析

[Demo：Play to Pause]

207.gif
图片.png

如图所示，完成这个动画需要两个字段的动画：rotation、pathData

图片.png

旋转动画的字段在group标签上，取值范围是0~90度。

图片.png

路径动画的字段在path标签上，去世范围是：从M 8 5 L 8 12 L 19 12 L 19 12 L 8 5 M 8 12 L 8 19 L 19 12 L 19 12 L 8 12到M 5 6 L 5 10 L 19 10 L 19 6 L 5 6 M 5 14 L 5 18 L 19 18 L 19 14 L 5 14。

在右上角有一个编辑按钮，点击进入编辑界面

图片.png

编辑界面顶部有几个按钮：
加号按钮的作用是添加一个点；
剪刀按钮的作用是画一条直线分割一个路径，使路径一分为二；
双向箭头按钮的作用是匹配动画前后的路径；
双向箭头后面的按钮的作用是将选中的路径上的点反转，动画前后的点必须一一对应，路径上的点反转之后动画也会发生改变；
左箭头按钮的作用是将路径的点依次向上移动一个单位；
右箭头按钮的作用是将路径的点依次向下移动一个单位；

总之，为了将两个毫不相关的路径完成动画效果，必须将两个路径紧密的联系在一起，这个编辑界面可以将两个毫不相关的路径紧密的联系在一起，最终完成动画。

代码如下：

<animated-vector
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:aapt="http://schemas.android.com/aapt">
    <aapt:attr name="android:drawable">
        <vector
            android:name="playtopause"
            android:width="24dp"
            android:height="24dp"
            android:viewportWidth="24"
            android:viewportHeight="24">
            <group
                android:name="group"
                android:pivotX="12"
                android:pivotY="12">
                <path
                    android:name="path"
                    android:pathData="M 8 5 L 8 19 L 19 12 Z"
                    android:fillColor="#000000"
                    android:strokeWidth="1"/>
            </group>
        </vector>
    </aapt:attr>
    <target android:name="path">
        <aapt:attr name="android:animation">
            <objectAnimator
                android:propertyName="pathData"
                android:duration="300"
                android:valueFrom="M 8 12 L 8 19 L 19 12 L 19 12 L 8 12 M 8 5 L 8 12 L 19 12 L 19 12 L 8 5"
                android:valueTo="M 5 6 L 5 10 L 19 10 L 19 6 L 5 6 M 5 14 L 5 18 L 19 18 L 19 14 L 5 14"
                android:valueType="pathType"
                android:interpolator="@android:interpolator/fast_out_slow_in"/>
        </aapt:attr>
    </target>
    <target android:name="group">
        <aapt:attr name="android:animation">
            <objectAnimator
                android:propertyName="rotation"
                android:duration="300"
                android:valueFrom="0"
                android:valueTo="90"
                android:valueType="floatType"
                android:interpolator="@android:interpolator/fast_out_slow_in"/>
        </aapt:attr>
    </target>
</animated-vector>

接下来的几个Demo将直接贴出动画效果和代码。

[Demo：Search to Close]

动画效果如下：

208.gif

代码如下：

<animated-vector
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:aapt="http://schemas.android.com/aapt">
    <aapt:attr name="android:drawable">
        <vector
            android:name="searchtoclose"
            android:width="24dp"
            android:height="24dp"
            android:viewportWidth="24"
            android:viewportHeight="24">
            <group android:name="oval_container">
                <path
                    android:name="oval"
                    android:pathData="M 13.389 13.389 C 15.537 11.241 15.537 7.759 13.389 5.611 C 11.241 3.463 7.759 3.463 5.611 5.611 C 3.463 7.759 3.463 11.241 5.611 13.389 C 7.759 15.537 11.241 15.537 13.389 13.389 Z"
                    android:strokeColor="#000000"
                    android:strokeWidth="1.8"/>
            </group>
            <path
                android:name="ne_stem"
                android:pathData="M 18 6 L 6 18"
                android:strokeColor="#000000"
                android:strokeWidth="1.8"
                android:trimPathStart="1"/>
            <path
                android:name="nw_stem"
                android:pathData="M 6 6 L 20 20"
                android:strokeColor="#000000"
                android:strokeWidth="1.8"
                android:trimPathStart="0.48"/>
        </vector>
    </aapt:attr>
    <target android:name="nw_stem">
        <aapt:attr name="android:animation">
            <set>
                <objectAnimator
                    android:propertyName="trimPathStart"
                    android:startOffset="300"
                    android:duration="500"
                    android:valueFrom="0.48"
                    android:valueTo="0"
                    android:valueType="floatType"
                    android:interpolator="@android:interpolator/fast_out_slow_in"/>
                <objectAnimator
                    android:propertyName="trimPathEnd"
                    android:startOffset="300"
                    android:duration="500"
                    android:valueFrom="1"
                    android:valueTo="0.86"
                    android:valueType="floatType"
                    android:interpolator="@android:interpolator/fast_out_slow_in"/>
            </set>
        </aapt:attr>
    </target>
    <target android:name="ne_stem">
        <aapt:attr name="android:animation">
            <objectAnimator
                android:propertyName="trimPathStart"
                android:startOffset="522"
                android:duration="314"
                android:valueFrom="1"
                android:valueTo="0"
                android:valueType="floatType"
                android:interpolator="@android:interpolator/fast_out_slow_in"/>
        </aapt:attr>
    </target>
    <target android:name="oval">
        <aapt:attr name="android:animation">
            <objectAnimator
                android:propertyName="trimPathStart"
                android:startOffset="134"
                android:duration="416"
                android:valueFrom="0"
                android:valueTo="1"
                android:valueType="floatType"
                android:interpolator="@android:anim/accelerate_decelerate_interpolator"/>
        </aapt:attr>
    </target>
    <target android:name="oval_container">
        <aapt:attr name="android:animation">
            <set>
                <objectAnimator
                    android:propertyName="translateX"
                    android:startOffset="300"
                    android:duration="500"
                    android:valueFrom="0"
                    android:valueTo="-6.7"
                    android:valueType="floatType"
                    android:interpolator="@android:interpolator/fast_out_slow_in"/>
                <objectAnimator
                    android:propertyName="translateY"
                    android:startOffset="300"
                    android:duration="500"
                    android:valueFrom="0"
                    android:valueTo="-6.7"
                    android:valueType="floatType"
                    android:interpolator="@android:interpolator/fast_out_slow_in"/>
            </set>
        </aapt:attr>
    </target>
</animated-vector>

[Demo：Morphing animals]

动画效果如下：

209.gif

代码如下：

<animated-vector
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:aapt="http://schemas.android.com/aapt">
    <aapt:attr name="android:drawable">
        <vector
            android:name="morphinganimals"
            android:width="409dp"
            android:height="280dp"
            android:viewportWidth="409"
            android:viewportHeight="280">
            <path
                android:name="path"
                android:pathData="M 26.705 118.377 C 28.575 93.291 37.705 71.203 54.087 52.095 C 72.551 30.519 95.691 19.735 123.487 19.735 C 134.06 19.735 149.767 21.407 170.623 24.712 C 191.48 28.049 207.181 29.682 217.765 29.682 C 225.855 29.682 235.734 31.192 247.403 34.208 C 259.072 37.224 272.531 41.744 287.779 47.764 C 293.181 49.818 299.709 55.439 307.376 64.554 C 311.733 69.94 318.476 78.054 327.6 88.844 C 329.675 90.304 332.38 92.474 335.704 95.396 C 339.022 98.28 341.299 99.536 342.531 99.122 C 342.951 97.866 343.999 96.117 345.658 93.84 C 346.488 93.004 346.998 92.59 347.202 92.59 C 347.842 93.004 348.452 93.42 349.078 93.84 C 349.698 94.26 349.901 95.492 349.698 97.566 C 349.276 101.304 349.078 102.44 349.078 100.979 C 348.855 103.063 348.562 104.399 348.141 105.041 C 345.441 109.596 344.395 113.131 345.033 115.606 C 345.658 117.876 347.603 121.526 350.933 126.503 C 354.258 131.48 356.115 135.218 356.529 137.706 C 356.324 139.57 356.234 142.568 356.234 146.728 C 355.194 149.318 354.154 151.908 353.114 154.498 C 353.114 160.31 359.852 170.281 373.339 184.394 C 379.783 187.278 382.979 197.25 382.979 214.246 C 382.979 227.541 371.993 234.163 350.014 234.163 C 347.104 234.163 343.998 234.073 340.674 233.843 C 338.397 233.027 335.074 232.096 330.721 231.063 C 325.541 230.423 322.007 228.676 320.151 225.753 C 316.821 221.008 311.421 216.528 303.958 212.383 C 302.712 211.783 300.894 209.499 298.508 205.543 C 296.116 201.6 293.991 199.113 292.134 198.065 C 290.278 197.043 287.574 196.825 284.038 197.465 C 278.022 198.485 274.698 199.008 274.085 199.008 C 272.625 199.008 270.5 198.6 267.705 197.758 C 264.899 196.928 262.889 196.508 261.632 196.508 C 260.19 203.155 259.865 209.586 260.702 215.8 C 260.905 217.472 261.952 218.824 263.815 219.845 C 266.73 221.925 268.275 223.061 268.492 223.29 C 270.348 224.732 272.326 227.118 274.392 230.423 C 274.814 231.686 274.036 233.805 272.058 236.803 C 270.085 239.815 268.491 241.588 267.233 242.086 C 265.996 242.623 263.297 242.891 259.143 242.891 C 253.121 242.891 250.748 242.981 251.998 243.184 C 243.704 241.934 239.034 241.219 237.988 241.028 C 232.806 239.982 228.34 238.335 224.614 236.038 C 222.734 234.801 220.577 228.983 218.089 218.608 C 217.81 217.363 217.536 216.174 217.267 215.039 C 216.999 213.904 216.736 212.825 216.478 211.801 C 216.22 210.776 215.968 209.807 215.721 208.893 C 214.98 206.15 214.288 203.902 213.643 202.149 C 212.998 200.396 212.4 199.137 211.849 198.371 C 211.441 197.759 210.924 197.466 210.305 197.466 C 209.26 197.466 207.545 198.486 205.165 200.579 C 202.778 202.622 201.165 203.757 200.347 203.999 C 197.451 216.224 195.977 222.029 195.977 221.392 C 195.977 226.177 197.323 230.195 200.022 233.526 C 202.715 236.843 205.529 240.059 208.438 243.159 C 211.958 247.102 213.72 250.522 213.72 253.431 C 213.72 255.077 213.21 256.519 212.163 257.781 C 207.806 263.167 200.539 265.871 190.376 265.871 C 178.963 265.871 171.499 264.315 167.983 261.201 C 163.409 257.259 160.506 253.101 159.268 248.774 C 159.064 247.727 158.548 244.614 157.711 239.434 C 157.296 236.308 156.359 234.458 154.923 233.844 C 152.84 233.532 150.504 233.092 147.912 232.522 C 145.32 231.953 142.473 231.254 139.369 230.424 C 138.112 229.596 136.766 227.516 135.311 224.199 C 132.626 217.779 130.647 213.417 129.397 211.133 C 123.164 208.019 113.212 204.51 99.514 200.58 C 99.306 200.997 99.134 201.467 98.998 201.995 C 98.862 202.522 98.762 203.105 98.695 203.747 C 98.629 204.389 98.596 205.089 98.596 205.85 C 100.872 208.76 104.292 213.226 108.86 219.223 C 112.59 224.2 114.46 228.985 114.46 233.539 C 114.46 242.269 108.86 246.605 97.656 246.605 C 94.821 246.605 92.286 246.538 90.051 246.403 C 87.815 246.268 85.879 246.064 84.242 245.79 C 82.604 245.515 81.266 245.17 80.226 244.753 C 75.671 242.891 71.83 238.513 68.716 231.687 C 63.53 220.254 60.626 213.824 60.002 212.382 C 58.34 208.547 56.939 204.939 55.801 201.563 C 54.662 198.187 53.784 195.042 53.169 192.132 C 53.049 191.541 52.92 190.905 52.783 190.225 C 52.646 189.544 52.5 188.818 52.347 188.047 C 52.193 187.277 52.031 186.461 51.861 185.601 C 51.691 184.741 51.513 183.836 51.326 182.887 C 51.139 181.937 50.944 180.943 50.741 179.905 C 50.538 178.867 50.326 177.784 50.107 176.658 C 49.887 175.531 49.659 174.36 49.423 173.145 C 48.94 170.802 48.365 168.628 47.697 166.624 C 47.03 164.621 46.27 162.789 45.418 161.128 C 44.566 159.468 43.621 157.98 42.583 156.665 C 31.163 141.92 25.869 129.155 26.703 118.372 C 26.704 118.374 26.704 118.375 26.705 118.377"
                android:fillColor="#78909c"
                android:strokeWidth="1"/>
        </vector>
    </aapt:attr>
    <target android:name="path">
        <aapt:attr name="android:animation">
            <set>
                <objectAnimator
                    android:propertyName="pathData"
                    android:duration="300"
                    android:valueFrom="M 217.765 29.683 C 225.855 29.683 235.734 31.193 247.403 34.209 C 259.072 37.224 272.53 41.744 287.779 47.764 C 293.183 49.818 299.71 55.439 307.378 64.555 C 311.735 69.94 318.479 78.055 327.602 88.844 C 329.676 90.305 332.381 92.475 335.705 95.396 C 339.023 98.28 341.3 99.537 342.532 99.122 C 342.952 97.866 343.999 96.117 345.658 93.84 C 346.487 93.004 346.998 92.589 347.202 92.589 C 347.84 93.004 348.452 93.419 349.077 93.84 C 349.696 94.261 349.9 95.492 349.696 97.566 C 349.275 101.304 349.077 102.44 349.077 100.979 C 348.854 103.065 348.561 104.399 348.14 105.043 C 345.441 109.599 344.395 113.133 345.033 115.608 C 345.658 117.879 347.603 121.528 350.934 126.505 C 354.258 131.482 356.115 135.22 356.529 137.708 C 356.325 139.572 356.235 142.57 356.235 146.73 C 355.975 147.377 355.715 148.025 355.455 148.672 C 355.195 149.32 354.935 149.968 354.675 150.615 C 354.416 151.263 354.156 151.91 353.896 152.558 C 353.636 153.205 353.376 153.852 353.116 154.5 C 353.116 155.953 353.537 157.666 354.379 159.639 C 355.222 161.612 356.485 163.844 358.17 166.336 C 361.541 171.32 366.596 177.34 373.34 184.397 C 379.784 187.281 382.981 197.253 382.981 214.249 C 382.981 227.545 371.994 234.167 350.015 234.167 C 347.106 234.167 343.999 234.078 340.675 233.848 C 338.398 233.031 335.074 232.1 330.722 231.066 C 325.542 230.428 322.008 228.68 320.151 225.758 C 316.821 221.012 311.423 216.532 303.959 212.386 C 302.714 211.786 300.896 209.503 298.51 205.547 C 296.118 201.604 293.993 199.116 292.136 198.069 C 290.28 197.048 287.575 196.831 284.04 197.47 C 278.024 198.49 274.7 199.014 274.087 199.014 C 272.627 199.014 270.502 198.605 267.707 197.763 C 266.304 197.348 265.1 197.035 264.09 196.826 C 263.079 196.617 262.263 196.512 261.634 196.512 C 260.191 203.16 259.866 209.591 260.703 215.805 C 260.906 217.477 261.953 218.829 263.816 219.85 C 266.731 221.93 268.276 223.066 268.493 223.296 C 270.349 224.737 272.327 227.123 274.394 230.428 C 274.815 231.691 274.037 233.81 272.059 236.808 C 270.087 239.82 268.493 241.593 267.235 242.091 C 265.997 242.627 263.298 242.895 259.145 242.895 C 253.122 242.895 250.749 242.984 251.999 243.188 C 243.706 241.938 239.036 241.223 237.989 241.032 C 232.808 239.986 228.342 238.339 224.616 236.043 C 222.734 234.805 220.578 228.987 218.09 218.613 C 217.252 214.878 216.463 211.64 215.722 208.897 C 214.981 206.154 214.289 203.906 213.644 202.153 C 212.999 200.4 212.401 199.141 211.85 198.375 C 211.442 197.763 210.925 197.47 210.306 197.47 C 209.26 197.47 207.544 198.491 205.164 200.583 C 202.778 202.625 201.164 203.76 200.347 204.003 C 197.451 216.227 195.977 222.032 195.977 221.395 C 195.977 226.18 197.323 230.199 200.022 233.529 C 202.715 236.847 205.529 240.063 208.438 243.163 C 211.959 247.106 213.72 250.526 213.72 253.435 C 213.72 255.081 213.21 256.523 212.163 257.786 C 207.806 263.171 200.539 265.876 190.376 265.876 C 178.962 265.876 171.498 264.319 167.982 261.206 C 163.408 257.263 160.505 253.104 159.267 248.778 C 159.063 247.731 158.547 244.618 157.71 239.438 C 157.295 236.312 156.358 234.462 154.922 233.849 C 152.839 233.536 150.502 233.096 147.911 232.527 C 145.319 231.957 142.472 231.258 139.368 230.429 C 138.111 229.6 136.765 227.52 135.31 224.203 C 132.625 217.784 130.646 213.421 129.396 211.137 C 123.162 208.023 113.21 204.514 99.512 200.584 C 99.304 201.001 99.132 201.471 98.996 201.998 C 98.86 202.525 98.76 203.109 98.693 203.75 C 98.627 204.392 98.594 205.093 98.594 205.854 C 100.871 208.763 104.291 213.229 108.859 219.226 C 112.591 224.203 114.461 228.988 114.461 233.542 C 114.461 242.271 108.859 246.609 97.656 246.609 C 94.821 246.609 92.286 246.542 90.051 246.407 C 87.815 246.272 85.879 246.068 84.242 245.794 C 82.605 245.52 81.267 245.175 80.227 244.758 C 75.671 242.896 71.83 238.519 68.717 231.692 C 63.53 220.259 60.627 213.829 60.002 212.387 C 56.678 204.718 54.4 197.956 53.169 192.137 C 53.029 191.448 52.877 190.697 52.714 189.885 C 52.551 189.074 52.377 188.201 52.191 187.267 C 52.006 186.333 51.809 185.338 51.601 184.282 C 51.549 184.018 51.496 183.751 51.442 183.479 C 51.389 183.208 51.335 182.932 51.28 182.653 C 51.225 182.374 51.17 182.091 51.113 181.805 C 51.057 181.518 51 181.228 50.942 180.934 C 50.712 179.757 50.47 178.52 50.217 177.222 C 49.964 175.925 49.7 174.567 49.424 173.15 C 48.7 169.635 47.768 166.5 46.629 163.752 C 45.489 161.005 44.142 158.642 42.585 156.671 C 31.164 141.925 25.87 129.159 26.705 118.377 C 26.705 118.377 26.705 118.377 26.705 118.377 C 27.328 110.015 28.758 101.986 30.994 94.29 C 33.23 86.593 36.273 79.229 40.122 72.197 C 43.971 65.165 48.626 58.464 54.087 52.095 C 72.551 30.519 95.691 19.736 123.488 19.736 C 134.06 19.736 149.767 21.408 170.623 24.712 C 175.837 25.546 180.729 26.274 185.3 26.897 C 189.87 27.519 194.119 28.036 198.046 28.449 C 201.974 28.862 205.581 29.17 208.867 29.376 C 212.153 29.581 215.119 29.683 217.765 29.683"
                    android:valueTo="M 223.174 43.413 C 229.201 43.413 235.048 46.903 240.731 53.875 C 246.401 60.846 249.686 64.336 250.575 64.336 C 253.418 64.336 256.262 64.336 259.105 64.336 C 277.541 64.336 291.822 73.563 301.939 92.016 C 304.605 97.181 308.678 104.766 314.19 114.788 C 314.8 115.903 315.42 116.986 316.053 118.037 C 316.685 119.087 317.328 120.105 317.983 121.091 C 318.637 122.076 319.303 123.029 319.98 123.95 C 320.657 124.871 321.345 125.759 322.044 126.615 C 322.743 127.471 323.453 128.294 324.175 129.085 C 324.896 129.877 325.628 130.635 326.372 131.362 C 327.115 132.088 327.869 132.782 328.635 133.444 C 329.4 134.106 330.176 134.735 330.963 135.332 C 331.75 135.93 332.548 136.494 333.357 137.027 C 337.435 139.692 341.536 141.759 345.659 143.225 C 349.783 144.69 353.928 145.554 358.096 145.813 C 361.993 145.993 366.265 145.279 370.882 143.671 C 374.961 141.887 379.035 140.097 383.111 138.313 C 383.111 138.313 383.111 138.313 385.774 144.222 C 372.65 154.296 360.143 159.491 348.252 159.851 C 335.485 160.206 321.725 157.104 307.009 150.561 C 319.598 165.115 330.43 173.985 339.48 177.164 C 338.771 177.879 338.061 178.594 337.352 179.309 C 329.368 177.889 321.693 175.136 314.329 171.053 C 306.965 166.97 299.912 161.557 293.172 154.818 C 289.623 156.939 286.075 159.06 282.526 161.181 C 282.526 161.895 281.863 162.646 280.531 163.44 C 279.2 164.237 278.613 164.889 278.791 165.423 C 279.505 167.729 283.148 173.395 289.707 182.397 C 296.272 191.431 299.552 196.206 299.552 196.725 C 299.552 198.318 297.508 199.906 293.429 201.502 C 289.352 203.093 287.14 204.864 286.785 206.812 C 286.425 208.405 286.949 210.353 288.379 212.645 C 289.789 214.951 290.503 216.348 290.503 216.896 C 290.503 218.072 290.158 219.101 289.469 219.984 C 288.779 220.867 287.745 221.603 286.367 222.193 C 284.989 222.784 283.266 223.228 281.2 223.526 C 280.122 223.69 276.746 223.788 271.077 223.788 C 269.304 223.788 267.614 223.722 266.008 223.589 C 264.402 223.456 262.88 223.257 261.441 222.992 C 260.002 222.727 258.647 222.396 257.375 221.998 C 256.739 221.799 256.124 221.584 255.53 221.352 C 254.936 221.121 254.363 220.872 253.811 220.608 C 252.707 220.078 251.686 219.482 250.75 218.821 C 249.813 218.16 248.96 217.432 248.191 216.639 C 247.571 215.963 246.972 215.192 246.395 214.329 C 245.819 213.466 245.264 212.509 244.731 211.459 C 243.666 209.359 242.688 206.885 241.8 204.04 C 240.911 201.194 240.112 197.976 239.402 194.386 C 238.688 190.683 237.454 184.056 235.681 174.503 C 226.635 176.809 217.453 178.539 208.137 179.692 C 198.821 180.846 189.37 181.423 179.785 181.423 C 178.72 181.423 177.647 181.416 176.566 181.401 C 175.486 181.387 174.397 181.365 173.3 181.336 C 172.203 181.307 171.098 181.27 169.985 181.226 C 168.872 181.183 167.75 181.131 166.621 181.073 C 165.492 181.015 164.355 180.949 163.21 180.876 C 162.828 180.851 162.445 180.826 162.062 180.8 C 161.678 180.774 161.294 180.747 160.908 180.72 C 160.523 180.692 160.137 180.664 159.75 180.634 C 158.588 180.546 157.419 180.451 156.241 180.348 C 155.064 180.246 153.878 180.136 152.685 180.018 C 151.491 179.901 150.289 179.776 149.08 179.643 C 147.87 179.511 146.652 179.371 145.426 179.224 C 144.2 179.077 142.966 178.922 141.724 178.76 C 144.034 184.62 147.317 194.386 151.589 208.045 C 142.716 206.798 132.062 205.027 119.65 202.719 C 119.038 203.645 118.436 204.517 117.843 205.336 C 117.251 206.154 116.669 206.92 116.096 207.631 C 115.523 208.343 114.961 209.001 114.408 209.605 C 112.75 211.419 111.181 212.75 109.702 213.598 C 108.222 214.446 106.833 214.811 105.533 214.692 C 103.803 214.561 101.884 214.247 99.777 213.75 C 98.723 213.501 97.622 213.207 96.474 212.866 C 95.326 212.526 94.131 212.14 92.889 211.708 C 92.06 211.42 91.211 211.112 90.341 210.783 C 89.471 210.454 88.581 210.105 87.669 209.736 C 86.757 209.367 85.824 208.977 84.871 208.567 C 82.01 207.337 78.961 205.925 75.724 204.329 C 72.527 202.735 70.933 200.332 70.933 197.134 C 70.933 196.072 71.209 194.712 71.762 193.056 C 72.314 191.4 73.143 189.447 74.247 187.199 C 75.352 184.951 76.732 182.408 78.387 179.57 C 80.866 175.315 82.771 171.701 84.101 168.729 C 85.431 165.757 86.186 163.426 86.365 161.737 C 86.723 158.712 85.849 154.559 83.719 149.228 C 81.055 142.305 79.544 137.796 79.189 135.651 C 79.545 135.651 79.902 135.651 80.258 135.651 C 79.548 133.522 78.838 131.392 78.128 129.263 C 69.959 138.133 62.505 144.613 55.763 148.692 C 47.948 153.481 38.721 156.6 28.082 157.997 C 25.954 155.885 24.541 154.818 23.826 154.818 C 36.952 149.132 49.916 140.18 62.682 127.929 C 63.22 127.395 66.581 125.01 72.805 120.734 C 76.344 118.432 78.472 115.701 79.189 112.503 C 83.618 94.765 92.668 82.239 106.33 74.962 C 117.505 69.112 133.216 66.19 153.436 66.19 C 162.664 66.19 171.453 66.807 179.785 68.042 C 183.687 69.112 189.905 70.364 198.418 71.775 C 199.133 64.713 201.619 58.443 205.875 52.967 C 210.669 46.598 216.434 43.413 223.174 43.413 C 223.174 43.413 223.174 43.413 223.174 43.413"
                    android:valueType="pathType"
                    android:interpolator="@android:interpolator/fast_out_slow_in"/>
                <objectAnimator
                    android:propertyName="fillColor"
                    android:duration="300"
                    android:valueFrom="#78909c"
                    android:valueTo="#bdbdbd"
                    android:valueType="colorType"
                    android:interpolator="@android:interpolator/fast_out_slow_in"/>
                <objectAnimator
                    android:propertyName="pathData"
                    android:startOffset="600"
                    android:duration="300"
                    android:valueFrom="M 223.174 43.413 C 229.201 43.413 235.048 46.903 240.731 53.875 C 246.401 60.846 249.686 64.336 250.575 64.336 C 253.418 64.336 256.262 64.336 259.105 64.336 C 277.541 64.336 291.822 73.563 301.939 92.016 C 304.605 97.181 308.678 104.766 314.19 114.788 C 314.8 115.903 315.42 116.986 316.053 118.037 C 316.685 119.087 317.328 120.105 317.983 121.091 C 318.637 122.076 319.303 123.029 319.98 123.95 C 320.657 124.871 321.345 125.759 322.044 126.615 C 322.743 127.471 323.453 128.294 324.175 129.085 C 324.896 129.877 325.628 130.635 326.372 131.362 C 327.115 132.088 327.869 132.782 328.635 133.444 C 329.4 134.106 330.176 134.735 330.963 135.332 C 331.75 135.93 332.548 136.494 333.357 137.027 C 337.435 139.692 341.536 141.759 345.659 143.225 C 349.783 144.69 353.928 145.554 358.096 145.813 C 361.993 145.993 366.265 145.279 370.882 143.671 C 374.961 141.887 379.035 140.097 383.111 138.313 C 383.111 138.313 383.111 138.313 385.774 144.222 C 372.65 154.296 360.143 159.491 348.252 159.851 C 335.485 160.206 321.725 157.104 307.009 150.561 C 319.598 165.115 330.43 173.985 339.48 177.164 C 338.771 177.879 338.061 178.594 337.352 179.309 C 329.368 177.889 321.693 175.136 314.329 171.053 C 306.965 166.97 299.912 161.557 293.172 154.818 C 289.623 156.939 286.075 159.06 282.526 161.181 C 282.526 161.895 281.863 162.646 280.531 163.44 C 279.2 164.237 278.613 164.889 278.791 165.423 C 279.505 167.729 283.148 173.395 289.707 182.397 C 296.272 191.431 299.552 196.206 299.552 196.725 C 299.552 198.318 297.508 199.906 293.429 201.502 C 289.352 203.093 287.14 204.864 286.785 206.812 C 286.425 208.405 286.949 210.353 288.379 212.645 C 289.789 214.951 290.503 216.348 290.503 216.896 C 290.503 218.072 290.158 219.101 289.469 219.984 C 288.779 220.867 287.745 221.603 286.367 222.193 C 284.989 222.784 283.266 223.228 281.2 223.526 C 280.122 223.69 276.746 223.788 271.077 223.788 C 269.304 223.788 267.614 223.722 266.008 223.589 C 264.402 223.456 262.88 223.257 261.441 222.992 C 260.002 222.727 258.647 222.396 257.375 221.998 C 256.739 221.799 256.124 221.584 255.53 221.352 C 254.936 221.121 254.363 220.872 253.811 220.608 C 252.707 220.078 251.686 219.482 250.75 218.821 C 249.813 218.16 248.96 217.432 248.191 216.639 C 247.571 215.963 246.972 215.192 246.395 214.329 C 245.819 213.466 245.264 212.509 244.731 211.459 C 243.666 209.359 242.688 206.885 241.8 204.04 C 240.911 201.194 240.112 197.976 239.402 194.386 C 238.688 190.683 237.454 184.056 235.681 174.503 C 226.635 176.809 217.453 178.539 208.137 179.692 C 198.821 180.846 189.37 181.423 179.785 181.423 C 178.72 181.423 177.647 181.416 176.566 181.401 C 175.486 181.387 174.397 181.365 173.3 181.336 C 172.203 181.307 171.098 181.27 169.985 181.226 C 168.872 181.183 167.75 181.131 166.621 181.073 C 165.492 181.015 164.355 180.949 163.21 180.876 C 162.828 180.851 162.445 180.826 162.062 180.8 C 161.678 180.774 161.294 180.747 160.908 180.72 C 160.523 180.692 160.137 180.664 159.75 180.634 C 158.588 180.546 157.419 180.451 156.241 180.348 C 155.064 180.246 153.878 180.136 152.685 180.018 C 151.491 179.901 150.289 179.776 149.08 179.643 C 147.87 179.511 146.652 179.371 145.426 179.224 C 144.2 179.077 142.966 178.922 141.724 178.76 C 144.034 184.62 147.317 194.386 151.589 208.045 C 142.716 206.798 132.062 205.027 119.65 202.719 C 119.038 203.645 118.436 204.517 117.843 205.336 C 117.251 206.154 116.669 206.92 116.096 207.631 C 115.523 208.343 114.961 209.001 114.408 209.605 C 112.75 211.419 111.181 212.75 109.702 213.598 C 108.222 214.446 106.833 214.811 105.533 214.692 C 103.803 214.561 101.884 214.247 99.777 213.75 C 98.723 213.501 97.622 213.207 96.474 212.866 C 95.326 212.526 94.131 212.14 92.889 211.708 C 92.06 211.42 91.211 211.112 90.341 210.783 C 89.471 210.454 88.581 210.105 87.669 209.736 C 86.757 209.367 85.824 208.977 84.871 208.567 C 82.01 207.337 78.961 205.925 75.724 204.329 C 72.527 202.735 70.933 200.332 70.933 197.134 C 70.933 196.072 71.209 194.712 71.762 193.056 C 72.314 191.4 73.143 189.447 74.247 187.199 C 75.352 184.951 76.732 182.408 78.387 179.57 C 80.866 175.315 82.771 171.701 84.101 168.729 C 85.431 165.757 86.186 163.426 86.365 161.737 C 86.723 158.712 85.849 154.559 83.719 149.228 C 81.055 142.305 79.544 137.796 79.189 135.651 C 79.545 135.651 79.902 135.651 80.258 135.651 C 79.548 133.522 78.838 131.392 78.128 129.263 C 69.959 138.133 62.505 144.613 55.763 148.692 C 47.948 153.481 38.721 156.6 28.082 157.997 C 25.954 155.885 24.541 154.818 23.826 154.818 C 36.952 149.132 49.916 140.18 62.682 127.929 C 63.22 127.395 66.581 125.01 72.805 120.734 C 76.344 118.432 78.472 115.701 79.189 112.503 C 83.618 94.765 92.668 82.239 106.33 74.962 C 117.505 69.112 133.216 66.19 153.436 66.19 C 162.664 66.19 171.453 66.807 179.785 68.042 C 183.687 69.112 189.905 70.364 198.418 71.775 C 199.133 64.713 201.619 58.443 205.875 52.967 C 210.669 46.598 216.434 43.413 223.174 43.413 C 223.174 43.413 223.174 43.413 223.174 43.413"
                    android:valueTo="M 257.626 36.194 C 265.402 36.194 275.248 36.678 287.192 37.616 C 304.062 38.951 314.87 42.093 319.604 47.036 C 322.069 49.519 325.106 54.381 328.703 61.598 C 332.312 69.403 335.343 74.731 337.808 77.576 C 338.849 76.249 339.793 75.135 340.645 74.235 C 341.497 73.335 342.256 72.65 342.926 72.184 C 346.908 69.141 349.834 67.147 351.722 66.214 C 351.722 71.14 352.061 73.933 352.731 74.597 C 353.384 75.25 356.1 75.775 360.834 76.154 C 364.716 76.393 368.114 77.448 371.028 79.32 C 373.941 81.192 376.37 83.882 378.313 87.388 C 380.256 90.894 381.714 95.218 382.686 100.359 C 383.659 105.5 384.145 111.459 384.145 118.235 C 384.145 123.353 383.865 129.136 383.294 135.583 C 382.992 138.992 382.591 142.194 382.09 145.188 C 381.59 148.183 380.99 150.97 380.291 153.549 C 379.593 156.128 378.796 158.499 377.901 160.661 C 377.006 162.824 376.012 164.778 374.921 166.523 C 373.83 168.268 372.642 169.804 371.356 171.131 C 370.207 172.25 367.129 173.433 362.099 174.669 C 357.091 175.899 353.908 177.84 352.591 180.492 C 351.731 182.107 350.877 184.476 350.026 187.605 C 349.175 190.734 348.327 194.622 347.479 199.274 C 345.754 209.89 344.331 216.692 343.207 219.729 C 341.782 217.838 340.358 215.948 338.933 214.057 C 336.473 209.216 334.318 204.999 332.469 201.397 C 330.621 197.796 329.079 194.812 327.846 192.436 C 322.722 183.337 317.61 178.603 312.492 178.219 C 308.895 177.84 303.305 179.175 295.732 182.194 C 290.032 184.666 284.447 187.126 278.95 189.586 C 277.308 190.03 275.665 190.475 274.023 190.919 C 272.38 191.363 270.738 191.808 269.095 192.252 C 267.453 192.696 265.81 193.141 264.168 193.585 C 259.049 195.66 255.546 199.443 253.646 204.946 C 252.894 211.766 253.08 216.983 254.217 220.58 C 254.777 222.282 256.823 224.434 260.326 226.981 C 262.081 228.257 263.398 229.407 264.276 230.427 C 265.155 231.446 265.595 232.335 265.595 233.09 C 265.595 234.801 264.957 236.368 263.678 237.789 C 262.4 239.209 260.481 240.484 257.918 241.612 C 253.733 243.518 249.652 244.457 245.689 244.457 C 239.247 242.761 234.601 241.053 231.745 239.356 C 229.477 238.592 228.353 235.934 228.353 231.394 C 228.353 229.307 228.521 226.276 228.906 222.282 C 229.285 218.324 229.477 215.269 229.477 213.183 C 229.477 210.723 229.285 208.601 228.906 206.8 C 228.522 204.999 226.493 203.71 222.803 202.947 C 219.107 202.201 216.962 201.356 216.408 200.4 C 213.184 194.902 212.042 185.704 212.998 172.821 C 201.058 172.821 189.117 172.821 177.177 172.821 C 165.407 172.617 153.854 168.56 142.493 160.592 C 141.152 162.678 138.499 164.707 134.53 166.718 C 130.537 168.694 128.368 170.175 127.983 171.108 C 127.887 171.582 127.72 172.112 127.483 172.7 C 127.246 173.287 126.938 173.931 126.56 174.63 C 126.181 175.329 125.732 176.085 125.212 176.895 C 124.691 177.705 124.099 178.571 123.436 179.49 C 120.784 183.209 119.362 186.193 119.169 188.444 C 117.659 203.437 128.088 220.581 150.455 239.91 C 142.871 242.947 135.655 244.458 128.834 244.458 C 127.138 244.458 125.412 244.37 123.716 244.184 C 123.716 242.668 123.815 239.741 124.007 235.364 C 124.2 231.773 124.007 229.12 123.436 227.418 C 121.734 222.283 118.131 215.847 112.629 208.065 C 106.572 199.554 102.684 193.299 100.982 189.312 C 101.503 185.899 102.024 182.486 102.544 179.072 C 103.065 175.659 103.586 172.246 104.107 168.833 C 101.833 171.009 99.56 173.186 97.286 175.362 C 93.492 181.611 89.597 187.849 85.628 194.097 C 81.827 201.285 79.659 208.193 79.081 214.803 C 78.703 219.817 80.053 224.996 83.134 230.34 C 86.215 235.684 91.025 241.192 97.566 246.864 C 96.802 246.678 95.491 246.917 93.591 247.581 C 91.696 248.24 90.746 248.846 90.746 249.417 C 87.14 248.806 84.058 248.181 81.501 247.543 C 76.942 246.406 74.052 245.229 72.838 244.019 C 70.372 240.627 68.757 235.608 68 228.98 C 67.802 223.494 67.615 217.998 67.429 212.495 C 67.231 210.035 66.869 205.417 66.292 198.574 C 65.721 192.535 65.447 187.802 65.447 184.386 C 65.447 180.982 67.802 176.294 72.547 170.325 C 77.281 164.356 80.038 160.159 80.807 157.693 C 81.361 155.227 80.323 149.083 77.665 139.231 C 74.43 127.689 72.838 119.727 72.838 115.39 C 72.838 112.732 73.206 110.563 73.958 108.85 C 71.504 126.67 68.186 138.503 64.025 144.385 C 53.78 158.807 43.462 165.989 33.028 165.989 C 29.991 165.989 27.805 165.057 26.488 163.144 C 24.984 160.894 25.118 158.213 26.919 155.182 C 28.709 152.139 34.02 149.434 42.839 147.073 C 51.653 144.701 57.005 142.288 58.905 139.822 C 61.557 136.213 64.023 127.761 66.29 114.487 C 67.337 108.69 68.734 103.897 70.487 100.102 C 72.239 96.308 74.346 93.511 76.812 91.707 C 85.437 85.63 94.273 80.374 103.32 75.938 C 112.368 71.502 121.628 67.886 131.101 65.085 C 150.052 59.482 164.282 55.349 173.759 52.714 C 181.671 49.962 189.352 47.554 196.803 45.49 C 204.253 43.425 211.473 41.704 218.462 40.327 C 225.451 38.95 232.209 37.916 238.737 37.228 C 245.264 36.539 251.56 36.194 257.626 36.194 C 257.626 36.194 257.626 36.194 257.626 36.194"
                    android:valueType="pathType"
                    android:interpolator="@android:interpolator/fast_out_slow_in"/>
                <objectAnimator
                    android:propertyName="fillColor"
                    android:startOffset="600"
                    android:duration="300"
                    android:valueFrom="#bdbdbd"
                    android:valueTo="#795548"
                    android:valueType="colorType"
                    android:interpolator="@android:interpolator/fast_out_slow_in"/>
                <objectAnimator
                    android:propertyName="pathData"
                    android:startOffset="1200"
                    android:duration="300"
                    android:valueFrom="M 257.626 36.194 C 265.402 36.194 275.248 36.678 287.192 37.616 C 304.062 38.951 314.87 42.093 319.604 47.036 C 322.069 49.519 325.106 54.381 328.703 61.598 C 332.312 69.403 335.343 74.731 337.808 77.576 C 338.849 76.249 339.793 75.135 340.645 74.235 C 341.497 73.335 342.256 72.65 342.926 72.184 C 346.908 69.141 349.834 67.147 351.722 66.214 C 351.722 71.14 352.061 73.933 352.731 74.597 C 353.384 75.25 356.1 75.775 360.834 76.154 C 364.716 76.393 368.114 77.448 371.028 79.32 C 373.941 81.192 376.37 83.882 378.313 87.388 C 380.256 90.894 381.714 95.218 382.686 100.359 C 383.659 105.5 384.145 111.459 384.145 118.235 C 384.145 123.353 383.865 129.136 383.294 135.583 C 382.992 138.992 382.591 142.194 382.09 145.188 C 381.59 148.183 380.99 150.97 380.291 153.549 C 379.593 156.128 378.796 158.499 377.901 160.661 C 377.006 162.824 376.012 164.778 374.921 166.523 C 373.83 168.268 372.642 169.804 371.356 171.131 C 370.207 172.25 367.129 173.433 362.099 174.669 C 357.091 175.899 353.908 177.84 352.591 180.492 C 351.731 182.107 350.877 184.476 350.026 187.605 C 349.175 190.734 348.327 194.622 347.479 199.274 C 345.754 209.89 344.331 216.692 343.207 219.729 C 341.782 217.838 340.358 215.948 338.933 214.057 C 336.473 209.216 334.318 204.999 332.469 201.397 C 330.621 197.796 329.079 194.812 327.846 192.436 C 322.722 183.337 317.61 178.603 312.492 178.219 C 308.895 177.84 303.305 179.175 295.732 182.194 C 290.032 184.666 284.447 187.126 278.95 189.586 C 277.308 190.03 275.665 190.475 274.023 190.919 C 272.38 191.363 270.738 191.808 269.095 192.252 C 267.453 192.696 265.81 193.141 264.168 193.585 C 259.049 195.66 255.546 199.443 253.646 204.946 C 252.894 211.766 253.08 216.983 254.217 220.58 C 254.777 222.282 256.823 224.434 260.326 226.981 C 262.081 228.257 263.398 229.407 264.276 230.427 C 265.155 231.446 265.595 232.335 265.595 233.09 C 265.595 234.801 264.957 236.368 263.678 237.789 C 262.4 239.209 260.481 240.484 257.918 241.612 C 253.733 243.518 249.652 244.457 245.689 244.457 C 239.247 242.761 234.601 241.053 231.745 239.356 C 229.477 238.592 228.353 235.934 228.353 231.394 C 228.353 229.307 228.521 226.276 228.906 222.282 C 229.285 218.324 229.477 215.269 229.477 213.183 C 229.477 210.723 229.285 208.601 228.906 206.8 C 228.522 204.999 226.493 203.71 222.803 202.947 C 219.107 202.201 216.962 201.356 216.408 200.4 C 213.184 194.902 212.042 185.704 212.998 172.821 C 201.058 172.821 189.117 172.821 177.177 172.821 C 165.407 172.617 153.854 168.56 142.493 160.592 C 141.152 162.678 138.499 164.707 134.53 166.718 C 130.537 168.694 128.368 170.175 127.983 171.108 C 127.887 171.582 127.72 172.112 127.483 172.7 C 127.246 173.287 126.938 173.931 126.56 174.63 C 126.181 175.329 125.732 176.085 125.212 176.895 C 124.691 177.705 124.099 178.571 123.436 179.49 C 120.784 183.209 119.362 186.193 119.169 188.444 C 117.659 203.437 128.088 220.581 150.455 239.91 C 142.871 242.947 135.655 244.458 128.834 244.458 C 127.138 244.458 125.412 244.37 123.716 244.184 C 123.716 242.668 123.815 239.741 124.007 235.364 C 124.2 231.773 124.007 229.12 123.436 227.418 C 121.734 222.283 118.131 215.847 112.629 208.065 C 106.572 199.554 102.684 193.299 100.982 189.312 C 101.503 185.899 102.024 182.486 102.544 179.072 C 103.065 175.659 103.586 172.246 104.107 168.833 C 101.833 171.009 99.56 173.186 97.286 175.362 C 93.492 181.611 89.597 187.849 85.628 194.097 C 81.827 201.285 79.659 208.193 79.081 214.803 C 78.703 219.817 80.053 224.996 83.134 230.34 C 86.215 235.684 91.025 241.192 97.566 246.864 C 96.802 246.678 95.491 246.917 93.591 247.581 C 91.696 248.24 90.746 248.846 90.746 249.417 C 87.14 248.806 84.058 248.181 81.501 247.543 C 76.942 246.406 74.052 245.229 72.838 244.019 C 70.372 240.627 68.757 235.608 68 228.98 C 67.802 223.494 67.615 217.998 67.429 212.495 C 67.231 210.035 66.869 205.417 66.292 198.574 C 65.721 192.535 65.447 187.802 65.447 184.386 C 65.447 180.982 67.802 176.294 72.547 170.325 C 77.281 164.356 80.038 160.159 80.807 157.693 C 81.361 155.227 80.323 149.083 77.665 139.231 C 74.43 127.689 72.838 119.727 72.838 115.39 C 72.838 112.732 73.206 110.563 73.958 108.85 C 71.504 126.67 68.186 138.503 64.025 144.385 C 53.78 158.807 43.462 165.989 33.028 165.989 C 29.991 165.989 27.805 165.057 26.488 163.144 C 24.984 160.894 25.118 158.213 26.919 155.182 C 28.709 152.139 34.02 149.434 42.839 147.073 C 51.653 144.701 57.005 142.288 58.905 139.822 C 61.557 136.213 64.023 127.761 66.29 114.487 C 67.337 108.69 68.734 103.897 70.487 100.102 C 72.239 96.308 74.346 93.511 76.812 91.707 C 85.437 85.63 94.273 80.374 103.32 75.938 C 112.368 71.502 121.628 67.886 131.101 65.085 C 150.052 59.482 164.282 55.349 173.759 52.714 C 181.671 49.962 189.352 47.554 196.803 45.49 C 204.253 43.425 211.473 41.704 218.462 40.327 C 225.451 38.95 232.209 37.916 238.737 37.228 C 245.264 36.539 251.56 36.194 257.626 36.194 C 257.626 36.194 257.626 36.194 257.626 36.194"
                    android:valueTo="M 217.765 29.683 C 225.855 29.683 235.734 31.193 247.403 34.209 C 259.072 37.224 272.53 41.744 287.779 47.764 C 293.183 49.818 299.71 55.439 307.378 64.555 C 311.735 69.94 318.479 78.055 327.602 88.844 C 329.676 90.305 332.381 92.475 335.705 95.396 C 339.023 98.28 341.3 99.537 342.532 99.122 C 342.952 97.866 343.999 96.117 345.658 93.84 C 346.487 93.004 346.998 92.589 347.202 92.589 C 347.84 93.004 348.452 93.419 349.077 93.84 C 349.696 94.261 349.9 95.492 349.696 97.566 C 349.275 101.304 349.077 102.44 349.077 100.979 C 348.854 103.065 348.561 104.399 348.14 105.043 C 345.441 109.599 344.395 113.133 345.033 115.608 C 345.658 117.879 347.603 121.528 350.934 126.505 C 354.258 131.482 356.115 135.22 356.529 137.708 C 356.325 139.572 356.235 142.57 356.235 146.73 C 355.975 147.377 355.715 148.025 355.455 148.672 C 355.195 149.32 354.935 149.968 354.675 150.615 C 354.416 151.263 354.156 151.91 353.896 152.558 C 353.636 153.205 353.376 153.852 353.116 154.5 C 353.116 155.953 353.537 157.666 354.379 159.639 C 355.222 161.612 356.485 163.844 358.17 166.336 C 361.541 171.32 366.596 177.34 373.34 184.397 C 379.784 187.281 382.981 197.253 382.981 214.249 C 382.981 227.545 371.994 234.167 350.015 234.167 C 347.106 234.167 343.999 234.078 340.675 233.848 C 338.398 233.031 335.074 232.1 330.722 231.066 C 325.542 230.428 322.008 228.68 320.151 225.758 C 316.821 221.012 311.423 216.532 303.959 212.386 C 302.714 211.786 300.896 209.503 298.51 205.547 C 296.118 201.604 293.993 199.116 292.136 198.069 C 290.28 197.048 287.575 196.831 284.04 197.47 C 278.024 198.49 274.7 199.014 274.087 199.014 C 272.627 199.014 270.502 198.605 267.707 197.763 C 266.304 197.348 265.1 197.035 264.09 196.826 C 263.079 196.617 262.263 196.512 261.634 196.512 C 260.191 203.16 259.866 209.591 260.703 215.805 C 260.906 217.477 261.953 218.829 263.816 219.85 C 266.731 221.93 268.276 223.066 268.493 223.296 C 270.349 224.737 272.327 227.123 274.394 230.428 C 274.815 231.691 274.037 233.81 272.059 236.808 C 270.087 239.82 268.493 241.593 267.235 242.091 C 265.997 242.627 263.298 242.895 259.145 242.895 C 253.122 242.895 250.749 242.984 251.999 243.188 C 243.706 241.938 239.036 241.223 237.989 241.032 C 232.808 239.986 228.342 238.339 224.616 236.043 C 222.734 234.805 220.578 228.987 218.09 218.613 C 217.252 214.878 216.463 211.64 215.722 208.897 C 214.981 206.154 214.289 203.906 213.644 202.153 C 212.999 200.4 212.401 199.141 211.85 198.375 C 211.442 197.763 210.925 197.47 210.306 197.47 C 209.26 197.47 207.544 198.491 205.164 200.583 C 202.778 202.625 201.164 203.76 200.347 204.003 C 197.451 216.227 195.977 222.032 195.977 221.395 C 195.977 226.18 197.323 230.199 200.022 233.529 C 202.715 236.847 205.529 240.063 208.438 243.163 C 211.959 247.106 213.72 250.526 213.72 253.435 C 213.72 255.081 213.21 256.523 212.163 257.786 C 207.806 263.171 200.539 265.876 190.376 265.876 C 178.962 265.876 171.498 264.319 167.982 261.206 C 163.408 257.263 160.505 253.104 159.267 248.778 C 159.063 247.731 158.547 244.618 157.71 239.438 C 157.295 236.312 156.358 234.462 154.922 233.849 C 152.839 233.536 150.502 233.096 147.911 232.527 C 145.319 231.957 142.472 231.258 139.368 230.429 C 138.111 229.6 136.765 227.52 135.31 224.203 C 132.625 217.784 130.646 213.421 129.396 211.137 C 123.162 208.023 113.21 204.514 99.512 200.584 C 99.304 201.001 99.132 201.471 98.996 201.998 C 98.86 202.525 98.76 203.109 98.693 203.75 C 98.627 204.392 98.594 205.093 98.594 205.854 C 100.871 208.763 104.291 213.229 108.859 219.226 C 112.591 224.203 114.461 228.988 114.461 233.542 C 114.461 242.271 108.859 246.609 97.656 246.609 C 94.821 246.609 92.286 246.542 90.051 246.407 C 87.815 246.272 85.879 246.068 84.242 245.794 C 82.605 245.52 81.267 245.175 80.227 244.758 C 75.671 242.896 71.83 238.519 68.717 231.692 C 63.53 220.259 60.627 213.829 60.002 212.387 C 56.678 204.718 54.4 197.956 53.169 192.137 C 53.029 191.448 52.877 190.697 52.714 189.885 C 52.551 189.074 52.377 188.201 52.191 187.267 C 52.006 186.333 51.809 185.338 51.601 184.282 C 51.549 184.018 51.496 183.751 51.442 183.479 C 51.389 183.208 51.335 182.932 51.28 182.653 C 51.225 182.374 51.17 182.091 51.113 181.805 C 51.057 181.518 51 181.228 50.942 180.934 C 50.712 179.757 50.47 178.52 50.217 177.222 C 49.964 175.925 49.7 174.567 49.424 173.15 C 48.7 169.635 47.768 166.5 46.629 163.752 C 45.489 161.005 44.142 158.642 42.585 156.671 C 31.164 141.925 25.87 129.159 26.705 118.377 C 26.705 118.377 26.705 118.377 26.705 118.377 C 27.328 110.015 28.758 101.986 30.994 94.29 C 33.23 86.593 36.273 79.229 40.122 72.197 C 43.971 65.165 48.626 58.464 54.087 52.095 C 72.551 30.519 95.691 19.736 123.488 19.736 C 134.06 19.736 149.767 21.408 170.623 24.712 C 175.837 25.546 180.729 26.274 185.3 26.897 C 189.87 27.519 194.119 28.036 198.046 28.449 C 201.974 28.862 205.581 29.17 208.867 29.376 C 212.153 29.581 215.119 29.683 217.765 29.683"
                    android:valueType="pathType"
                    android:interpolator="@android:interpolator/fast_out_slow_in"/>
                <objectAnimator
                    android:propertyName="fillColor"
                    android:startOffset="1200"
                    android:duration="300"
                    android:valueFrom="#795548"
                    android:valueTo="#78909c"
                    android:valueType="colorType"
                    android:interpolator="@android:interpolator/fast_out_slow_in"/>
            </set>
        </aapt:attr>
    </target>
</animated-vector>

[Demo：Visibility strike]

动画效果如下：

210.gif

代码如下：

<animated-vector
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:aapt="http://schemas.android.com/aapt">
    <aapt:attr name="android:drawable">
        <vector
            android:name="visibilitystrike"
            android:width="24dp"
            android:height="24dp"
            android:viewportWidth="24"
            android:viewportHeight="24">
            <path
                android:name="strike_thru_path"
                android:pathData="M 2 4.27 L 3.27 3 L 3.27 3 L 2 4.27 Z"
                android:fillColor="#ff000000"
                android:strokeWidth="1"/>
            <clip-path
                android:name="strike_thru_mask"
                android:pathData="M 0 0 L 24 0 L 24 24 L 0 24 L 0 0 Z M 4.54 1.73 L 3.27 3 L 3.27 3 L 4.54 1.73 Z"/>
            <path
                android:name="eye_path"
                android:pathData="M 12 4.5 C 7 4.5 2.73 7.61 1 12 C 2.73 16.39 7 19.5 12 19.5 C 17 19.5 21.27 16.39 23 12 C 21.27 7.61 17 4.5 12 4.5 L 12 4.5 Z M 12 17 C 9.24 17 7 14.76 7 12 C 7 9.24 9.24 7 12 7 C 14.76 7 17 9.24 17 12 C 17 14.76 14.76 17 12 17 L 12 17 Z M 12 9 C 10.34 9 9 10.34 9 12 C 9 13.66 10.34 15 12 15 C 13.66 15 15 13.66 15 12 C 15 10.34 13.66 9 12 9 L 12 9 Z"
                android:fillColor="#ff000000"
                android:strokeWidth="1"/>
        </vector>
    </aapt:attr>
    <target android:name="strike_thru_path">
        <aapt:attr name="android:animation">
            <objectAnimator
                android:propertyName="pathData"
                android:startOffset="268"
                android:duration="1271"
                android:valueFrom="M 2 4.27 L 3.27 3 L 3.27 3 L 2 4.27 Z"
                android:valueTo="M 19.73 22 L 21 20.73 L 3.27 3 L 2 4.27 Z"
                android:valueType="pathType"
                android:interpolator="@android:interpolator/fast_out_slow_in"/>
        </aapt:attr>
    </target>
    <target android:name="strike_thru_mask">
        <aapt:attr name="android:animation">
            <objectAnimator
                android:propertyName="pathData"
                android:startOffset="268"
                android:duration="1271"
                android:valueFrom="M 0 0 L 24 0 L 24 24 L 0 24 L 0 0 Z M 4.54 1.73 L 3.27 3 L 3.27 3 L 4.54 1.73 Z"
                android:valueTo="M 0 0 L 24 0 L 24 24 L 0 24 L 0 0 Z M 4.54 1.73 L 3.27 3 L 21 20.73 L 22.27 19.46 Z"
                android:valueType="pathType"
                android:interpolator="@android:interpolator/fast_out_slow_in"/>
        </aapt:attr>
    </target>
    <target android:name="visibilitystrike">
        <aapt:attr name="android:animation">
            <objectAnimator
                android:propertyName="alpha"
                android:startOffset="268"
                android:duration="1271"
                android:valueFrom="1"
                android:valueTo="0.333"
                android:valueType="floatType"
                android:interpolator="@android:interpolator/fast_out_slow_in"/>
        </aapt:attr>
    </target>
</animated-vector>

[Demo：Heart break]

动画效果如下：

211.gif

代码如下：

<animated-vector
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:aapt="http://schemas.android.com/aapt">
    <aapt:attr name="android:drawable">
        <vector
            android:name="heartbreak"
            android:width="56dp"
            android:height="56dp"
            android:viewportWidth="56"
            android:viewportHeight="56">
            <group
                android:name="broken_heart_left_group"
                android:pivotX="28"
                android:pivotY="37.3">
                <path
                    android:name="broken_heart_left"
                    android:pathData="M 28.031 21.054 C 28.02 21.066 28.01 21.078 28 21.09 C 26.91 19.81 25.24 19 23.5 19 C 20.42 19 18 21.42 18 24.5 C 18 28.28 21.4 31.36 26.55 36.03 L 28 37.35 L 28.002 37.348 L 27.781 36.988 L 28.489 36.073 L 27.506 34.764 L 28.782 33.027 L 26.944 31.008 L 29.149 28.725 L 27.117 27.143 L 29.149 25.018 L 26.488 22.977 L 28.031 21.054 L 28.031 21.054 Z"
                    android:fillColor="#000"/>
            </group>
            <group
                android:name="broken_heart_right_group"
                android:pivotX="28"
                android:pivotY="37.3">
                <path
                    android:name="broken_heart_right"
                    android:pathData="M 28.031 21.054 C 28.169 20.895 28.316 20.743 28.471 20.599 L 28.915 20.226 C 29.926 19.457 31.193 19 32.5 19 C 35.58 19 38 21.42 38 24.5 C 38 28.28 34.6 31.36 29.45 36.04 L 28.002 37.348 L 27.781 36.988 L 28.489 36.073 L 27.506 34.764 L 28.782 33.027 L 26.944 31.008 L 29.149 28.725 L 27.117 27.143 L 29.149 25.018 L 26.488 22.977 L 28.031 21.054 L 28.031 21.054 Z"
                    android:fillColor="#000"/>
            </group>
            <path
                android:name="heart_stroke_left"
                android:pathData="M 28.719 38.296 L 25.669 35.552 C 21.621 31.793 18.016 28.891 18.016 24.845 C 18.016 21.588 20.631 19.965 23.634 19.965 C 24.999 19.965 26.799 21.181 28.644 23.13"
                android:strokeColor="#000"
                android:strokeWidth="2"
                android:trimPathEnd="0"/>
            <path
                android:name="heart_stroke_right"
                android:pathData="M 27.231 38.294 L 30.765 35.2 C 34.834 31.235 37.752 29.118 38.004 25.084 C 38.168 22.459 35.773 20.035 33.379 20.035 C 30.432 20.035 29.672 21.047 27.231 23.133"
                android:strokeColor="#000"
                android:strokeWidth="2"
                android:trimPathEnd="0"/>
            <group android:name="filled">
                <clip-path
                    android:name="clip"
                    android:pathData="M 18 37 L 38 37 L 38 37 L 18 37 Z"/>
                <path
                    android:name="fill"
                    android:pathData="M 28 39 L 26.405 37.567 C 20.74 32.471 17 29.109 17 24.995 C 17 21.632 19.657 19 23.05 19 C 24.964 19 26.801 19.883 28 21.272 C 29.199 19.883 31.036 19 32.95 19 C 36.343 19 39 21.632 39 24.995 C 39 29.109 35.26 32.471 29.595 37.567 L 28 39 L 28 39 Z"
                    android:fillColor="#000000"/>
            </group>
        </vector>
    </aapt:attr>
    <target android:name="broken_heart_left_group">
        <aapt:attr name="android:animation">
            <objectAnimator
                android:propertyName="rotation"
                android:duration="400"
                android:valueFrom="0"
                android:valueTo="-20"
                android:valueType="floatType"
                android:interpolator="@android:interpolator/linear_out_slow_in"/>
        </aapt:attr>
    </target>
    <target android:name="broken_heart_right_group">
        <aapt:attr name="android:animation">
            <objectAnimator
                android:propertyName="rotation"
                android:duration="400"
                android:valueFrom="0"
                android:valueTo="20"
                android:valueType="floatType"
                android:interpolator="@android:interpolator/linear_out_slow_in"/>
        </aapt:attr>
    </target>
    <target android:name="broken_heart_left">
        <aapt:attr name="android:animation">
            <objectAnimator
                android:propertyName="fillAlpha"
                android:startOffset="100"
                android:duration="300"
                android:valueFrom="1"
                android:valueTo="0"
                android:valueType="floatType"
                android:interpolator="@android:interpolator/linear_out_slow_in"/>
        </aapt:attr>
    </target>
    <target android:name="broken_heart_right">
        <aapt:attr name="android:animation">
            <objectAnimator
                android:propertyName="fillAlpha"
                android:startOffset="100"
                android:duration="300"
                android:valueFrom="1"
                android:valueTo="0"
                android:valueType="floatType"
                android:interpolator="@android:interpolator/linear_out_slow_in"/>
        </aapt:attr>
    </target>
    <target android:name="heart_stroke_left">
        <aapt:attr name="android:animation">
            <objectAnimator
                android:propertyName="trimPathEnd"
                android:startOffset="500"
                android:duration="400"
                android:valueFrom="0"
                android:valueTo="1"
                android:valueType="floatType"
                android:interpolator="@android:interpolator/fast_out_slow_in"/>
        </aapt:attr>
    </target>
    <target android:name="heart_stroke_right">
        <aapt:attr name="android:animation">
            <objectAnimator
                android:propertyName="trimPathEnd"
                android:startOffset="500"
                android:duration="400"
                android:valueFrom="0"
                android:valueTo="1"
                android:valueType="floatType"
                android:interpolator="@android:interpolator/fast_out_slow_in"/>
        </aapt:attr>
    </target>
    <target android:name="clip">
        <aapt:attr name="android:animation">
            <set>
                <objectAnimator
                    android:propertyName="pathData"
                    android:startOffset="1160"
                    android:duration="120"
                    android:valueFrom="M 18 26 C 18 26 21 28 24 28 C 27 28 29 25 32 25 C 35 25 38 26 38 26 L 38 38 L 18 38 L 18 26 Z"
                    android:valueTo="M 18 18 C 18 18 24 18 24 18 C 24 18 32 18 32 18 C 32 18 38 18 38 18 L 38 38 L 18 38 L 18 18 Z"
                    android:valueType="pathType"
                    android:interpolator="@android:interpolator/fast_out_linear_in"/>
                <objectAnimator
                    android:propertyName="pathData"
                    android:startOffset="1000"
                    android:duration="160"
                    android:valueFrom="M 18 38 C 18 38 24 38 24 38 C 24 38 32 38 32 38 C 32 38 38 38 38 38 L 38 38 L 18 38 L 18 38 Z"
                    android:valueTo="M 18 26 C 18 26 21 28 24 28 C 27 28 29 25 32 25 C 35 25 38 26 38 26 L 38 38 L 18 38 L 18 26 Z"
                    android:valueType="pathType"
                    android:interpolator="@android:interpolator/fast_out_linear_in"/>
            </set>
        </aapt:attr>
    </target>
    <target android:name="heartbreak">
        <aapt:attr name="android:animation">
            <objectAnimator
                android:propertyName="alpha"
                android:startOffset="500"
                android:duration="400"
                android:valueFrom="0.4"
                android:valueTo="1"
                android:valueType="floatType"
                android:interpolator="@android:interpolator/fast_out_slow_in"/>
        </aapt:attr>
    </target>
</animated-vector>

[本章完...]

©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 158,425评论 4赞 361
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 67,058评论 1赞 291
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 108,186评论 0赞 243
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 43,848评论 0赞 204
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 52,249评论 3赞 286
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 40,554评论 1赞 216
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 31,830评论 2赞 312
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 30,536评论 0赞 197
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 34,239评论 1赞 241
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,505评论 2赞 244
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,004评论 1赞 258
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 28,346评论 2赞 253
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 32,999评论 3赞 235
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,060评论 0赞 8
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,821评论 0赞 194
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 35,574评论 2赞 271
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 35,480评论 2赞 267

推荐阅读更多精彩内容