之前我们演示的都是静态的SVG图片加载,其实这有点屈才了,其实通过属性动画的配合,svg还可以动起来
前言
我这边先列举一些
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();
其他动画属性欣赏--pathData
android:propertyName="pathData",这个是加载在Path上动画,可以进行形状变化,有一点要注意,就是变化前的valueFrom必须跟结束的valueTo参数个数要相等,同时这些参数的类型要匹配。但是这玩意我只在android6.0上成功运行
来一个简单的正方形变成三角形的案例
首先画一个正方形
然后就是属性动画
再次强调参数的类型、数量是一致的
关联起来
运行代码
其他动画属性欣赏--trimPathEnd/trimPathStart
这个一般用在渐进显示画笔路径,1的时候是当前状态,0的时候是对里面状态,所以我们一般从头画到结束,会选择的动画分别为
还是之前正方形的SVG图片,看看效果
总结
SVG还有很多不兼容的地方,而且谷歌每次在更新的时候都有可能会改动之前的部分,所以这部分大家在使用过程中一定要多加留意,多多测试
参考资料
VectorDrawable-第二章
VectorDrawable-第三章
VectorDrawable-第四章
VectorDrawable 详解