跟随鼠标的粒子动画

一、效果图：

二、需要使用到的技术

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