JavaScript动画实例：爆裂的粒⼦
1．⼀个粒⼦的运动
⼀个半径为3的实⼼圆以画布的中⼼（canvas.width/2,canvas.height/2）为起点，沿着⼀条曲线进⾏移动。编写如下的HTML代码。
<!DOCTYPE html>
<html>
<head>
<title>粒⼦的运动</title>
</head>
<body>
<script>
var canvas = ateElement('canvas');
var ctx = Context('2d');
document.body.appendChild(canvas);
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
ctx.beginPath();
ctx.fillStyle = 'rgba(0, 0, 0, 1)';
ctx.fillRect(0, 0, canvas.width, canvas.height);
var angle = 90;
var pos = [canvas.width/2,canvas.height/2];
var speed = 6;
var curve = 2.5;
var index = 1;
var color = 'rgba(69,204,255,.95)';
function draw ()
{
var radians = angle*Math.PI/180;
pos[0] += s(radians)* s(index);
pos[1] += Math.sin(radians)* speed+Math.sin(index);
angle += curve;
ctx.fillStyle = color;
ctx.beginPath();
ctx.arc(pos[0],pos[1],3,0,2*Math.PI);
ctx.fill();
fade();
}
function fade ()
{
ctx.beginPath();
ctx.fillStyle = 'rgba(0, 0, 0, .03)';
html动画效果
ctx.fillRect(0, 0, canvas.width, canvas.height);
}
</script>
</body>
</html>
View Code
在浏览器中打开包含这段HTML代码的html⽂件，可以在浏览器窗⼝中呈现出如图1所⽰的动画效果。
图1  ⼀个实⼼圆的运动
2．爆裂的粒⼦
将图1中的半径为3的实⼼圆作为⼀个基本粒⼦，抽象⼀个粒⼦对象Particle，该对象有表⽰粒⼦运动的起始位置的angle、粒⼦运动的当前位置pos（初始值为画布中⼼[canvas.width/2,canvas.height/2]）、粒⼦运动速度speed、粒⼦运动⾓度变化量curve、粒⼦颜⾊color和例⼦编号index等属性；为该粒⼦对象定义move和draw两个⽅法，分别完成粒⼦的位置变化和粒⼦绘制操作。
为设定⽅便起见，给在画布中⼼爆裂的粒⼦预设置3个参数，⽤变量config来表⽰。config.num、config.speed和config.curve分别表⽰3个参数分量。其中，config.num表⽰画布中爆裂出的粒⼦个数，由它计算出粒⼦运动的起始位置angle；config.speed和config.curve则分别对应粒⼦运动速度speed和粒⼦运动⾓度变化量curve。
编写的HTML⽂件如下。
<!DOCTYPE html>
<html>
<head>
<title>爆裂的粒⼦</title>
</head>
<body>
<script>
var canvas = ateElement('canvas');
var ctx = Context('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
document.body.appendChild(canvas);
var particles = [];
var colors = [ 'rgba(69,204,255,.95)', 'rgba(73,232,62,.95)',
'rgba(255,212,50,.95)', 'rgba(232,75,48,.95)',
'rgba(178,67,255,.95)' ];
var config = {};
config.num=150;
config.speed=1;
config.curve=0.5;
ctx.beginPath();
ctx.fillStyle = 'rgba(0, 0, 0, 1)';
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.fill();
particles.length = 0;
createParticles();
function createParticles()
{
var n = config.num;
for (var i=0; i<n; i++)
{
var angle = (360/n)*(i+1);
particles.push(new Particle(angle,i));
}
}
function draw ()
{
for (var i=0; i<particles.length; i++)
{
var p = particles[i];
p.draw();
}
fade();
}
function Particle (angle,index)
{
this.angle = angle;
this.speed = config.speed;
this.curve = config.curve;
this.index = index;
this.pos = [canvas.width/2, canvas.height/2];
}
ve = function()
{
this.angle += this.curve;
var radians = this.angle*Math.PI/180;
this.pos[0] += s(radians)*this.s(this.index);
this.pos[1] += Math.sin(radians)*this.speed+Math.sin(this.index);
}
Particle.prototype.draw = function ()
{
ctx.fillStyle = lor;
ctx.beginPath();
ctx.arc(this.pos[0],this.pos[1],3,0,2*Math.PI);
ctx.fill();
}
function fade ()
{
ctx.beginPath();
ctx.fillStyle = 'rgba(0, 0, 0, .03)';
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.fill();
}
</script>
</body>
</html>
View Code
在浏览器中打开包含这段HTML代码的html⽂件，可以在浏览器窗⼝中呈现出如图2所⽰的动画效果，150个粒⼦包在画布中⼼爆裂开后，四散运动起来。
图2  爆裂的粒⼦（num=150，speed = 1，curve = 0.5）
为3个参数设定不同的值，可以呈现出不同的动画效果。给出4组不同值的设定，呈现的动画效果分别如图3、图4、图5和图6所⽰。为避免图形⽂件过⼤，下列的动画过程均只录制⼀个⽚段。完整的动画演⽰过程请读者⾃⼰打开HTML⽂件运⾏程序观看。
图3  爆裂的粒⼦（num=300，speed = 6，curve =1.5）
图4  爆裂的粒⼦（num=300，speed = 2，curve = 1）
图5  爆裂的粒⼦（num=300，speed = 100，curve =180）
图6  爆裂的粒⼦（num=100，speed = 120，curve =10）
3．可设置参数的爆裂的粒⼦动画特效
由图2~图6可知，不同的参数设定，爆裂开来的粒⼦运动所呈现的动画效果不同。为此，我们提供⽂本框输⼊预设数值的⽅式对3个参数的值进⾏设定，设定完成后，单击“Burst!”按钮，按设定的参数进⾏动画效果的呈现。
编写的HTML代码如下。
<!DOCTYPE html>
<html>
<head>
<title>爆裂的粒⼦（可设置参数）</title>
<style>
form
{

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。