anime.js实现logo动画
之前无聊浏览特效的时候,发现了anime.js的logo动画特效,于是也想整个自己的logo动画。
着手coding的时候,发现没那么简单(。•ˇ‸ˇ•。)
第一个难点 SVG
之前接触到的SVG一直都是“不失真的矢量图”这么一个概念,但是这次的特效需要用到svg的<path>
标签
w3c介绍:
1 | <path> 标签用来定义路径。 |
通过以上介绍能够稍微理解path作用,了解更多请浏览作者的另一篇文章SVG深入浅出
第二个难点 贝赛尔曲线
在我了解了SVG的大致原理后,自以为已经接近成功的大门。于是用ps做了一幅png格式的logo图片
接着把png转svg格式图片,在线转换工具
最后把SVG的path数据插入代码。Σ(っ °Д °;)っ发现并不是自己想要的效果。
通过阅读官方文档和特效代码发现anime.js的动画是根据路径来呈现的,所以我应该提供的SVG的<path>
只是一条线段就够了。
又回到起点,从新开始使用<path>
提供的命令画logo。
第一个h,好办的,只要把n的左边那条直线的Y坐标改长点就行。
第二个o,没有现成的o,只能在a上面动手脚,可是<path>
的C命令就是三次贝塞尔曲线。表示不太会画,肿么办(/ω\)?
上网找资料呗~ 找到张鑫旭大牛的一片文章深度掌握SVG路径path的贝塞尔曲线指令还有dayu提供的任意二次、三次贝塞尔曲线呈现工具
已知a的三条弧线
即需要求红框里的两个点。需要求甚解的童鞋请参照这篇文章使用贝塞尔曲线拟合圆
不需要的童鞋可以发挥一下自带的我看看看看看出来,上图已经很明显了,o即圆形是上下左右对称的,通过对称的特性就可以得到那两个点的坐标。
第三个j,自由发挥了o( ̄︶ ̄)o
第四个u,参考n把它给倒过来(⌒▽⌒)
第五个n,现成的有,大功告成ヾ(^▽^*)))
希望这篇文章能给你带来知识和乐趣,喜欢博主的文章可以加博主好友哦
有好的文章也可以向博主投稿哦
您的喜欢是作者写作最大的动力
QQ群和公众号