一个简单的边框动画,效果大致如下:

svg简单的边框动画 gif svg简单的边框动画

主要思路

这个其实主要使用svg中的一个stroke-dasharray和stroke-dashoffset属性来做的,它们是用来控制线段的样式的,其中stroke-dashoffset控制偏移,stroke-dasharray控制实线和虚线的长度。

background Layer 1 这是一条正常的线段 这是一条虚线:stroke-dashoffset:20,stroke-dasharray:10,5 stroke-dashoffset:20,表示虚线从虚线20px的位置开始 虚线的实线部分长度为10,对应stroke-dasharray第一个参数 虚线的虚线部分长度为5,对应stroke-dasharray第二个参数

我们可以通过stroke-dashoffset制作一个简单的svg描边动画:

这个很简单,就是移上去之后,让stroke-dashoffset变大, 结果就是这条虚线好像流动了一样。现在回归到之前的那个动画,那个咋做的呢?

background Layer 1 宽度为w,刚开始stroke-dashoffset为2*w 高度为h,刚开始stroke-dashoffset为2*h 四条线的stroke-dashoffset变为0,四条线则顺时针流动。

其实那个是有四条线,然后每个虚线的实线部分和虚线部分是一样长,同时每个虚线刚开始的时候都有一个2倍长度的offset,这样待会移上去之后,就将offset归0,那么线条就归位了,例如上面,归位后如下:

background Layer 1

这里需要注意的是这四个点的绘制顺序,要不都是顺时针绘制,要不都是逆时针绘制,否则出现的效果就乱了。

其他文章

0
我要评论

评论

返回
×

我要评论

回复:

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

图片:

提交
还可以输入500个字