anime.js实现logo动画

之前无聊浏览特效的时候，发现了anime.js的logo动画特效，于是也想整个自己的logo动画。
着手coding的时候，发现没那么简单(｡•ˇ‸ˇ•｡)

image

第一个难点 SVG

之前接触到的SVG一直都是“不失真的矢量图”这么一个概念，但是这次的特效需要用到svg的<path>标签

w3c介绍：

<path> 标签用来定义路径。
下面的命令可用于路径数据：
    M = moveto
    L = lineto
    H = horizontal lineto
    V = vertical lineto
    C = curveto
    S = smooth curveto
    Q = quadratic Belzier curve
    T = smooth quadratic Belzier curveto
    A = elliptical Arc
    Z = closepath
注释：以上所有命令均允许小写字母。大写表示绝对定位，小写表示相对定位。

请把下面的代码拷贝到记事本，然后把文件保存为 "path1.svg"。把此文件放入您的 web 目录：

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">

<path d="M250 150 L150 350 L350 350 Z" />

</svg>
上面的例子定义了一条路径，它开始于位置 250 150，到达位置 150 350，然后从那里开始到 350 350，最后在 250 150 关闭路径。

通过以上介绍能够稍微理解path作用，了解更多请浏览作者的另一篇文章SVG深入浅出

第二个难点 赛贝尔曲线

在我了解了SVG的大致原理后，自以为已经接近成功的大门。于是用ps做了一幅png格式的logo图片

image
接着把png转svg格式图片，在线转换工具
最后把SVG的path数据插入代码。Σ(っ °Д °;)っ发现并不是自己想要的效果。
通过阅读官方文档和特效代码发现anime.js的动画是根据路径来呈现的，所以我应该提供的SVG的<path>只是一条线段就够了。

---

又回到起点，从新开始使用<path>提供的命令画logo。
第一个h，好办的，只要把n的左边那条直线的Y坐标改长点就行。
第二个o,没有现成的o，只能在a上面动手脚，可是<path>的C命令就是三次贝塞尔曲线。表示不太会画，肿么办(/ω＼)?
上网找资料呗~ 找到张鑫旭大牛的一片文章深度掌握SVG路径path的贝塞尔曲线指令还有dayu提供的任意二次、三次贝塞尔曲线呈现工具

image
已知a的三条弧线 image 即需要求红框里的两个点。需要求甚解的童鞋请参照这篇文章使用贝塞尔曲线拟合圆
不需要的童鞋可以发挥一下自带的我看看看看看出来，上图已经很明显了，o即圆形是上下左右对称的，通过对称的特性就可以得到那两个点的坐标。
第三个j,自由发挥了o(￣︶￣)o
第四个u,参考n把它给倒过来(⌒▽⌒)
第五个n,现成的有，大功告成ヾ(^▽*)))

效果预览
感谢anime.js以及51web提供的特效代码

新建了个简书程序员交流群194472590，欢迎加入交流！