我们经常会看到一个按钮上,然后一点击就会出现水波覆盖整个按钮的效果,效果大致如下:

水波按钮 gif 水波按钮

实现方案

主要有两个实现方案,一个是利用canvas绘制出水波的效果,这种比较简单,利用canvas的arc可以绘制圆,我们将点击的地方作为圆心,然后利用requestAnimationFrame进行重复绘制,每次绘制的时候半径变大一点,当半径可以覆盖按钮则停止绘制。关键代码如下:

另外一种就是做一个半径逐渐变大的animation,然后点击的时候确定圆心,这种比canvas稍微简单一些,关键代码如下:

其他文章

0
我要评论

评论

返回
×

我要评论

回复:

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

图片:

提交
还可以输入500个字