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了