android svg路径动画,五、Android SVG动画

SVG的全称是Scalable Vector Graphics(可缩放矢量图形)，它不会因为图像放大而失真，且占用内存小，同时搭配Path动画，能够实现一些意想不到的效果。

Android中的SVG图像又叫Vector图像，它是对原生的SVG进行了简化，利用path来实现绘制。

1、VetcorDrawable

1.1、Vector图形制作

我们可以在svg编辑网页上制作好SVG图像，然后通过Android Studio中的Vector Asset Studio，将SVG转换成Vector。

转换后代码格式大致如下：

android:width="200dp"

android:height="100dp"

android:viewportWidth="100"

android:viewportHeight="50">

android:name="bar"

android:pathData="M50,23 L100,25"

android:strokeWidth="2"

android:strokeColor="@android:color/darker_gray" />

1.2、vector标签属性

标签

含义

width

图形的具体宽度

height

图形的具体高度

viewportWidth

图形横向被划分的个数

viewportHeight

图形纵向被划分的个数

用于vector图形是矢量图，即无限放大也不会失真，所以要指定其宽高。

同时图形中的坐标值，也不能依据宽高的具体值大小，只是就引入了划分比例大小，即viewportXXX。

举例说明：本例中，将大小为200dp x 100dp的图像，划分出100 x 50个小份，每份尺寸为2dp x 2dp；而android:pathData属性中的坐标值，就是相对于这100 x 50个小份所决定的。如坐标(50,50)，就对应本图形底部中点。

1.3、path标签属性

1、常用属性

path标签具有以下几个常用属性。

标签

含义

name

声明一个标记，类似于ID，便于对其做动画的时候顺利地找到该节点

strokeWidth

画笔的宽度

fillColor

填充颜色

fillAlpha

填充颜色的透明度

strokeColor

描边颜色

strokeWidth

描边宽度

strokeAlpha

描边透明度

strokeLineJoin

折线拐角形状，取值有miter(结合处为锐角)、round(结合处为圆弧)、bevel(结合处为直线)

strokeLineCap

画出线条的端点的形状(线帽)，取值有butt(无线帽)、round(圆形线帽)、square(方形线帽)

strokeMiterLimit

当两条线段以锐角相交的时候，斜面可能很长，视觉上显的不协调。

1、本属性为斜面的长度设置了一个上限，当超出这个上限，它就变成斜角。只在strokeLineJoin为miter时有效。

2、实际上，它表示斜面长度和线条长度的比值，默认值是10，意味着一个斜面的长度不应该超过线条宽度的10 倍。

2、 android:trimPathStart

指定路径的开始位置，取值为0～1。当取值为0时，表示从头部开始;当取值为1时，整条路径不可见。

3、 android:trimPathEnd

指定路径的结束，取值为0～1。当取值为0时，整条路径不可见，当取值为1，整条路径显示完整。当截取的路径超出范围时，会从开始位置继续累计。

4、 android:trimPathOffset

指定结果路径的偏移距离，取值为0～1。当取值为0时，不进行位移，当取值为1，位移整条路径长度。

5、android:pathData

指定图形内容，通过一系列指令和坐标，自动生成对应的图像。

1.4、Vector的常用语法

即Vector中path标签下android:pathData属性里字符串的语法。格式如下：

符号

使用

解释

M = moveto

M X,Y

将画笔移动到指定的坐标位置

L = lineto

L X,Y

画直线到指定的坐标位置

H = horizontal lineto

H V

水平绘制直线到X坐标

V = vertical lineto

V Y

垂直绘制直线到Y坐标

Q = quadratic Belzier curve

Q X,Y,ENDX,ENDY

二次贝塞曲线

T = smooth quadratic Belzier curve

T ENDX,ENDY

二次贝塞曲线

将上一指令的终点作为贝塞尔曲线的起点

C = curveto

C X1,Y1,X2,Y2,ENDX,ENDY

三次贝塞曲线

S = smooth curveto

S X2,Y2,ENDX,ENDY

三次贝塞曲线

将上一指令的终点作为贝塞尔曲线的起点

A = elliptical Arc

A RX,RY,XROTATION,FLAG1,FLAG2,X,Y

弧线

Z = closepath

Z

关闭路径

其中A指令绘制一条弧线，各个参数含义如下：

参数

含义

RX,RY

椭圆的半轴大小

XROTATION

椭圆的X轴和水平方向顺时针方向的夹角

FLAG1

只有两个值，1表示大角度弧度，0表示小角度弧度

FLAG2

只有两个值，确定从起始点到终点的方向，1表示顺时针，О表示逆时针

在使用上面的指令时，需要注意以下几点。

1、坐标轴以(0,0)为中心，X轴水平向右，Y轴水平向下。

2、所有指令大小写均可。大写绝对定位，参照全局坐标系；小写相对定位，参照父容器坐标系。

3、指令和数据间的空格可以省略。

4、同一指令出现多次可以只用一个。

1.5、group标签

group标签主要是将同一个Vector文件中，多个Path组成的图像当做一个整体，便于动画执行。包含以下属性：

标签

含义

name

组的名字，用于与动画相关联

rotation

指定该组图像的旋转度数

pivotX

定义缩放和旋转该组时的X参考点，该值是相对于vector 的 viewport值来指定的

pivotY

定义缩放和旋转该组时的Y参考点，该值是相对于vector 的 viewport值来指定的

scaleX

指定该组X轴缩放大小

scaleY

指定该组Y轴缩放大小

translateX

指定该组沿X轴平移的距离

translateY

指定该组沿Y轴平移的距离

1.6、使用VetcorDrawable

gradle文件中配置：

android {

defaultConfig {

vectorDrawables.useSupportLibrary = true

}

}

ImageView or ImageButton

app:srcCompat="@drawable/vector_image"

Button

通过selector来进行设置，并开启下面的设置

static{

AppCompatDelegate.setCompatVetcorFromResourcesEnabled(true);

}

2、AnimatedVectorDrawable

AnimatedVectorDrawable与VectorDrawable名字上多了一个Animated，这也是它们自己最大的区别，AnimatedVectorDrawable 拥有执行动画的能力。

2.1、AnimatedVectorDrawable使用

1、创建vector图片

android:width="24dp"

android:height="24dp"

android:viewportWidth="24.0"

android:viewportHeight="24.0">

android:fillColor="#8C9EFF"

android:pathData="M9.01,14L2,14v2h7.01v3L13,15l-3.99,-4v3z" />

android:fillColor="#8C9EFF"

android:pathData="M14.99,13v-3L22,10L22,8h-7.01L14.99,5L11,9l3.99,4z" />

2、创建左右动画

左箭头动画

android:duration="1000"

android:interpolator="@android:interpolator/anticipate_overshoot"

android:propertyName="translateX"

android:repeatCount="infinite"

android:repeatMode="reverse"

android:valueFrom="0"

android:valueTo="10"

android:valueType="floatType"/>

右箭头动画

android:duration="1000"

android:interpolator="@android:interpolator/anticipate_overshoot"

android:propertyName="translateX"

android:repeatCount="infinite"

android:repeatMode="reverse"

android:valueFrom="0"

android:valueTo="-10"

android:valueType="floatType"/>

3、配置动画粘合剂

android:drawable="@drawable/ic_vector_arrows">

android:name="left"

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

android:name="right"

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

4、为ImageView设置appCompat

android:layout_width="100dp"

android:layout_height="100dp"

android:onClick="animatorStart"

app:srcCompat="@drawable/anim" />

5、使用动画

public void animatorStart(View view) {

ImageView imageView = (ImageView) view;

AnimatedVectorDrawable drawable = (AnimatedVectorDrawable)imageView.getDrawable();

drawable.start();

}

我们此时会发现，创建一个Vector动画步骤也太繁琐了吧，没关系，谷歌工程师早就帮我们想好了解决办法，通过合并资源，轻松完成上面前3步。

2.2、轨迹动画

这是一种比较常见的动画，比如以下几种(请原谅我盗图)：

451f72f752ee777e3df07be3223b47ea.gif

19101361568977583839781636.gif

看起来是不是很炫酷，其实实现起来很简单：

将objectAnimator动画文件android:valueType属性设置为floatType，android:propertyName属性设置为trimPathStart，trimPathEnd，trimPathOffset之一，并指定android:valueTo和android:valueTo。

当动画执行后，会不断修改上述3个属性的值，以实现各种轨迹动画效果。这3个属性含义上文已经解释，这里就不再提及。

知道了上面的内容，就能很好理解属性动画的定义产生的不同效果了：

1、使用trimPathStart属性，valueFrom:0，valueTo:1

线条从起点缩短到终点，即初始截断部分是0%，从起点开始逐渐扩大到终点，达到100%。

2、使用trimPathStart属性，valueFrom:1，valueTo:0

线条从终点增长到起点，即初始截断部分是100%，从终点开始逐渐缩小到起点，达到0%。

3、使用trimPathEnd属性，valueFrom:0，valueTo:1

线条从起点增长到终点，即初始截断部分是100%，从起点开始逐渐缩小到终点，达到0%。

4、使用trimPathEnd属性，valueFrom:1，valueTo:0

线条从终点缩短到起点，即初始截断部分是0%，从终点开始逐渐扩大到起点，达到100%。

2.3、路径动画

路径动画，相对来说就麻烦一下，但麻烦的在于制作，不是使用，使用时，只需将propertyName设置为pathData，valueType设置为pathType即可。Android就可以从一种图像变成另一种图像。

3、兼容性

3.1、VectorDrawable

Android L，只兼容minSDK>=21的版本

Gradle Plugin 1.5

设备版本>=21——使用Vector

设备版本<21——将Vector转换为png

AppCompat23.2后，VectorDrawable几乎可以兼容大部分使用场景

静态Vector支持Android2.1+

动态Vector支持Android3.0+

3.1、AnimatedVectorDrawable兼容性

1、向下兼容问题

Path Morphing

路径变换动画，在Android pre-L版本下是无法使用的

Path Interpolation

路径插值器，在Android pre-L版本下只能使用系统的插值器，不能自定义

2、向上兼容问题

Path Morphing

路径变换动画，在Android L版本以上需要使用代码配置