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 | <path> | float | 0 | 1 | 定义填充路径颜色的透明度 |
| android:fillColor | <path> | integer | - - - | - - - | 填充颜色 |
| android:strokeAlpha | <path> | float | 0 | 1 | 定义路径边框的透明度 |
| android:strokeColor | <path> | integer | - - - | - - - | 定义绘制路径边框，如果没有定义则不显示边框 |
| android:strokeWidth | <path> | float | 0 | - - - | 定义路径边框的粗细尺寸 |
让我们看看这一切是如何运作的一个例子。假设我们想为音乐应用程序创建播放，暂停和录制图标。我们可以使用单个代表每个图标。
让我们一个步骤一个步骤开始
1. 先获取到相关svg图片，学习他们的路径是怎么做的
在 https://material.io/resources/icons/?search=play&icon=play_arrow&style=baseline 搜索play下载svg格式的图片。
然后打开https://shapeshifter.design/ ，导入svg图片
在我们讲解这个路径意思之前，我们先在项目中创建3个图片
<vector
xmlns:android="http://schemas.android.com/apk/res/android"
android:width="48dp"
android:height="48dp"
android:viewportHeight="12"
android:viewportWidth="12">
<!-- 播放图片. -->
<path
android:fillColor="#FF9800"
android:pathData="M 4,2.5 L 4,9.5 L 9.5,6 Z"/>
<!-- 暂停图片. -->
<path
android:pathData="M 4,2.5 L 4,9.5 M 8,2.5 L 8,9.5"
android:strokeColor="#0F9D58"
android:strokeWidth="2"/>
<!-- 圆形图片. -->
<path
android:fillColor="#DB4437"
android:pathData="M 2,6 C 2,3.8 3.8,2 6,2 C 8.2,2 10,3.8 10,6 C 10,8.2 8.2,10 6,10 C 3.8,10 2,8.2 2,6"/>
</vector>
播放和圆形图标分别path用橙色和红色颜色填充。另一方面，暂停图标是path带有绿色笔触颜色和笔划宽度为2点宽度的描边。下图显示了path在12x12网格内执行的每个绘图命令：
路径命令：
- M 4,2.5 ：把笔移到x轴点4，y轴2.5
- L 4,9.5 ：画直线一直到x轴点4，y轴9.5
- L 9.5,6 ：画直线一直到x轴点9.5，y轴6
- Z ：闭合到开头的笔点
路径命令（这个跟上面的差不多，不同点就是有2个M）：
- M 4,2.5
- L 4,9.5
- M 8,2.5
- L 8,9.5
路径命令：
- M 2,6
- C 2,3.8 3.8,2 6,2
- C 8.2,2 10,3.8 10,6
- C 10,8.2 8.2,10 6,10
- 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地址
