1,首先用svg绘制一条path路径,然后进行如下操作
ps: 下面是svg中两个属性及值的意义
stroke-dasharray
是让你指定画出的线段每段的长度,第二个值是各段之间空隙的长度。
stroke-dashoffset
是让你指定每个小段的起始偏移量。
var path = document.querySelector('.squiggle-animated path');
var length = path.getTotalLength();
// 清除之前的动作
path.style.transition = path.style.WebkitTransition = 'none';
// 设置起始点
path.style.strokeDasharray = length + ' ' + length;
path.style.strokeDashoffset = length;
// 获取一个区域,获取相关的样式,让浏览器寻找一个起始点。
path.getBoundingClientRect();
// 定义动作
path.style.transition = path.style.WebkitTransition =
'stroke-dashoffset 2s ease-in-out';
// Go!
path.style.strokeDashoffset = '0';