SVG 动画

CSS3 动画已经很强大，可是有些时候像是用一些灵活简单的效果。使用css的话代码并非很精简，处理较为复杂。配合 SVG的话，可让 Web 动效有更多的可能性。

实现一个购物袋的 loading 动效

以一个购物袋的 loading 动效为示例，一块儿来熟悉上手 SVG 动画。

其中旋转经过 CSS 来完成，可是旋转以后圆弧缩短变成笑脸的嘴巴须要借助 SVG 来实现。

步骤一： 声明 SVG 视窗

<svg width="100" height=“100”></svg>
复制代码

指定一个宽高都为 100 像素的区域，width="100" 和 width="100px" 是等价的，固然也可使用其余的合法单位，例如 cm、mm、em 等。

阅读器会设置一个默认的坐标系统，见下图：左上角为原点，其中水平（x）坐标向右递增，垂直（y）坐标向下递增。在没有指定的状况下，全部数值的默认单位都是像素。以下图

步骤二： 绘制购物袋

购物袋由两个部分组成，先画下面的主体：

<path d="M 20 40 L 80 40 L 80 90 A 10 10 90 0 1 70 100 L 30 100 A 10 10 90 0 1 20 90" style="fill: #e9e8ee;" />
复制代码

任何形状均可以使用路径元素画出，描述轮廓的数据放在它的 d 属性中。

1.样式中的 fill 用来设置填充色

2.路径数据由命令和坐标构成

指令	说明
M 20 40	表示移动画笔到 (20,40)
L 80 40	表示绘制一条线到 (80, 40)
A 10 10 90 0 1 70 100	绘制一个椭圆弧

圆弧命令以字母 A 开始，后面紧跟着 7 个参数，这 7 个参数分别用来表示： 1.椭圆的 x 半径和 y 半径 2.椭圆的 x 轴旋转角度 3.圆弧的角度小于 180 度，为 0；大于或等于 180 度，则为 1 4.以负角度绘制为 0，不然为 1 5.

终点的x、y坐标

接下来绘制购物袋上面的部分：

<path d="M 35 40 A 15 15 180 1 1 65 40" style="fill: none; stroke: #e9e8ee; stroke-width: 5;” />
复制代码

上面的部分是一个半圆弧，一样用路径来画出，固然也可使用基础形状来完成。

样式中的 stoke 和 stroke-width 分别用来设置描边色和描边的宽度。

步骤三： 绘制眼睛

使用基础形状，画两个小圆点。四个属性分别是位置坐标、半径和填充颜色。

<circle cx=“40" cy="60" r="2.5" style="fill: #fff;" />
<circle cx="60" cy="60" r="2.5" style="fill: #fff;" />
复制代码

步骤四： 绘制嘴巴

<circle cx="50" cy="70" r="15" style="fill: none; stroke: #fff; stroke-width: 5; stroke-linecap: round;transform: rotate(280deg); transform-origin: 50% 50%; stroke-dashoffset: -23; stroke-dasharray: 42, 95;”>
复制代码

嘴巴是一段圆弧，我绘制了一个圆，而后描边了其中的一段，而且作了一个旋转，来让它的角度处于正确的位置。

1.stroke-linecap：用来定义开放路径的终结,可选 round|butt|square
2.stroke-dasharray：用来建立虚线
3.stroke-dashoffset：设置虚线位置的起始偏移值，在下一个步骤里，它会和stroke-dasharray 一块儿用来实现动效...

步骤五： 给嘴巴部分添加动效

@keyframes mouth {
 0% {
  transform: rotate(-80deg);
  stroke-dasharray: 60, 95;
  stroke-dashoffset: 0;
 }
 40% {
  transform: rotate(280deg);
  stroke-dasharray: 60, 95;
  stroke-dashoffset: 0;
 }
 70%, 100% {
  transform: rotate(280deg);
  stroke-dashoffset: -23;
  stroke-dasharray: 42, 95;
 }
}
复制代码

动画分为两个部分：

1.圆弧旋转
2.旋转以后缩短变形
在一个循环里，最后留有 30% 的时间保持一个停留状态。

给眼睛添加动画

两只眼睛都是沿着圆弧运动 ，例如左眼，首先用一个路径来规定它的运动轨迹：

<path id="eyeright" d="M 40 60 A 15 15 180 0 1 60 60" style="fill: none; stroke-width: 0;" />
复制代码

而后使用 animateMotion 来设置动画：

<circle class="eye" cx="" cy="" r="2.5" style="fill: #fff;">
 <animateMotion   dur="0.8s"   repeatCount="indefinite"   keyPoints="0;0;1;1"   keyTimes="0;0.3;0.9;1"   calcMode="linear">   <mpath xlink:href="#eyeleft"/>  </animateMotion> </circle>
复制代码

1.dur：动画的时间
2.repeatCount：重复次数
3.keyPoints：运动路径的关键点
4.timePoints：时间的关键点
5.calcMode：控制动画的运动速率的变化，discrete | linear | paced|spline 四个属性可选
6.mpath：指定一个外部定义的路径

步骤7

将不一样部位的动画组合到一块儿

眼睛的动画是从嘴巴旋转完成开始，到嘴巴变形完成结束，所以和嘴巴的动画同样，设置了四个对应的关键时间点。 为了让衔接更顺畅，眼睛的动画开始比嘴巴变形开始稍微提早了一点点。

小结

SVG 在网页中的角色更像是相似图片同样的媒体对象，其动画也经常和 CSS 有关联，除了微软系的浏览器不支持以外，其兼容性仍是至关可观的。在平时工做过程当中，矢量图标的动画、轨迹动画特别适合使用 SVG 来实现。