看到的一个比较炫酷的关闭切换的效果,效果大致如下:

svg关闭切换效果 gif svg关闭切换效果

思路分析

其实这个动画是一个线条动画,是利用stroke-dasharray和stroke-dashoffset来控制的,那么我们先完成第一步,就是如何先画出完整路径。

background Layer 1 A B C D A1 B1 C1 D1 p q 路径1:A-B-C-D-C 路径2:p-q 路径3:A1-B1-C1-D1-C1 45 r/2 _r 其中_r=r/2*Math.pow(2,1/2)

上图是三条路径合并的情况,为了方便找出各个点的位置,我们注意,这里计算的时候,有一个_r单位,和r/2构成45度直角三角形关系。因此我们可以很方便的求个各个点的位置。

注意B-C和B1-C1这两段圆弧,这里我们绘制的时候,利用svg中的a去绘制,同时设置的rx和ry都为圆的半径r,这样和C-D(C1-D1)圆弧过度的时候就不会太生硬。

绘制的结果大致如下所示:

绘制完路径,现在就主要通过stroke-dasharray和stroke-dashoffset来设置虚线的样式了,不过直接去设置还是比较麻烦,这里用一个叫做segment.js的插件设置线条的虚线样式。

这个插件也是出奇的简单,只要设置路径的开始位置和结束位置就可以描绘出路径上对应的线段,关键代码如下:

注意,这里的三条路径需要单独配置两种状态的开始和结束的位置,因为最上面的图已经标注了所有的位置大小,因此可以很简单的获取每个状态下的开始和结束位置。

DEMO下载

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

其他文章

0
我要评论

评论

返回
×

我要评论

回复:

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

图片:

提交
还可以输入500个字