之前無聊瀏覽特效的時候，發現了anime.js的logo動畫特效，於是也想整個自己的logo動畫。
著手coding的時候，發現沒那麼簡單(ˇˇ)
第一個難點 SVG
之前接觸到的SVG一直都是「不失真的矢量圖」這麼一個概念，但是這次的特效需要用到svg的<path>標籤
w3c介紹：
標籤用來定義路徑。
下面的命令可用於路徑數據：
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
注釋：以上所有命令均允許小寫字母。大寫表示絕對定位，小寫表示相對定位。
通過以上介紹能夠稍微理解path作用，了解更多請瀏覽作者的另一篇文章SVG深入淺出
第二個難點 賽貝爾曲線
在我了解了SVG的大致原理後，自以為已經接近成功的大門。於是用ps做了一幅png格式的logo圖片
接著把png轉svg格式圖片，推薦使用[在線轉換工具](http://www.pngtosvg.com/)
最後把SVG的path數據插入代碼。Σ(っ °Д °;)っ發現並不是自己想要的效果。
通過閱讀官方文檔和特效代碼發現anime.js的動畫是根據路徑來呈現的，所以我應該提供的SVG的<path>只是一條線段就夠了。
又回到起點，從新開始使用``提供的命令畫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)提供的特效代碼