svg animation动画应用

最近在做首页动画的时候，引入有背景色的mp4动图时，动图的背景色不能很好的融入相同背景色的不同浏览器和不同显示器，出现了下图这种尴尬的情况：

动图的边界始终有根分界线，即使调整了背景色适应这个边界，也总是会在不同的显示器中显示出不同程度的分界线。

于是我决定用代码实现整个动图。

制作这样一套动图，只靠前端攻城狮是有点费劲的，毕竟需要很多线图的绘制，没有专业的UI支持很难设计出标准漂亮的动图。

拿我这次做的动图来说

整体由css操作png和svg搭建流转路线构成

首先需要UI同学把整体布局，距离、素材规划出来

然后就是根据整体布局和距离把素材扑上去

最最重要的是 svg绘制 的流动线路

1.svg path

这种线路图，UI同学一般绘制完都是向下面这样的：

<path class="st0" d="M208,224.6c-0.5,0-1-0.1-1.5-0.4c-0.9-0.5-1.5-1.5-1.5-2.6l-0.6-36.3c0-0.6,0.4-1,1-1c0,0,0,0,0,0
    c0.5,0,1,0.4,1,1l0.6,36.3c0,0.5,0.4,0.8,0.5,0.9c0.2,0.1,0.6,0.2,1,0l67.5-40.3c0.4-0.3,0.5-0.7,0.5-0.9c0-0.2,0-0.6-0.5-0.9
    l-82.9-49.8c-0.9-0.5-1.5-1.5-1.5-2.6c0-1.1,0.6-2,1.5-2.6l98.5-58.6c0.4-0.3,0.5-0.7,0.5-0.9c0-0.2-0.1-0.6-0.5-0.9l-50-29.2
    c-0.9-0.5-1.5-1.5-1.5-2.5c0-1,0.5-2,1.4-2.6l9.4-6c0.5-0.3,1.1-0.2,1.4,0.3s0.2,1.1-0.3,1.4l-9.4,6c-0.4,0.3-0.5,0.7-0.5,0.9
    s0.1,0.6,0.5,0.8l50,29.2c0.9,0.5,1.5,1.5,1.5,2.6c0,1.1-0.5,2-1.5,2.6l-98.5,58.6c-0.4,0.3-0.5,0.7-0.5,0.9c0,0.2,0,0.6,0.5,0.9
    l82.9,49.8c0.9,0.5,1.5,1.5,1.5,2.6c0,1.1-0.5,2-1.5,2.6l-67.5,40.3C209.1,224.5,208.5,224.6,208,224.6z"/>
<path class="st0" d="M324.9,158.7c-0.2,0-0.4,0-0.5-0.1l-64.2-39.3c-0.9-0.5-1.4-1.5-1.4-2.6c0-1.1,0.5-2,1.5-2.6l99-59.4
    c0.4-0.3,0.5-0.7,0.5-0.9s0-0.6-0.5-0.9l-71.3-42.7c-0.5-0.3-0.6-0.9-0.3-1.4s0.9-0.6,1.4-0.3l71.3,42.7c0.9,0.5,1.5,1.5,1.5,2.6
    s-0.5,2-1.5,2.6l-99,59.4c-0.4,0.3-0.5,0.7-0.5,0.9c0,0.2,0,0.6,0.5,0.9l64.2,39.3c0.5,0.3,0.6,0.9,0.3,1.4
    C325.6,158.6,325.2,158.7,324.9,158.7z"/>

总之就是很长很乱的一段。。。

这是因为AI绘制svg的时候每一条线都是由两条线和一些弯曲的规则（贝塞尔曲线）组成。建议直接用UI同学给的svg编辑器打开后直接引用，因为”贝塞尔曲线“真的不是随便就能Hold住的。。。

下面附上svg path指令

对比上面的代码可以看出路径d由 M作为路径起始坐标点开始 由 z结束这段闭合曲线 。

直线由L或者l绘制，分别代表绝对路径和相对路径

曲线由贝塞尔曲线规则绘制

C(C x1, y1, x2, y2, x,y )

为了更方便展现出贝塞尔的奥义，举下图说明：

然鹅，真正使用指令徒手敲代码画图的时候才真正发现，这就是个坑啊。。。毕竟我们还要测量距离、像素，找起点、终点，最头疼的是还要用贝塞尔绘制折线曲率。。。有这时间还不如去学学UI了 当然，无权阻止大神们的探索。。。

所以踩了这些坑的我还是直接用了UI绘制好的svg

绘制

• 直接上path

<svg>
    <path />
<svg>

首先这样肯定是可以绘制出线的，但是我们的目的不光是要画出线，还要在线上加动画效果

动画

我是用一小段渐变色的流动来表示数据的流动，所以首先需要给线段-- 渐变色

在SVG中，有两种主要的渐变类型：

• 线性渐变（LinearGradient）
• 放射性渐变|径向渐变（RadialGradient）

区别在于：

使用径向渐变可以定义渐变中心原点的坐标，半径，更方便加在线上。

直接上代码：

<radialGradient cx="194.1" cy="128.9" r="20" gradientUnits="userSpaceOnUse" id="linearGradientCordPath1">
  <stop stop-color="#ffff00" offset="0%"></stop>
  <stop stop-color="#ffff00" offset="25%"></stop>
  <stop stop-color="#22A1FF" offset="100%"></stop>
</radialGradient>

渐变的颜色范围可由两种或多种颜色组成。每种颜色通过一个 <stop> 标签来规定。offset属性用来定义渐变的开始和结束位置。大致效果如下：

然后我们需要让这段渐变的颜色 动起来

<animation>

<animate attributeName="cx" values="252.3;242.6;292.6;194.1;277;205;205.4;" dur="3s" calcMode="linear" repeatCount="indefinite"></animate>
<animate attributeName="cy" values="25;34.1;68.5;128.9;183.9;221.6;184.3;" dur="3s" calcMode="linear" repeatCount="indefinite"></animate>

attributeName要变化的元素属性名称分别为x轴和y轴方向，values是每一个经过的关键值坐标点，可以直接用Adobe AI打开svg在线上直接拿到关键点的坐标分别写入cx,cy的value中，调整dur时间，加上indefinite循环：