简单动画-调用-帧23

/*js中的setIimeou和setInterval方法中的时间间隔并不准确，它只是规定了一个大致的时间，比如规定10m，则可能会在11秒执行。而且它是主动通知IE去改变，而最好的方式是让IE通知程序去做出改变，否则浏览器可能会在一段时间内死掉，所以W3C扩展了requestAnimationFrame()方法，它的时间更精确，而且是IE通知程序去做出改变，每种浏览器对上述方法的支持都不一样，所以需要定义一个公用的方法来重写。requestAnimationFrame()只是一个标准的方法名，每个浏览器封装的方法名都不同.另外requestAnimationFrame是由浏览器来决定最佳帧速率的，不需要调用者指定帧速率
    【1】long = window.requestAnimationFrame(FrameRequest Callback callback)
        请求浏览器在绘制下一帧动画时调用指定的回调函数，若要取消回调，可将此方法所返回的句柄传递给下面的方法
    【2】void = window.cancelRequestAnimationFrame(long)
        将原来以requestAnimationFrame()方法所注册的回调函数取消执行，必须在浏览器还未执行回调函数时才能调用此方法
*/
//setInterval用法
function animate(){
    
}
setInterval(animate, 1000/60);//每秒1000/60帧

//setTimeout用法
function animate(){
    var start = +new Date();//利用一元运算符可以直接把Date变成数值
    var finish;
    
    finish = start;
    setTimeout(animate, (1000/60)-(finish-start));
}
animate();

//requestNextAnimationFrame用法
function animate(time) {//这里的time是自动返回的一个TimeStamp,表示从1970-01-01到现在经过的ms数，其实和new Date()值是相等的
   if (!paused) {
      context.clearRect(0,0,canvas.width,canvas.height);//绘制前注意此行代码的重要性，如果没有这行，可以实现一个拖尾的效果
      //drawBackground();
      update();//更新坐标位置
      draw();//画图

      window.requestNextAnimationFrame(animate);
   }
}
window.requestNextAnimationFrame(animate);


/*****************************动画是由一系列叫做『帧』的图像组成，图像的显示频率称为『帧速率』，即每秒播放多少次fps，计算方法如下，1000/（本次时间-上次时间），在程序设计时也需要把不同的任务放用不同的帧来刷新，这个帧是由电脑配置决定的，所以一般使用基于时间的动画技术*/
var lastTime = 0;//初始化值
function calculateFps() {
   var now = (+new Date),
       fps = 1000 / (now - lastTime);//每般运行了多少次，即fps

   lastTime = now;
   return fps.toFixed();//取整
}

/*基于时间的动画的公式如下，即每一帧物体应该移动多少像素,物体每帧移动的像素数=将物体每秒移动的像素数(速度)*每一帧持续的秒数，这得出了每帧移动的像素数===恒速运动。这种算法同样也适合游戏，因为电脑配置不同，所以在不同电脑上计算出的每帧移动的像素数也不相同，从而实现多人同步。
    【1】像素/帧 = 像素/秒  * 帧/秒=== 像素/帧 = 像素/秒  * 秒/帧
*/
function updateTimeBased(time) {
   var disc = null,
       elapsedTime = time - lastTime;
   
   //discs物体对象数组
   for(var i=0; i<discs.length; ++i) {
      disc = discs[i];
      deltaX = disc.velocityX //原定的移动距离pix/m

      deltaX = disc.velocityX * (elapsedTime / 1000);
      deltaY = disc.velocityY * (elapsedTime / 1000);

      if (disc.x + deltaX + disc.radius > topContext.canvas.width ||
         disc.x + deltaX - disc.radius < 0) {
         disc.velocityX = -disc.velocityX;
         deltaX = -deltaX;
      }

      if (disc.y + deltaY + disc.radius > topContext.canvas.height ||
         disc.y + deltaY - disc.radius < 0) {
         disc.velocityY= -disc.velocityY;
         deltaY = -deltaY;
      }

      disc.x = disc.x + deltaX;
      disc.y = disc.y + deltaY;
      lastTime = time;
   }
}