使用 SVG 的 Stroke 系列属性制作描边动画

发布于 2019-03-08 字数 4809 浏览 686 评论 0

看到某些网站的动画效果很棒,特别是有一种动画,像是一点一点画出来的那种,经过仔细查看源代码和自己实验,发现其实是利用SVG制作的描边动画,感觉非常的神奇,现在分享给大家制作方法,希望您也能通过本文的介绍,制作出绚丽的SVG描边动画。

好了直奔主题,这里主要涉及到 SVG 的stroke系列的属性,所有 SVG 的属性可在mozilla的开发者社区查到:https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute

stroke 系列属性主要与边有关比如:

  • stroke 边的颜色
  • stroke-width 边的粗细
  • stroke-linecap 边起始与终点的形状
  • stroke-linejoin 边折角时的形状

而 SVG 的描边动画重点与两个属性有关, stroke-dasharraystroke-dashoffset

stroke-dasharray
该属性控制路径中虚线的长度以及虚线间的距离

我们知道虚线由一些间隔的实线组成,而该属性接受一串数字,可以理解为是数组,然后下标为 0、2、4… 的数字表示这段路径实线的长度,下标 1、3、5… 的数字表示间隔空白的长度。

举个例子

如果我想实现类似 CSS borderdotted 这样的点线该怎么办呢?

可以这么写 stroke-dasharray:1,1  或者省略的写法 stroke-dasharray:1 ,第一个数字表示实线长度 1,第二个表示间隔长度 1,后面则循环;如果要加大间隔而不加长实线,则 stroke-dasharray:1,5

注:如果传入的是奇数个数字,比如 stroke-dasharray:1,2,3 ,那么应该等于这样的写法 stroke-dasharray:1,2,3,1,2,3

stroke-dasharray:1

使用SVG的Stroke系列属性制作描边动画

stroke-dasharray:1, 5

使用SVG的Stroke系列属性制作描边动画

stroke-dashoffset
该属性指定了虚线开始时的偏移长度

正数从路径起始点向前偏移,负数则向后

stroke-dasharray:15, 10, 5, 10;stroke-dashoffset:0;

使用SVG的Stroke系列属性制作描边动画

stroke-dasharray:15, 10, 5, 10;stroke-dashoffset:15;

使用SVG的Stroke系列属性制作描边动画

描边动画化

0、我们做个假设,下面这条路径的总长度为180;

danshixian5

1、我们设置这条路径的 storke-dasharray:180 ,于是这条路径就变成了由长度180的实线与长度180间隔组成;但是,它的总长度只有180,因此看上去,还是这样,但在实线的后面,跟着一段长度180的间隔;

danshixian6

2、于是,当我们设置 stroke-dashoffset:100 , 我们将该虚线向前偏移了100:

那我们设置 stroke-dashoffset:180 , 好吧该路径就变成了空白。

3、于是,我们设置该路径为这样

stroke-dasharray: 180;
stroke-dashoffset:180;

然后将 stroke-dashoffset 逐渐变成 0;

点击这里查看示例:svg-animate

4、将 stroke-dashoffset 逐渐变成 0 的过程,可以通过 CSS3 来实现,也可以通过 JavaScript 来实现,这两种实现方式的优缺点嘛:

  • 通过 JavaScript,可以精确的得到每条路径的总长度,从而动画时长可以精确控制,缺点就是需要写一连串动画控制函数;
  • 通过 CSS3,上述的优缺点正好相反,特别是当页面中有多条路径进行一致的描边动画,它们会同步开始,但不能同步结束。

所以通过 JavaScript 计算出所有页面中路径的长度,并设置 stroke-dasharray , stroke-dashoffset ,然后通过 CSS3 来进行执行动画,这应该是最好的解决方法。

如果你对这篇文章有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助。

扫码二维码加入Web技术交流群

您暂时不能评论!

管理员开启了需要登录才能够评论,你可以免费注册一个本站的账号。

还没有评论!

目前还没有任何评论,快来抢沙发吧!