1. 绘制图形

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

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

命令	描述
`M x,y`	把画笔移动到`(x,y)`，要准备在这个地方画图了。
`L x,y`	直线连到`(x,y)`。
C x₁,y₁ x₂,y₂ x,y	绘制一个三次贝塞尔曲线，`(x,y)`使用控制点 (x₁,y₁)(x₂,y₂)
`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非常强大。