Javascript动画（一）

Javascript定时执行代码块方式

number:setInterval(func, msec)

此方法是每隔一定的时间(msec参数值)调用一次传给它的函数(func参数)，若不主动调用clearInterval(number)取消定时器，则会一直执行下去。

function animate(){
	// 需执行的代码
}
// 每秒60帧速率执行
let timerId = setInterval(animate, 1000 / 60);
// 取消定时器
clearInterval(timerId)

number:setTimeout(func, msec)

此方法是在一定时间(msec参数)后，调用一次传给它的函数(func参数)，若需重复执行，则需在重复调用setTimeout

function animate(){
	let start = +new Date(), end;
	// 需执行的代码
	
	end = +new Date()
	// 重复执行
	setTimeout(animate, 1000 / 60 - (end - start));		// 做次时间上的补偿，使之更接近1秒60帧的速率
}
animate()

提示： setInterval与setTimeout中的msec参数可不填写或填写不为正数的值，意思是使浏览器以它所允许的最小时间间隔来调用func函数。

HTML5 出的number:requestAnimationFrame(func)

setInterval与setTimeout都是开发者告诉浏览器，在某个大致的时间点上执行代码。若是在绘制动画，我们其实并不清楚绘制下一帧的最佳时机，相反，浏览器肯定比我们更了解绘制下一帧动画的最佳时机。
requestAnimationFrame为此而生！
浏览器会在最佳时机调用func函数，若需一直执行下去，则需在func内再次调用requestAnimationFrame(func)
，浏览器会给func传递一个从程序启动(页面载入)到调用func函数时的时间间隔(chrome浏览器)

let handleId = 0;
let lasttime = undefined;
// 浏览器会给函数传递一个从程序启动(页面载入)到调用animate函数时的时间间隔
function animate(time){
	if (lasttime === undefined) {		// 抛弃第一帧
		lasttime = time;
	} else {
		let dt = time - lasttime;	// 此帧距上一帧的时间间隔
		lasttime = time;
		// 需执行的代码
		
	}
	
	// 重复执行
	handleId  = requestAnimationFram(animate);		// 做次时间上的补偿，使之更接近1秒60帧的速率
}
// 使浏览在最佳时机执行第一帧动画
handleId  = requestAnimationFram(animate);

// ==== 取消 ====
cancelAnimationFrame(handleId);

提示： Chrome 浏览器调用动画回调函数的最大速率不超过每秒60次。

requestAnimationFrame的polyfill

(function (win) {
  'use strict';
  var startTime = +new Date();        //程序启动时的时间点
  win.requestAnimationFrame = (function () {
    return win.requestAnimationFrame ||
      win.webkitRequestAnimationFrame ||
      win.mozRequestAnimationFrame ||
      win.msRequestAnimationFrame ||
      function (callback) {
        var self = this,
          start, finish;
        return win.setTimeout(function () {
          start = +new Date();
          callback(start - startTime);        //将程序运行的总时长返回给回调函数
          finish = +new Date();
          self.timeout = 1000 / 60 - (finish - start);
        }, self.timeout);
      }
  })();

  win.cancelAnimationFrame = (function () {
    return win.cancelAnimationFrame ||
      win.webkitCancelAnimationFrame ||
      win.mozCancelAnimationFrame ||
      win.msCancelAnimationFrame ||
      function (id) {
        win.clearTimeout(id);
      }
  })();
})(window)

下一节：动起来了的小球