android 矢量图动画,Android-Animation-Set

Ⅷ. AnimatedVectorDrawable / 矢量图动画

要想彻底搞明白 Android 中的矢量动画，先理解一下关于 SVG 的相关知识还是很有必要的：

可以点击 SVG 讲解

或 Wiki 查看。

我们在这里只讲解 Android SVG 动画 相关的内容。相信大家一定看到过下图这个矢量动画：

Android SVG 动画

AnimatedVectorDrawable 类使用 ObjectAnimator 和 AnimatorSet 来促使 VectorDrawable 属性渐变，来生成动画效果。

通常可以在3个 XML 文件中定义添加动画的矢量图片：

在 res/drawable/ 中拥有元素的矢量图片；

在 res/drawable/ 中拥有元素且已添加动画的矢量图片；

在 res/anim/ 中拥有元素的一个或多个对象动画；

添加动画的矢量图片可为 以及 元素的属性添加动画。 元素定义路径集或子组，

而 元素则定义将绘制的路径。

完成一个 AnimatedVectorDrawable 通常需要定义三种不同类型文件：

(1). android.graphics.drawable.VectorDrawable 对应的 XML 文件，它以 为根。我们可能让 path

或 group 的属性进行动画，因此需要对进行动画的 path 或 group 命名。

android:height="64dp"

android:width="64dp"

android:viewportHeight="600"

android:viewportWidth="600" >

android:name="rotationGroup"

android:pivotX="300.0"

android:pivotY="300.0"

android:rotation="45.0" >

android:name="v"

android:fillColor="#000000"

android:pathData="M300,70 l 0,-70 70,70 0,0 -70,70z" />

(2). android.graphics.drawable.AnimatedVectorDrawable 对应的 XML 文件，它以 为根。

这里定义需动画的 path 或 group 的 ，的 animation 属性指定为一般的 ObjectAnimator 或

AnimatorSet 对应的 XML。

android:drawable="@drawable/vectordrawable" >

android:name="rotationGroup"

android:animation="@anim/rotation" />

android:name="v"

android:animation="@anim/path_morph" />

(3). android.graphics.drawable.Animator 对应的 XML 文件，它以 ， 等为根，

对应 AnimatorSet 和 ObjectAnimator。

android:duration="6000"

android:propertyName="rotation"

android:valueFrom="0"

android:valueTo="360" />

或

android:duration="3000"

android:propertyName="pathData"

android:valueFrom="M300,70 l 0,-70 70,70 0,0 -70,70z"

android:valueTo="M300,70 l 0,-70 70,0 0,140 -70,0 z"

android:valueType="pathType"/>

1. VectorDrawable

VectorDrawable 一般是以 为根标签定义的 XML 文件，、、、

元素都有各自可以播放动画的属性，查阅 SDK/docs/reference/android/graphics/drawable/VectorDrawable.html

你会找到每种元素到底有那些属性，以便针对这些属性播放特定的动画。比如 trimPathStart 和 trimPathEnd 能够让已画的 path

以百分比的形式渐变出现。

定义这个矢量图

android:name

矢量图的名字

android:width

矢量图的内部(intrinsic)宽度,支持所有Android系统支持的尺寸，通常使用dp

android:height

矢量图的内部(intrinsic)高度

android:viewportWidth

矢量图视图的宽度，视图就是矢量图path路径数据所绘制的虚拟画布

android:viewportHeight

矢量图视图的高度

android:tint

矢量图的tint颜色。默认是没有tint颜色的

android:tintMode

矢量图tint颜色的Porter-Duff混合模式，默认值为src_in。(src_in,src_over,src_atop,add,screen,multiply)

android:autoMirrored

设置当系统为RTL(right-to-left)布局的时候，是否自动镜像该图片。比如阿拉伯语。

android:alpha

该图片的透明度属性

设置路径做动画的关键属性的

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值来指定的。

路径

android:name

定义该path的名字，这样在其他地方可以通过名字来引用这个路径

android:pathData

和SVG中d元素一样的路径信息。

android:fillColor

定义填充路径的颜色，如果没有定义则不填充路径

android:strokeColor

定义如何绘制路径边框，如果没有定义则不显示边框

android:strokeWidth

定义路径边框的粗细尺寸

android:strokeAlpha

定义路径边框的透明度

android:fillAlpha

定义填充路径颜色的透明度

android:trimPathStart

从路径起始位置截断路径的比率，取值范围从0到1；注意从一半到起始动画为from-0.5-to-0

android:trimPathEnd

从路径结束位置截断路径的比率，取值范围从0到1；注意从一半到结束动画为from-0.5-to-1.0

android:trimPathOffset

设置路径截取的范围，取值范围从0到1

android:strokeLineCap

设置路径线帽的形状，取值为 butt, round, square.

android:strokeLineJoin

设置路径交界处的连接方式，取值为 miter,round,bevel.

android:strokeMiterLimit

设置斜角的上限

定义当前绘制的剪切路径。注意，clip-path 只对当前的 group 和子 group 有效

android:name

定义clip-path的名字

android:pathData

android:pathData的取值一样。

根元素 上有两个宽高设置，其中 viewport 是指矢量图里面的画布大小，而 android:width和android:height 是指该矢量图所对应的 VectorDrawable 的大小。

关于 tintMode:

在5.0以后我们就可以为 bitmap 或者是 9-patch 定义一个透明的遮罩。BitmapDrawable 和 NinePatchDrawable 使用 setTint() 方法。

而在 xml 文件中使用 android:tint 和 android:tintMode 这两个属性。

注意点：使用 android:tint 指定颜色时一定要带透明度。#50ff00ff 也就是说是8位的色值而不是6位的。

属性说明:

android:tint： 设置的是颜色

android:tintMode：设置的是类型 (src_in,src_over,src_atop,add,screen,multiply)

类型说明：

src_in 只显示设置的遮罩颜色。 相当于遮罩在里面。

src_over 遮罩颜色和图片都显示。相当于遮罩在图片上方。(特别是色值带透明度的)

src_atop 遮罩在图片上方

multiply 混合色遮罩

screen

add 混合遮罩，drawable 颜色和透明度。

例:

android:height="64dp"

android:width="64dp"

android:viewportHeight="600"

android:viewportWidth="600" >

android:name="rotationGroup"

android:pivotX="300.0"

android:pivotY="300.0"

android:rotation="45.0" >

android:name="v"

android:fillColor="#000000"

android:pathData="M300,70 l 0,-70 70,70 0,0 -70,70z" />

##　2. AnimatedVectorDrawable

我们还可以用 AnimatedVectorDrawable　给矢量图添加动画。AnimatedVectorDawable　可以实现一些很特别的效果，对　VectorDrawable　里的　pathData　做动画，

可以从一个图形渐变到另一个图形，比如　Material Design　里的　toolbar icon；对　trimPathStart、trimPathEnd　做动画，可以得到图形的绘制轨迹。

AnimatedVectorDrawable　通过　ObjectAnimator　或　AnimatorSet　对　VectorDrawable　的某个属性作一个矢量资源的动画。

你通常在三个　XML　文件中定义矢量资源的动画载体：

元素的矢量资源，在 res/drawable/(文件夹)

元素的矢量资源动画，在 res/drawable/(文件夹)

元素的一个或多个对象动画器，在 res/animator/(文件夹)

矢量资源动画能创建 和 元素属性的动画。 元素定义了一组路径或子组，并且 元素定义了要被绘制的路径。

当你想要创建动画时去定义矢量资源，使用 android:name 属性分配一个唯一的名字给组和路径，这样你可以从你的动画定义中查询到它们。

从 API-25 开始，AnimatedVectorDrawable 运行在 RenderThread (相反地，早期 API 是运行在 UI 线程)。这也就是说 AnimatedVectorDrawable 在UI线程繁忙时也能保持流畅运行。

如果UI线程没有反应，RenderThread 会持续动画计算，直到UI线程有能力推进下一帧。因此，没有办法准确地同步 RenderThread-enabled 的

AnimatedVectorDrawable 和 UI 线程中的 Animations。此外，Animatable2.AnimationCallback.onAnimationEnd(drawable)

肯定会在 RenderThread 渲染完 AnimatedVectorDrawable 最后一帧时被调用。

AnimatedVectorDrawable 可以被定义在三个XML文件或一个XML中。

定义在一个文件中:

定义在 3 个文件中

animated-vector 代码(drawable 是对应的 vector 矢量图资源)

android:drawable="@drawable/vectordrawable">

android:name="rotationGroup"

android:animation="@animator/rotation"/>

android:name="v"

android:animation="@animator/path_morph"/>

rotation 代码

xmlns:android="http://schemas.android.com/apk/res/android"

android:duration="6000"

android:propertyName="rotation"

android:valueFrom="0"

android:valueTo="360"/>

path_morph 代码

xmlns:android="http://schemas.android.com/apk/res/android"

android:duration="3000"

android:propertyName="pathData"

android:valueFrom="M300,70 l 0,-70 70,70 0,0 -70,70z"

android:valueTo="M300,70 l 0,-70 70,0 0,140 -70,0 z"

android:valueType="pathType"/>

AnimatedVectorDrawable 主要方法有：

void draw(Canvas canvas)

//Draws the AnimatedVectorDrawable into the given canvas.

int getOpacity()

//Return the opacity/transparency of this Drawable.

int getAlpha()

//For API 25 and later, AnimatedVectorDrawable runs on RenderThread.

void setAlpha(int alpha)

//Specify an alpha value for the drawable.

boolean setVisible(boolean visible, boolean restart)

//Set whether this Drawable is visible.

int getIntrinsicHeight()

//Returns the drawable's intrinsic height.

int getIntrinsicWidth()

//Returns the drawable's intrinsic width.

Drawable mutate()

//Make this drawable mutable.

boolean isRunning()

//Indicates whether the animation is running.

void reset()

//Resets the AnimatedVectorDrawable to the start state as specified in the animators.

void start()

//Starts the drawable's animation.

void stop()

//Stops the drawable's animation.

void clearAnimationCallbacks()

//Removes all existing animation callbacks.

boolean unregisterAnimationCallback(Animatable2.AnimationCallback callback)

//Removes the specified animation callback.

代码中使用：

mImageView.setImageResource(R.drawable.animated_vector);

Drawable drawable = mImageView.getDrawable();

if (drawable instanceof Animatable) {

((Animatable) drawable).start();

}

附录