SVG学习--AnimatedVectorDrawable的使用

之前我们演示的都是静态的SVG图片加载，其实这有点屈才了，其实通过属性动画的配合，svg还可以动起来

前言

, , , 和 元素都有各自可以播放动画的属性，查阅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文件

这里其实跟上篇文章的svg差别不大，我仅仅添加了group，让animgroup这个标签执行动画文件

动画xml

既然是创建属性动画，那么我们在res下建立animator文件夹，创建一个文件为move.xml

关联动画文件与SVG图片

我们在drawable下建立一个主标签为animated-vector的文件animator_v

主标签下的android:drawable是引用的SVG图片，然后我们在里面定义target，target的数量可以无限多个。android:animation就是我们的动画文件，同时android:name就是我们之前在group里面设置的name值

添加布局引用

注意这边一定要使用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上成功运行

来一个简单的正方形变成三角形的案例

首先画一个正方形

然后就是属性动画

再次强调参数的类型、数量是一致的

关联起来

运行代码

其他动画属性欣赏--trimPathEnd/trimPathStart

这个一般用在渐进显示画笔路径，1的时候是当前状态，0的时候是对里面状态，所以我们一般从头画到结束，会选择的动画分别为

还是之前正方形的SVG图片，看看效果

总结

SVG还有很多不兼容的地方，而且谷歌每次在更新的时候都有可能会改动之前的部分，所以这部分大家在使用过程中一定要多加留意，多多测试

参考资料

VectorDrawable-第二章
VectorDrawable-第三章
VectorDrawable-第四章
VectorDrawable 详解