之前我们演示的都是静态的SVG图片加载，其实这有点屈才了，其实通过属性动画的配合，svg还可以动起来
前言
<vector>, <group>, <clip-path>, 和<path> 元素都有各自可以播放动画的属性，查阅VectorDrawable JavaDocs你会找到每种元素到底有那些属性，以便针对这些属性播放特定的动画。
我这边先列举一些
path
android:name 定义该 path 的名字，这样在其他地方可以通过名字来引用这个路径
android:pathData 和 SVG 中 d 元素一样的路径信息。
android:fillColor 定义填充路径的颜色，如果没有定义则不填充路径
android:strokeColor 定义如何绘制路径边框，如果没有定义则不显示边框
android:strokeWidth 定义路径边框的粗细尺寸
android:strokeAlpha 定义路径边框的透明度
android:fillAlpha 定义填充路径颜色的透明度
android:trimPathStart 从路径起始位置截断路径的比率，取值范围从 0 到1
android:trimPathEnd 从路径结束位置截断路径的比率，取值范围从 0 到1
android:trimPathOffset 设置路径截取的范围，取值范围从 0 到1
android:strokeLineCap 设置路径线帽的形状，取值为 butt, round, square.
android:strokeLineJoin 设置路径交界处的连接方式，取值为 miter,round,bevel.
android:strokeMiterLimit 设置斜角的上限
**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 值来指定的。
clip-path：定义当前绘制的剪切路径。注意，clip-path 只对当前的 group 和子 group 有效
android:name 定义 clip path 的名字
android:pathData 和 android:pathData 的取值一样。
vector：定义这个矢量图
android:name 定义该drawable的名字
android:width 定义该 drawable 的内部(intrinsic)宽度,支持所有 Android 系统支持的尺寸，通常使用 dp
android:height 定义该 drawable 的内部(intrinsic)高度,支持所有 Android 系统支持的尺寸，通常使用 dp
android:viewportWidth 定义矢量图视图的宽度，视图就是矢量图 path 路径数据所绘制的虚拟画布
android:viewportHeight 定义矢量图视图的高度，视图就是矢量图 path 路径数据所绘制的虚拟画布
android:tint 定义该 drawable 的 tint 颜色。默认是没有 tint 颜色的
android:tintMode 定义 tint 颜色的 Porter-Duff blending 模式，默认值为 src_in
android:autoMirrored 设置当系统为 RTL (right-to-left) 布局的时候，是否自动镜像该图片。比如 阿拉伯语。
android:alpha 该图片的透明度属性
下面我演示用的translateY/translateX在path是没有动画属性的，他是group属性上的，那么我们就将需要执行动画的部分都分别绑定到不同的group里面去
改造SVG文件
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="96dp"
android:height="96dp"
android:viewportWidth="96.0"
android:viewportHeight="96.0">
<group android:name="pathgroup">
<group android:name="animgroup">
<path
android:fillColor="@color/colorPrimary"
android:pathData="M48,48 a16,24 0 1 1 6,8"/>
</group>
<group android:name="noanimgroup">
<path
android:fillColor="@android:color/holo_green_light"
android:pathData="M48,48 a16,24 0 0 1 6,8"/>
<path
android:fillColor="@android:color/holo_purple"
android:pathData="M48,48 a16,24 0 1 0 6,8"/>
<path
android:fillColor="@android:color/holo_orange_light"
android:pathData="M48,48 a16,24 0 0 0 6,8"/>
</group>
</group>
</vector>
这里其实跟上篇文章的svg差别不大，我仅仅添加了group，让animgroup这个标签执行动画文件
动画xml
既然是创建属性动画，那么我们在res下建立animator文件夹，创建一个文件为move.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<objectAnimator
android:propertyName="translateY"
android:valueType="floatType"
android:valueFrom="0"
android:valueTo="-10"
android:repeatCount="infinite"
android:repeatMode="reverse"
android:duration="500">
</objectAnimator>
</set>
关联动画文件与SVG图片
我们在drawable下建立一个主标签为animated-vector的文件animator_v
<?xml version="1.0" encoding="utf-8"?>
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android" android:drawable="@drawable/ic_a">
<target
android:animation="@animator/move"
android:name="animgroup">
</target>
</animated-vector>
主标签下的android:drawable是引用的SVG图片，然后我们在里面定义target，target的数量可以无限多个。android:animation就是我们的动画文件，同时android:name就是我们之前在group里面设置的name值
添加布局引用
<ImageView xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/imageview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="@drawable/animated_v"/>
注意这边一定要使用srcCompat，不然5.0以下兼容会出现问题
OK，到此为止，我们在xml中的配置就结束了，这时候你运行得到的依然是一张静态图片，如何动起来呢？
我们需要在使用到这个imageview的地方去获取到这个drawable，然后start
ImageView imageview= (ImageView) findViewById(R.id.imageview);
((AnimatedVectorDrawableCompat) imageview.getDrawable()).start();
AnimatedVectorDrawableCompat
其他动画属性欣赏--pathData
android:propertyName="pathData"，这个是加载在Path上动画，可以进行形状变化，有一点要注意，就是变化前的valueFrom必须跟结束的valueTo参数个数要相等，同时这些参数的类型要匹配。但是这玩意我只在android6.0上成功运行
来一个简单的正方形变成三角形的案例
首先画一个正方形
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="100dp"
android:height="100dp"
android:viewportWidth="100.0"
android:viewportHeight="100.0">
<path
android:name="square"
android:strokeColor="#FF000000"
android:strokeWidth="0.5"
android:pathData="M30,30 L90,30 L90,90 L30,90 z"/>
</vector>
然后就是属性动画
<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="1000"
android:repeatMode="reverse"
android:repeatCount="1"
android:propertyName="pathData"
android:valueType="pathType"
android:valueFrom="M30,30 L90,30 L90,90 L30,90 z"
android:valueTo="M60,30 L60,30 L90,90 L30,90 z" />
再次强调参数的类型、数量是一致的
关联起来
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
android:drawable="@drawable/ic_change_history_black_24dp">
<target
android:animation="@animator/translate"
android:name="square" />
</animated-vector>
运行代码
其他动画属性欣赏--trimPathEnd/trimPathStart
这个一般用在渐进显示画笔路径，1的时候是当前状态，0的时候是对里面状态，所以我们一般从头画到结束，会选择的动画分别为
<objectAnimator
android:propertyName="trimPathEnd"
android:valueFrom="0"
android:valueTo="1"
android:duration="5000"
android:valueType="floatType"
android:interpolator="@android:interpolator/linear">
</objectAnimator>
<objectAnimator
android:propertyName="trimPathStart"
android:valueFrom="1"
android:valueTo="0"
android:duration="5000"
android:valueType="floatType"
android:interpolator="@android:interpolator/linear">
</objectAnimator>
还是之前正方形的SVG图片，看看效果
总结
SVG还有很多不兼容的地方，而且谷歌每次在更新的时候都有可能会改动之前的部分，所以这部分大家在使用过程中一定要多加留意，多多测试
参考资料
VectorDrawable-第二章
VectorDrawable-第三章
VectorDrawable-第四章
VectorDrawable 详解
网友评论