Canvas的动画制作（十四）

动画的产生就是图片快速的连接，所以canvas的动画其实就是不断的刷新一张张图片，而这个刷新有3个过程：更新、清除、绘制。

就上面一句话的事情，我们来慢慢解析：

 

不断的刷新一张张图片：既然需要不断的刷新页面，那么就需要一个循环执行的函数。这个函数创建很简单。

function MainLoop()
{
    //在这里更新数据、清除画布、绘制新画布
    setTimeout(MainLoop,33);
};

MainLoop();

 

函数功能就是33ms的循环调用自己，33ms是因为1s产生动画效果的帧数是25-30,因此一帧大约1000/30=33ms

当然，为了可以控制开始停止，需要加按钮方便控制，很简单，定义一个控制的变量playMainLoop，而这个变量是可以通过开启/停止按钮来改变的;以上函数改为：

A、html需添加2个按钮 代码如下

    
Start
    
Stop
    
    
    

1. B、按钮按下改变playMainLoop变量 代码如下

    var playMainLoop = true；

    var buttonStart = $("#startMainLoop");
    var buttonStop = $("#stopMainLoop");

    buttonStart.hide();

    buttonStart.click(function(){
      $(this).hide();
      buttonStop.show();
      playMainloop = true;
      MainLoop();
    });

    buttonStop.click(function(){
      $(this).hide();
      buttonStart.show();
      playMainloop = false;
});

 

C、playMainLoop变量控制循环函数，代码如下

function MainLoop()
{
    // 在这里更新数据、清除画布、绘制新画布

    if(playMainLoop)
    {
        setTimeout(MainLoop,33);
    };
};

MainLoop();

 

 

 

D、更新、清除、绘制：

 

这里以一个正方形移动动画为例：

更新、清除、绘制：横坐标x不断改变，需定义一个变量x，每次循环加1。代码如下

var x = 0；
function MainLoop()
{
    //在这里更新数据、清除画布、绘制新画布
    x++;  //更新数据
    context.clearRect(0,0,canvas.width(),canvas.height()); //清除画布
    context.fillRect(x,250,50,50);  //绘制新画布
    if(playMainLoop)
    { 
        setTimeout(MainLoop,33);
    };
};

 

这样就可以实现了

 

完整代码如下：

 

  
  

  
  


Start
Stop
  

  
 

效果图：