有些时候我们会遇到水波loading的需求,先来看一下效果图:

svg mask 水波loading gif svg mask 水波loading

思路分析

其实这个主要使用svg的path结合mask来实现的。

第一步当然是要画波浪了:

上面就是在没有遮罩的情况下一个波浪的样子,关键需要用两个Q就可以搞定,

画波浪的关键代码:

第二部我们就是要让波浪动起来,这里需要把波浪画几个周期,能覆盖住可视范围。

真正的移动如上图,我们会先画好几个周期的波浪,然后通过控制整个路径的偏移量,循环播放。

波浪有一个平均线,这个平均线的高度表明现在是百分之多少。

当在一个高度没有变化的时候,这时候水波就会慢慢平稳。这里用easeIn曲线来模拟最后的平稳,其实所谓的平稳就是波浪的最大和最小值在慢慢趋向平均值。

从上面的代码可以看到,当百分比有变化的时候,波峰都是30,当没有变化的时候,波峰在300毫秒内趋向0,然后等待下次变化。

最后就是我们的遮罩,这里用的是最简单的圆形遮罩,当然还可以用其他的遮罩,下面就是用文字的遮罩效果。

svg mask 水波loading gif svg mask 水波loading

DEMO下载

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

其他文章

0
我要评论

评论

返回
×

我要评论

回复:

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

图片:

提交
还可以输入500个字