AnimatedVectorDrawable 详解

作者: rain 分类: 移动 发布时间: 2016-01-08 23:39 6 条评论

前面我们了解了 VectorDrawable 的内容。VectorDrawable 是用来绘制静态图的,而 AnimatedVectorDrawable 顾名思义就是针对 VectorDrawable 来做动画的。通过 AnimatedVectorDrawable 可以对图标做出各种有意义的动画效果。

AnimatedVectorDrawable 属性

AnimatedVectorDrawable 通过 ObjectAnimatorAnimatorSet 来对 VectorDrawable 的属性做动画,从而实现各种动画效果。
为了便于管理代码,AnimatedVectorDrawable 通常定义在三个分开的 xml 文件中。

首先用一个 xml 文件来定义一个 VectorDrawable 静态矢量图,只能针对 group 和 path 属性做动画, 为了引用这些属性的数据,每个属性需要一个唯一的名字。如果 不需要做动画,则 group 和 path 属性可以没有名字。
例如 用来定义一个倒三角形的 vector xml文件:
res / drawable / triangle.xml

然后用另外一个 xml 文件来定义 ObjectAnimator 或者 AnimatorSet 。这里面定义了需要针对哪个属性做动画,以及动画的各种设置,例如 动画的时间、动画开始的值和结束的值。

例如 旋转360度的 ObjectAnimator 定义:
res / animator / rotation.xml

AnimatedVectorDrawable 强大的一点是可以对 path 做动画,唯一的要求是 两个 path 的数据命令要一样,例如 下面是一个绘制矩形的命令:
android:pathData=”M 100 100 L 300 100 L 300 300 L 100 300z”
里面包含了
* M 100 100
* L 300 100
* L 300 300
* L 100 300
* z
5个命令,
如果把这个矩形变为一个前面所述的三角形 android:pathData=”M 100 100 L 300 100 L 200 300 z”, 这个三角形包含如下命令:
* M 100 100
* L 300 100
* L 200 300
* z

三角形只有4个命令, 而 矩形有 5 个命令,这样是无法做 path 动画的。 需要补充一个命令,我们可以在 z 之前添加一个原地绘制的命令
* M 100 100
* L 300 100
* L 200 300
* ** L 200 300 **
* z

现在两个命令个数一样了, 就可以针对 path 做动画了:
res / animator / path.xml

有了 VectorDrawable 和 ObjectAnimator 或者 AnimatorSet,就可以通过这两个来构成 AnimatedVectorDrawable 的 xml 文件了。该文件位于 drawable 目录:
res / drawable / animated_path.xml

animated-vector 通过 android:drawable=”@drawable/triangle” 来指定要对那个 VectorDrawable 做动画, 里面通过 target 元素来定义每个动画, target 中通过 android:name 指定做动画的 group 或者 path ,android:animation为具体的 ObjectAnimator 或者 AnimatorSet 定义。

这样就最终组成了一个 AnimatedVectorDrawable 对象。然后可以直接在可以使用 drawable 的地方使用该 AnimatedVectorDrawable。

注意:AnimatedVectorDrawable 并不会自动播放,需要在 代码中来调用 start 函数来播放该动画。例如:

本文出自 云在千峰,转载时请注明出处及相应链接。

本文永久链接: http://blog.chengyunfeng.com/?p=835

Ɣ回顶部