JavaScript动画实例：动感小球

      已知圆的坐标方程为：

          X=R*SIN(θ)

          Y=R*COS(θ)     （0≤θ≤2π）

      将0~2π区间等分48段，即设定间隔dig的值为π/24。θ初始值从0开始，按曲线方程求得坐标值(x,y)，并在当前坐标处绘制一个半径为r（相比R，r小得多）实心圆。之后每隔0.05秒，清除画布，将θ的初始值加π/24后，按曲线方程求得新坐标值(x,y)，并在求得的新坐标处再绘制一个半径为r的实心圆，这样，可以得到半径为r的圆绕半径为R的圆形轨道动态旋转的动画效果。旋转一周后（即θ的值为2π），令θ重新从初值0开始继续动画过程。

编写如下的HTML代码。

      在浏览器中打开包含这段HTML代码的html文件，可以看到在浏览器窗口中呈现出如图1所示绕圆周旋转的小球。

 

图1  绕圆周旋转的小球

      图1中圆周轨道只有一条，编写如下的HTML文件，通过二重循环绘制如图2所示的布满整个Canvas的多条圆周轨道。

 

图2  布满画布的多条圆周轨道

      仿图1的程序，让每条轨道上都有一个小球在旋转。编写如下的HTML文件。

      在浏览器中打开包含这段HTML代码的html文件，可以看到在浏览器窗口中呈现出如图3所示多个绕圆周旋转的小球。

 

图3  多个绕圆周旋转的小球

      在图3中，所有小球旋转步调一致，整齐划一，缺少动感。如果为各个旋转的小球加上相位，并去掉轨道痕迹。修改HTML文件如下。

      在浏览器中打开包含这段HTML代码的html文件，可以看到在浏览器窗口中呈现出如图4所示动感小球。

 

图4 动感小球