龙空技术网

5分钟用canvas实现之前支付宝“咻一咻”动画

梦想追风少年 785

前言:

此刻看官们对“canvas粒子动画”大体比较重视,看官们都想要分析一些“canvas粒子动画”的相关文章。那么小编同时在网摘上收集了一些关于“canvas粒子动画””的相关内容,希望大家能喜欢,姐妹们一起来学习一下吧!

其实canvas不仅能做图形绘画,还能够用canvas做一些漂亮的动画,比如一些粒子动画等,当然用canvas做动画比较消耗资源,如果涉及到复杂点的动画,一般电脑浏览器运行起来会显得不流畅,用canvas做动画效果主要是理解其原理。

思路分析:其实实现canvas动画原理不难,canvas只能绘画,但是要实现动画,可以每隔一定时间去重绘画布上的图像,当然时间不能隔得太长,不然会显得动画不连续,当然时间太短又会造成资源浪费,在视觉上并不能提升。

“咻一咻”是由几个圆组成,并且慢慢向外扩散,当外面的圆圈到达一定大小后便消失。

参考代码:

内容部分:

样式部分:

JS部分:

JS1

JS2

实际效果:

标签: #canvas粒子动画