svg Vector 章节（1）：绘制图形

1. 绘制图形

在我们开始创建动画图标之前，我们首先需要了解它们是如何绘制的。在Android中，我们将使用相对较新的VectorDrawable类创建每个图标。VectorDrawables在概念上类似于网络上的SVG：它们允许我们通过将每个图标表示为一系列称为paths 的线条和形状来创建，她优点可直接通过数值修改大小，并且 与密度无关。每个路径的形状由一系列绘图命令确定，使用SVG路径数据规范的命令以空格/逗号分隔的字符串表示。

规范定义了许多不同类型的命令，其中一些命令总结在下表中：

命令	描述
M x,y	把画笔移动到(x,y)，要准备在这个地方画图了。
L x,y	直线连到(x,y)。
C x1,y1 x2,y2 x,y	绘制一个三次贝塞尔曲线，(x,y)使用控制点 (x1,y1)(x2,y2)
Z	通过将一条线绘制回当前子路径的开头来关闭路径。

所有path的都有两种形式：filled 或 stroked。如果路径使用filled填满，其形状的内部将被绘制。如果描边路径使用stroked，则沿着其形状轮廓应用颜色。这两种类型的paths都有自己的一组动画属性，可以进一步修改它们的外观：

Property name	Element type	Value type	Min	Max	解释
android:fillAlpha		float	0	1	定义填充路径颜色的透明度
android:fillColor		integer	- - -	- - -	填充颜色
android:strokeAlpha		float	0	1	定义路径边框的透明度
android:strokeColor		integer	- - -	- - -	定义绘制路径边框，如果没有定义则不显示边框
android:strokeWidth		float	0	- - -	定义路径边框的粗细尺寸

让我们看看这一切是如何运作的一个例子。假设我们想为音乐应用程序创建播放，暂停和录制图标。我们可以使用单个代表每个图标。

让我们一个步骤一个步骤开始

1. 先获取到相关svg图片，学习他们的路径是怎么做的

在 https://material.io/resources/icons/?search=play&icon=play_arrow&style=baseline 搜索play下载svg格式的图片。
然后打开https://shapeshifter.design/ ，导入svg图片

导入后的图片

在我们讲解这个路径意思之前，我们先在项目中创建3个图片

播放和圆形图标分别path用橙色和红色颜色填充。另一方面，暂停图标是path带有绿色笔触颜色和笔划宽度为2点宽度的描边。下图显示了path在12x12网格内执行的每个绘图命令：

播放图片

路径命令：

1. M 4,2.5 ：把笔移到x轴点4，y轴2.5
2. L 4,9.5 ：画直线一直到x轴点4，y轴9.5
3. L 9.5,6 ：画直线一直到x轴点9.5，y轴6
4. Z ：闭合到开头的笔点

暂停图片

路径命令（这个跟上面的差不多，不同点就是有2个M）：

1. M 4,2.5
2. L 4,9.5
3. M 8,2.5
4. L 8,9.5

圆形图片

路径命令：

1. M 2,6
2. C 2,3.8 3.8,2 6,2
3. C 8.2,2 10,3.8 10,6
4. C 10,8.2 8.2,10 6,10
5. C 3.8,10 2,8.2 2,6

关于用到的C命令 三次贝塞尔曲线可以参考此博客了解三次贝塞尔曲线

或许你看这个图片看懂三次贝塞尔曲线了吗

在上面每个图中，左上角的坐标为(0,0)，右下角的坐标为(12,12)。每个图标的源代码都可以在GitHub上找到，这个系列每篇文章会在后面提到demo的入口

就像开头我提到的那样，VectorDrawables 的优点之一是它们无视密度，这意味着它们可以在任何设备上随意缩放而不会降低质量。这最终既方便又高效：开发人员不再需要为每个屏幕密度导出不同大小的PNG的繁琐过程，从而又可以减小APK的大小。但是，在我们的例子中，我们要使用VectorDrawable 的原因是，我们可以path使用AnimatedVectorDrawable该类为他们设置动画。 AnimatedVectorDrawable是将VectorDrawable与ObjectAnimator 连接的桥梁：VectorDrawable为每个动画path（或group的path）分配一个唯一的名称，并将AnimatedVectorDrawable这些名称中的每一个映射到其对应的名称ObjectAnimator秒。
正如我们将在后面系列看到的那样，对容器中的各个元素进行动画处理的能力VectorDrawable非常强大。

上面有关代码：
demo1地址