JavaScript动画实例圆圈的行进.docx
《JavaScript动画实例圆圈的行进.docx》由会员分享,可在线阅读,更多相关《JavaScript动画实例圆圈的行进.docx(21页珍藏版)》请在冰豆网上搜索。
JavaScript动画实例圆圈的行进
JavaScript动画实例:
圆圈的行进
1.一个圆圈的行进
一个半径为size的圆圈以画布的中心(canvas.width/2,canvas.height/2)为起点,在水平方向(angle=180°)上以速度speed往复运动,会呈现怎样的效果呢?
编写如下的HTML代码。
DOCTYPEhtml>
圆圈的行进varcanvas=document.createElement('canvas');
varctx=canvas.getContext('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);
varangle=180;
varpos=[canvas.width/2,canvas.height/2];
varsize=15;
varspeed=5;
vartick=0;
varhue=0;
functiondraw()
{
varradians=angle*Math.PI/180;
pos[0]+=Math.cos(radians)*speed*Math.cos(tick/50),
pos[1]+=Math.sin(radians)*speed*Math.cos(tick/50);
hue=(hue+1)%360;
tick++;
ctx.strokeStyle='hsl('+hue+',80%,65%)';
ctx.beginPath();
ctx.arc(pos[0],pos[1],size,0,2*Math.PI);
ctx.stroke();
fade();
window.requestAnimationFrame(draw);
}
functionfade()
{
ctx.beginPath();
ctx.fillStyle='rgba(0,0,0,.03)';
ctx.fillRect(0,0,canvas.width,canvas.height);
}
window.requestAnimationFrame(draw);
在浏览器中打开包含这段HTML代码的html文件,可以在浏览器窗口中呈现出如图1所示的动画效果。
图1圆圈的行进(angle=180°)
将上面程序中的语句“varangle=180;”改写为“varangle=45;”,则在浏览器窗口中呈现出如图2所示的动画效果。
图2圆圈的行进(angle=180°)
2.两个圆圈的行进
在画布中放置两个圆圈,一个圆圈沿45°方向以画布中心为起点往复运动,另一个圆圈沿135°方向以画布中心为起点往复运动。
编写如下的HTML代码。
DOCTYPEhtml>
圆圈的行进varcanvas=document.createElement('canvas');
varctx=canvas.getContext('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);
varangle1=45;
varangle2=135;
varpos1=[canvas.width/2,canvas.height/2];
varpos2=[canvas.width/2,canvas.height/2];
varsize=15;
varspeed=5;
vartick=0;
varhue=0;
functiondraw()
{
varradians1=angle1*Math.PI/180;
pos1[0]+=Math.cos(radians1)*speed*Math.cos(tick/50),
pos1[1]+=Math.sin(radians1)*speed*Math.cos(tick/50);
varradians2=angle2*Math.PI/180;
pos2[0]+=Math.cos(radians2)*speed*Math.cos(tick/50),
pos2[1]+=Math.sin(radians2)*speed*Math.cos(tick/50);
hue=(hue+1)%360;
tick++;
ctx.strokeStyle='hsl('+hue+',80%,65%)';
ctx.beginPath();
ctx.arc(pos1[0],pos1[1],size,0,2*Math.PI);
ctx.stroke();
ctx.beginPath();
ctx.arc(pos2[0],pos2[1],size,0,2*Math.PI);
ctx.stroke();
fade();
window.requestAnimationFrame(draw);
}
functionfade()
{
ctx.beginPath();
ctx.fillStyle='rgba(0,0,0,.03)';
ctx.fillRect(0,0,canvas.width,canvas.height);
}
window.requestAnimationFrame(draw);
在浏览器中打开包含这段HTML代码的html文件,可以在浏览器窗口中呈现出如图3所示的动画效果。
图3两个圆圈的行进(size=15)
将上面程序中的语句“varsize=15;”改写为“varsize=45;”,则在浏览器窗口中呈现出如图4所示的动画效果。
图4两个圆圈的行进(size=15)
3.更多圆圈的行进
如果要在画布中让num个圆圈行进呢?
为此,将圆圈抽象为粒子对象Particle,该对象有行走方向angle、当前位置pos(初始值为画布中心[canvas.width/2,canvas.height/2])、圆圈大小size、行走速度speed、当前行走步数tick和圆圈颜色hue等属性;为该对象定义move和draw两个方法,分别完成圆圈的位置变化和圆圈绘制操作。
编写的HTML文件如下。
DOCTYPEhtml>
圆圈的行进varcanvas=document.createElement('canvas');
varctx=canvas.getContext('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);
functionParticle(angle)
{
this.angle=angle;
this.pos=[canvas.width/2,canvas.height/2];
this.size=15;
this.speed=5;
this.tick=0;
this.hue=0;
}
Particle.prototype.move=function()
{
varradians=this.angle*Math.PI/180;
this.pos[0]+=Math.cos(radians)*this.speed*Math.cos(this.tick/50),
this.pos[1]+=Math.sin(radians)*this.speed*Math.cos(this.tick/50);
this.hue=(this.hue+1)%360;
this.tick++;
}
Particle.prototype.draw=function()
{
ctx.strokeStyle='hsl('+this.hue+',80%,65%)';
ctx.beginPath();
ctx.arc(this.pos[0],this.pos[1],this.size,0,2*Math.PI);
ctx.stroke();
}
varparticles=[];
varnum=20;
for(vari=1;i<=num;i++)
{
particles.push(newParticle(i*180/num));
}
functiondraw()
{
for(vari=0;i{
varp=particles[i];
p.move();
p.draw();
}
fade();
window.requestAnimationFrame(draw);
}
functionfade()
{
ctx.beginPath();
ctx.fillStyle='rgba(0,0,0,.03)';
ctx.fillRect(0,0,canvas.width,canvas.height);
}
window.requestAnimationFrame(draw);
在浏览器中打开包含这段HTML代码的html文件,可以在浏览器窗口中呈现出如图5所示的动画效果。
图5多个圆圈的行进(num=20,size=15)
将上面程序中的语句“varnum=20;”改写为“varnum=15;”,“varsize=15;”改写为“varsize=25;”则在浏览器窗口中呈现出如图6所示的动画效果。
图6多个圆圈的行进(num=15,size=25)
4.给定4个参数的圆圈的行进
在上面多个圆圈的行进中,我们可以设定三个参数:
行走的圆圈个数num、圆圈的大小size和圆圈的行进速度speed。
由于我们是通过循环依次将num个圆圈加入到数组particles中,每个圆圈的当前行走步数tick都相同,这样由式子
this.pos[0]+=Math.cos(radians)*this.speed*Math.cos(this.tick/50),
this.pos[1]+=Math.sin(radians)*this.speed*Math.cos(this.tick/50);
计算出的各圆圈的当前位置位于同一个圆周上,因而呈现的动画效果是:
各圆圈组成的圆周收缩放大。
能否让计算出的各圆圈的当前位置不在一个圆周上呢?
显然,需要让各圆周的当前行走步数tick不一样。
但逻辑上一个圆圈的当前行走步数都从0开始的,因此各圆圈的当前行走步数tick的初值应置为0。
一个让各圆周tick不同的方法是:
按一定的延迟delay,逐个向数组particles中添加圆圈,每个圆圈加入后初始的tick为0,但在其之前加入数组particles中的圆圈会行走一段时间,因此它们的tick就会不同,这样各圆圈的行走就不再每次在同一个圆周上,会产生变化了。
设当前需要加入行走的圆圈个数toCreate=num;,当前动画过程计数值为animTick,按延迟delay加入圆圈的算法描述为:
if(toCreate)//当前需要加入的圆圈个数不为0
{
if(animTick%delay==0)//延迟delay步后
{
particles.push(newParticle((180/num*toCreate);//加入一个圆圈参与行走
toCreate--;//已加入一个圆圈,需要加入的圆圈个数减1
}
animTick++;
}
将圆圈开始行走的延迟delay作为设定的第4个参数,这样可以为行进的圆圈设定4个参数,用变量config来表示。
config.num、config.size、config.speed和config.delay分别表示4个参数分量。
编写的HTML代码如下。
DOCTYPEhtml>
圆圈的行进(设定4个参数值)varcanvas=document.createElement('canvas');
varctx=canvas.getContext('2d');
varparticles=[];
varconfig={};
config.num=5;
config.size=20;
config.speed=5;
config.delay=8;
config.toCreate=config.num;
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);
window.requestAnimationFrame(draw);
varanimTick=0;
functiondraw()
{
for(vari=0;i{
varp=particles[i];
p.move();
p.draw();
}
fade();
window.requestAnimationFrame(draw);
if(config.toCreate)
{
if(animTick%(config.delay)==0)
{
particles.push(newParticle((180/config.num)*config.toCreate));
config.toCreate--;
}
animTick++;
}
}
functionParticle(angle)
{
this.angle=angle;
this.pos=[canvas.width/2,canvas.height/2];
this.size=config.size;
this.speed=config.speed;
this.tick=0;
this.hue=0;
}
Particle.prototype.move=function()
{
varradians=this.angle*Math.PI/180;
this.pos[0]+=Math.cos(radians)*this.speed*Math.cos(this.tick/50),
this.pos[1]+=Math.sin(radians)*this.speed*Math.cos(this.tick/50);
this.hue=(this.hue+1)%360;
this.tick++;
}
Particle.prototype.draw=function()
{
ctx.strokeStyle='hsl('+this.hue+',80%,65%)';
ctx.beginPath();
ctx.arc(this.pos[0],this.pos[1],this.size,0,2*Math.PI);
ctx.stroke();
}
functionfade()
{
ctx.beginPath();
ctx.fillStyle='rgba(0,0,0,.03)';
ctx.fillRect(0,0,canvas.width,canvas.height);
}
在浏览器中打开包含这段HTML代码的html文件,可以在浏览器窗口中呈现出如图7所示的动画效果。
为避免图形文件过大,下列的动画过程均只录制一个片段。
完整的动画演示过程请读者自己打开HTML文件运行程序观看。
图7圆圈的行走(num=5、size=20、speed=5、delay=8)
为4个参数设定不同的值,可以呈现出不同的动画效果。
给出4组不同值的设定,呈现的动画效果分别如图8、图9、图10和图11所示。
图8圆圈的行走(num=180、size=10、speed=5、delay=8)
图9圆圈的行走(num=20、size=20、speed=5、delay=8)
图10圆圈的行走(num=80、size=20、speed=5、delay=3)
图11圆圈的行走(num=359、size=4、speed=5、delay=15)
5.可设置参数的圆圈的行走
由图7~图11可知,不同的参数设定,圆圈行走所呈现的动画效果不同。
为此,我们提供滑块的方式对4个参数的值进行设定,设定完成后,单击“go!
”按钮,按设定的参数进行动画效果的呈现。
编写的HTML代码如下。
DOCTYPEhtml>
圆圈的行进(可设置参数)
form
{
position:
absolute;
top:
0;
left:
0;
z-index:
100;
background-color:
rgba(200,200,200,.8);
padding:
8px;
font-size:
100%;
}
formbutton
{
margin:
4pxauto;
border:
1pxsolid#000;
display:
block;
}
Circles
Size
Speed
Delay
Go!
varcanvas=document.createElement('canvas');
varctx=canvas.getContext('2d');
varparticles=[];
varconfig={};
varsettings=document.getElementById('settings');
document.body.appendChild(canvas);
canvas.width=window.innerWidth;
canvas.height=window.innerHeight;
start();
window.requestAnimationFrame(draw);
varanimTick=0;
functiondraw()
{
for(vari=0;i{
varp=particles[i];
p.move();
p.draw();
}
fade();
window.requestAnimationFrame(draw);
if(config.toCreate)
{
if(!
(animTick%(config.delay)))
{
particles.push(newParticle((180/config.num)*config.toCreate));
config.toCreate--;
}
animTick++;
}
}
functionParticle(angle)
{
this.angle=angle;
this.pos=[canvas.width/2,canvas.height/2];
this.size=config.size;
this.speed=config.speed;
this.tick=0;
this.hue=