一些有趣的svg效果

原因

原因很简单,我不想成为一个api前端工程师,想能够多学一点。偶尔的喜欢做一些html可能难以完成的效果,去年用canvas写了一份简单的gant图,感觉还不错。后来画流程图的时候搜索各大网站发现都是用svg做的图形而非canvas,于是决定研究一下。本篇算是一个这段时间学习svg效果的自我总结。

svg基础我就不多说了,主要说一下几个好玩的动画效果。

线条动画

在svg中添加动画真的很方便,可以使用css3动画或者js来写,也可以通过svg 的相关动画标签来写。
曾经看过一个很炫的效果,几根小线条慢慢增长,然后组成一个文字logo,这个小效果可以用svg轻松实现。svg中有一个text标签,可以决定显示文字的填充和边线,同时可以通过 stroke-dasharray 属性来决定边线的虚线。我们都知道虚线是虚实相间的一条线段。于是这个效果其实等同于实线段慢慢边长,虚线段慢慢变短的过程。还有一些其他关于线条的小效果,具体请看代码。或许有时候想看多彩多样的线条?很简单那,多定义几条线条就行了。代码

运动轨迹

在html中通过js实现一条运动轨迹自然是可行的,或者通过css 的过渡效果或者动画都行。但是显然svg实现的话会更加灵活多变。因为svg有一个重要属性:path,几乎可以记录并描出任何轨迹。
运动轨迹自然也是属于动画,同样是采用svg中的动画标签。不过这里有专门的关于运动的标签:animateMotion。具体请看代码。同时这个标签可以设置运动物品在运动过程中的朝向,很方便。

变形动画

css3 中有对元素的变形,svg中也有类似的标签管理。同时让变形过程具备动画效果。同时多个变形效果可以放置多个标签并添加additive属性来进行拆分处理。当然这里变形不建议使用svg的动画,css3的效果更棒.具体请看代码

将来计划

基本上许多svg特效是由这些基本动画和特定的path路径来组合完成的。将来空闲时间将会结合svg和js 重新写一份gant图的demo。原因有几点:

  1. canvas 固然比svg强大,但是感觉在简单图形处理上使用svg会更加的简洁。
  2. svg在元素的选择上强于canvas,我可以通过js直接获取想要元素,而canvas需要通过计算和关键值来改变
  3. 就是想提升一下自己,多学一点其他图形化的知识,以后遇到特效方面的内容可以多一条选择。

感谢阅读,主要参考文章在这里


作者简介: 张栓,人和未来大数据前端工程师,专注于html/css/js的学习与开发。