此例用到SVG动画，其中涉及三个XML文件，分别为：Vector矢量图，objectAnimator动画，以及一个animated-vector文件将前两个文件联合起来。
1.在drawable文件夹下新建vector文件描述矢量图
android:height="200dp"
android:width="200dp"
android:viewportHeight="100"
android:viewportWidth="100">
android:name="path1"
android:strokeColor="@color/colorAccent"
android:strokeWidth="5"
android:strokeLineCap="round"
android:pathData="
M 20,80
L 50,80,80,80"/>
android:name="path2"
android:strokeColor="@color/colorAccent"
android:strokeWidth="5"
android:strokeLineCap="round"
android:pathData="
M 20,50
L 50,50,80,50"/>
android:name="path3"
android:strokeColor="@color/colorAccent"
android:strokeWidth="5"
android:strokeLineCap="round"
android:pathData="
M 20,20
L 50,20,80,20"/>
因为要改变第一条和第三条线的，只要两个点就够了，但是为了动画美观过渡更自然，我们使用三个点来描绘。其中M代表moveto:即起点坐标，L代表lineto:即后续点点到哪里，在这个动画中我们描绘了三条线，第一条:最下面一条，(20,80)到(50,80)再到(80,80)剩下两条以此类推。
2.写objectAnimator文件
在这个文件中我们需要描绘每条线的动画路径。下面是line1的动画，即最下面的动画，这个文件建立在animator文件夹中，并不是anim文件夹。
android:duration="300"
android:propertyName="pathData"
android:valueFrom="
M 20,80
L 50,80,80,80"
android:valueTo="
M 20,50
L 50,80,50,80"
android:valueType="pathType"
android:interpolator="@android:anim/linear_interpolator">
这个文件中有几个属性，我们解释一下valueFrome以及valueTo这两个关键属性：
android:valueFrom="
M 20,80
L 50,80,80,80"
表示从原来的其实位置移动到
android:valueTo="
M 20,50
L 50,80,50,80"
的位置，最下面的interpolator插值器则描绘了动画的缓冲路径。
3.建立animated-vector文件
将上述两个文件粘合在一起，从而完成动画绘制，这个文件同样建立在drawable文件夹中。
android:drawable="@drawable/svg_vecotr_1">
android:animation="@animator/anim_path1"
android:name="path1"/>
android:animation="@animator/anim_path2"
android:name="path3"/>
其中target标签中的animation就是我们vectorAnimator动画，name就是vector文件中的线条。
4.引用
在布局文件中使用android:src="@drawable/svg_1"即可，这个引用的是第三个animated-vector文件。
5.在代码中注册
首先为引用该资源的view注册点击事件，自点击事件中初始化动画：
private void animate() {
Drawable drawable = imageView.getDrawable();
if (drawable instanceof Animatable) {
((Animatable) drawable).start();
}
}
ezgif-2-a37b90817c.gif
