android中利用矢量图VectorDrawable打造酷炫动画

1. 初识矢量图SVG与VectorDrawable

位图：有一个一个像素点组成的，放大会失真

矢量图：实际是一条path路径，每一个像素点是根据GPU实时计算出来，放大缩小不会失真

SVG和Vector的区别：

SVG，即Scalable Vector Graphics 矢量图，这种图像格式在前端中已经使用的非常广泛了，详见WIKI：https://en.wikipedia.org/wiki/Scalable_Vector_Graphics

Vector，在Android中指的是Vector Drawable，也就是Android中的矢量图，详见：https://developer.android.com/reference/android/graphics/drawable/VectorDrawable.html

SVG：通常在前端中使用，是一套语法规范，GPU根据该规范绘制图片。SVG中会有很多标签用于绘制图片，如：rest、circle、polyline、line、path等。

Vector:通常在Android中使用，只实现了SVG语法中的path标签，可以视为简单化的矢量图。

SVG在加载过程中，效率比较低，而android的Vector只采用了SVG的path标签，如此设计就是为了提高SVG加载的效率

首先我们看一下位图、SVG图和Vector图片之间的一个大小关系

同样一张图片，PNG格式的5.6K，而SVG的2.6K，经过压缩后的Vector格式的图片只有1.5K，这是实用Vector图片的第二个好处，除了支持随意放大缩小之外，还极大减小占用体积。

Vector常用语法了解：

Vector中利用不同字母来代表不同含义，实现图片的绘制，下面我们简单看一下这三个指令：

• M = moveto(M X,Y) ：将画笔移动到指定的坐标位置
• L = lineto(L X,Y) ：画直线到指定的坐标位置
• H = horizontal lineto(H X)：画水平线到指定的X坐标位置
• V = vertical lineto(V Y)：画垂直线到指定的Y坐标位置
• C = curveto(C X1,Y1,X2,Y2,ENDX,ENDY)：三次贝赛曲线
• S = smooth curveto(S X2,Y2,ENDX,ENDY)
• Q = quadratic Belzier curve(Q X,Y,ENDX,ENDY)：二次贝赛曲线
• T = smooth quadratic Belzier curveto(T ENDX,ENDY)：映射
• A = elliptical Arc(A RX,RY,XROTATION,FLAG1,FLAG2,X,Y)：弧线
• Z = closepath()：关闭路径

上面的指令看着都很好理解，了解了上面的指令用法，基本就可以绘制常见的SVG图片了。。。

下面看一个简单的例子 

<vector xmlns:android="http://schemas.android.com/apk/res/android"
        android:width="24dp"
        android:height="24dp"
        android:viewportWidth=“500.0"
        android:viewportHeight=“500.0">
    <path
        android:fillColor="#FF000000"
        android:pathData=“M100,100 L400,100 L100,400 Z"/>
</vector>

  Vector中，android:width和android:height就是图片在手机上显示的大小，android:viewportWidth和android:viewportHe