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 <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网格内执行的每个绘图命令:

播放图片

路径命令:

  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是将VectorDrawableObjectAnimator 连接的桥梁:VectorDrawable为每个动画path(或grouppath)分配一个唯一的名称,并将AnimatedVectorDrawable这些名称中的每一个映射到其对应的名称ObjectAnimator秒。
正如我们将在后面系列看到的那样,对容器中的各个元素进行动画处理的能力VectorDrawable非常强大。

上面有关代码:
demo1地址

推荐阅读更多精彩内容