segment.js是用来专门做svg线条动画的一个库,可以做一个路径上不同位置变化的一个动画,大致如下:

segment.js原理分析 gif segment.js原理分析

看上面的动画,我们可以想一个问题,就是给你一段路径,然后告诉你开始和结束的位置,如何绘制出这一段路径呢?

其实大家都知道使用stroke-dashoffset和stroke-dasharray来做的,但是怎么做才能够实现给定开始结束位置绘制出这一段路径呢?如果可以绘制出来,那么我们就可以作出不同位置变化的动画。

segment.js实现

segment.js利用双倍stroke-dashoffset实现了一个路径上的片段绘制,大致思路如下:

首先利用$path.getTotalLength()获取一段路径的长度pathLength,然手设置路径的strokeDashoffset为2*pathLength,对于最简单的路径分割(start>0&&end>0&&start<end),推导过程如下:

background Layer 1 这是一个简单的路径 这是[10,50]路径片段 stroke-dashoffset为两倍的路径长 1 2 3 1的长度为一个路径长(pathLength) 2的长度为一个路径长(pathLength)+10(start) 3的长度50(end)-10(start) 当start>0&&end>0&&start<end时,一般性的片段路径stroke-dasharray为: [pathLength,pathLength+start,end-start].join(' ');

上面是最关键最简单也是最好理解的路径分割,它描述了如何去设置strokeDasharray来达到分割的目的。分割的时候,第一段的长度一定为pathLength,且分割个数为奇数个,一般设置为3个或5个,拿上面为例子,3的后面就是一段长度为pathLength的空白,这样可以保证后面内容不可见。

当然,具体还有其他情况下的分割情况,例如start<0&&end>0的,这个时候需要变成5段,具体的看下面的demo:

现在我们已经大致了解了如何绘制一个路径上的任意片段,那么我们现在来做一个简单的路径片段变化动画吧:

上面是一个简单的线段片段由长变短的过程,实现的较segment.js来说比较简陋,segment.js可以输入诸如'100%'这种,这种就是通过*pathLength,在后台转换成真是的长度来计算了,而且segment.js处理了更多复杂的情况,因此实际中只要用segment.js就好了,也没有必要重复造轮子,但是我们如果知道了原理,对我们也不是坏事。关键是segment.js的原理还是十分巧妙的,是值得我们学习的。

DEMO下载

点击下载 [0积分]一共下载0

其他文章

0
我要评论

评论

返回
×

我要评论

回复:

昵称:(昵称不超过20个字)

图片:

提交
还可以输入500个字