SVG动画简析

前言

SVG在前端中使用的一种语法规范，Vector在Android中使用而且只支持一种Path标签，主要是为了提高SVG的解析效率，减少SVG加载时候效率问题。相对于普通的静态jpg、png等图片来说，SVG能够实现缩放不失真，而且减小了drawable体积；但是SVG相对于静态图片需要更多的处理时间。通常SVG都是由设计提供，如果想自己编辑SVG图片可以使用在线SVG编辑器 http://editor.method.ac/。

SVG语法

Vector常用的命令：

命令	释义	使用方式
M	MoveTo	M x,y
L	LineTo	L x,y
Z	closePath	Z
H	Horizontal LineTo	H x,y
V	Vertical LineTo	V x,y
A	绘制弧线	A rx,ry,xrotation,flag1,flag2,x,y

以上就是一些基本的SVG命令，其中A的参数需要解释一下：
rx、ry：椭圆的半轴大小；xrotation：椭圆X轴与水平方向顺时针方向的夹角大小；flag1：只有两个值，1代表取大角度弧线，0代表取小角度弧线；flag2：只有两个值，确定绘制的方向，1代表顺时针，0代表逆时针；X、Y：终点坐标值。

有几点要注意：坐标轴为以(0,0)为中心，X轴水平向右，Y轴水平向下。所有指令大小写均可。大写绝对定位，参照全局坐标系；小写相对定位，参照父容器坐标系。指令和数据间的空格可以省略。同一指令出现多次可以只用一个。

在Android Studio的New->Vector Asset里可以直接添加一个SVG XML文件。

<vector xmlns:android="http://schemas.android.com/apk/res/android"
        android:width="24dp"
        android:height="24dp"
        android:viewportWidth="24.0"
        android:viewportHeight="24.0">
    <path
        android:fillColor="#FF000000"
        android:pathData="M19,9h-4V3H9v6H5l7,7 7,-7zM5,18v2h14v-2H5z"/>
</vector>

上面的android:width/android:height代表SVG真正展示的大小，android:viewportWidth/android:viewportHeight则代表将当前的SVG分成多少份，后面的M19，9这样的坐标值就是根据这个划分来确定位置。如果后面把width/height增加缩小那么SVG绘制出来的图像也不会失真。

Android中的SVG目前只支持path标签，fillColor代表填充色，pathData就是绘制SVG图像的指令序列。M19，9代表moveTo 19，9，前面把SVG图像分割成了24*24格，19，9就是将画笔移动到第19行第9列的位置，h-4也就是画横向直线。其实pathData就是指令+参数这样的基本元素持续不断的出现的数据，只有z没有参数，这表示完成了一条路径的绘制。根据上面的图像结果可以看出这个SVG绘制了两条路径，因而有两个z指令。

兼容性

目前只兼容minSDK >= 21的版本，最早几乎没有兼容性。AppCompat23.2静态Vector支持2.1+，动态Vector支持Android3.0+，几乎可以兼容大部分使用场景，现在的AppCompat基本上都能够支持SVG。要使用SVG动画效果，需要配置build.gradle文件，设置高度23的AppCompat依赖支持，如果还是有问题需要在使用的地方增加AppCompatDelegate.setCompatVectorFromResourcesEnabled(true)设置。

android {
    defaultConfig {
        vectorDrawables.useSupportLibrary = true
    }
}

compile 'com.android.support:appcompat-v7:23+'

static {
    AppCompatDelegate.setCompatVectorFromResourcesEnabled(true);
}

除了以上的适配方案外，还需要注意一下两点：
1. Path Morphing路径变换动画无法在低于L版本上使用
1. Path Interpolation在低于L版本系统不能使用自定义插值器

VectorDrawable使用

VectorDrawable能够很好的使用动画，如果想要在低于5.0版本上使用动画效果一定要使用ImageView/ImageButton的app:srcCompat属性来设置，直接使用android:src在低于5.0版本无法正确展示。不过笔者目前都是在6.0版本上测试的新动画效果，这里所有的演示都是用android:src属性来做。

下载图标