JavaScript动画实例圆圈的行进.docx
《JavaScript动画实例圆圈的行进.docx》由会员分享，可在线阅读，更多相关《JavaScript动画实例圆圈的行进.docx（21页珍藏版）》请在冰点文库上搜索。
JavaScript动画实例圆圈的行进
JavaScript动画实例：
圆圈的行进
1．一个圆圈的行进
一个半径为size的圆圈以画布的中心（canvas.width/2,canvas.height/2）为起点，在水平方向（angle=180°）上以速度speed往复运动，会呈现怎样的效果呢？
编写如下的HTML代码。
DOCTYPEhtml>
圆圈的行进在浏览器中打开包含这段HTML代码的html文件，可以在浏览器窗口中呈现出如图1所示的动画效果。
图1圆圈的行进（angle=180°）
将上面程序中的语句“varangle=180;”改写为“varangle=45;”，则在浏览器窗口中呈现出如图2所示的动画效果。
图2圆圈的行进（angle=180°）
2．两个圆圈的行进
在画布中放置两个圆圈，一个圆圈沿45°方向以画布中心为起点往复运动，另一个圆圈沿135°方向以画布中心为起点往复运动。
编写如下的HTML代码。
DOCTYPEhtml>
圆圈的行进在浏览器中打开包含这段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>
圆圈的行进在浏览器中打开包含这段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个参数值）在浏览器中打开包含这段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>
圆圈的行进（可设置参数）
Circles
Size
Speed
Delay
Go!