一、效果图:
二、需要使用到的技术
1、HTML5 Canvas
- 标签定义图形,用于图形的绘制,通过脚本 (通常是JavaScript)来完成。
- 可以在画布上(Canvas)画一个红色矩形,渐变矩形,彩色矩形,和一些彩色的文字。
2、window.requestAnimationFrame()
- 告诉浏览器——你希望执行一个动画,并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数,该回调函数会在浏览器下一次重绘之前执行。比如:window.requestAnimationFrame(animate);
- requestAnimationFrame是浏览器用于定时循环操作的一个接口,类似于setTimeout,主要用途是按帧对网页进行重绘。
3、window.requestAnimationFrame() 和 setTimeout(setInterval)的区别
(1)使用window.setInterval()或者window.setTimeout()制作的动画,有如下缺点
- 他们都是通用的方法,并不是专为绘制动画而用。
- 即使向其专递以毫秒为单位的参数值,它们也达不到毫秒级的准确性。
- 没有对调用动画循环的机制优化。
- 不考虑绘制动画的最佳时机,而只会一味地以某个大致的时间间隔调用动画循环。
(2)requestAnimationFrame制作动画的优点
- 与setTimeout相比,requestAnimationFrame最大的优势是由系统来决定回调函数的执行时机。
- requestAnimationFrame的步伐跟着系统的刷新步伐走。它能保证回调函数在屏幕每一次的刷新间隔中只被执行一次,这样就不会引起丢帧现象,也不会导致动画出现卡顿的问题。
- CPU节能:使用setTimeout实现的动画,当页面被隐藏或最小化时,setTimeout 仍然在后台执行动画任务,由于此时页面处于不可见或不可用状态,刷新动画是没有意义的,完全是浪费CPU资源。而requestAnimationFrame则完全不同,当页面处理未激活的状态下,该页面的屏幕刷新任务也会被系统暂停,因此跟着系统步伐走的requestAnimationFrame也会停止渲染,当页面被激活时,动画就从上次停留的地方继续执行,有效节省了CPU开销。
- 函数节流:在高频率事件(resize,scroll等)中,为了防止在一个刷新间隔内发生多次函数执行,使用requestAnimationFrame可保证每个刷新间隔内,函数只被执行一次,这样既能保证流畅性,也能更好的节省函数执行的开销。一个刷新间隔内函数执行多次时没有意义的,因为显示器每16.7ms刷新一次,多次绘制并不会在屏幕上体现出来。
三、实现步骤
1、需要使用到的变量
(1)frame :从初始化函数开始,逐渐递增,1++,主要是用于粒子透明度的逐渐变小,还有判断粒子是否达到生命时长,然后删除粒子。
(2)circleArray :存储所有的粒子的数组,里面包含该粒子 Circle()对象的属性和方法。
(3)circleColorArray :粒子颜色数组。
(4)mouse :鼠标坐标
var frame = 0; // 从初始化开始,自动增长的数,一直加1
var circleArray = []; // 粒子数组
var circleColorArray = [ // 粒子颜色数组
'46, 204, 113',
'52, 152, 219',
'231, 76, 60',
'241, 196, 15',
'155, 89, 182',
'230, 126, 34',
'26, 188, 156',
];
var mouse = {
// 鼠标坐标
x: undefined,
y: undefined
};
2、使用Canvas创建画布
var canvas = document.getElementById('myCanvas');
canvas.height = window.innerHeight;
canvas.width = window.innerWidth;
c = canvas