animejs走马灯_anime.js实现logo动画

之前无聊浏览特效的时候，发现了anime.js的logo动画特效，于是也想整个自己的logo动画。

着手coding的时候，发现没那么简单(ˇˇ)

第一个难点 SVG

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

w3c介绍：

标签用来定义路径。

下面的命令可用于路径数据：

M = movetoL = linetoH = horizontal linetoV = vertical linetoC = curvetoS = smooth curvetoQ = quadratic Belzier curveT = smooth quadratic Belzier curvetoA = elliptical ArcZ = closepath

注释：以上所有命令均允许小写字母。大写表示绝对定位，小写表示相对定位。

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

第二个难点 赛贝尔曲线

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

hojunlogo

接着把png转svg格式图片，推荐使用[在线转换工具](http://www.pngtosvg.com/)

最后把SVG的path数据插入代码。Σ(っ °Д °;)っ发现并不是自己想要的效果。

通过阅读官方文档和特效代码发现anime.js的动画是根据路径来呈现的，所以我应该提供的SVG的只是一条线段就够了。

又回到起点，从新开始使用``提供的命令画logo。

第一个h，好办的，只要把n的左边那条直线的Y坐标改长点就行。

第二个o,没有现成的o，只能在a上面动手脚，可是``的C命令就是三次贝塞尔曲线。表示不太会画，肿么办(*/ω＼*)?

上网找资料呗~ 找到张鑫旭大牛的一篇文章[深度掌握SVG路径path的贝塞尔曲线指令](http://www.zhangxinxu.com/wordpress/2014/06/deep-understand-svg-path-bezier-curves-command/)还有dayu提供的[任意二次、三次贝塞尔曲线呈现工具](http://dayu.pw/svgcontrol/)

已知a的三条弧线，需要得到第四条弧线

即需要求红框里的两个点。需要求甚解的童鞋请参照这篇文章[使用贝塞尔曲线拟合圆](http://www.cnblogs.com/ArthurQQ/articles/1730214.html)

不需要的童鞋可以发挥一下自带的我看看看看看出来，上图已经很明显了，o即圆形是上下左右对称的，通过对称的特性就可以得到那两个点的坐标。

第三个j,自由发挥了o(*￣︶￣*)o

第四个u,参考n把它给倒过来(⌒▽⌒)

第五个n,现成的有，大功告成ヾ(^▽^*)))

[效果预览](http://www.hojun.cn/2018/03/14/anime-js实现logo动画/)

感谢[anime.js](http://animejs.com)以及[51web](http://www.5iweb.com.cn/resource/5iweb2017070301/index.html)提供的特效代码