js动画实现（一）

requestAnimationFrame是什么？

在浏览器动画程序中，咱们一般使用一个定时器来循环每隔几毫秒移动目标物体一次，来让它动起来。现在有一个好消息，浏览器开发商们决定：“嗨，为何咱们不在浏览器里提供这样一个API呢，这样一来咱们能够为用户优化他们的动画。”因此，这个requestAnimationFrame()函数就是针对动画效果的API，你能够把它用在DOM上的风格变化或画布动画或WebGL中。

使用requestAnimationFrame有什么好处？

浏览器能够优化并行的动画动做，更合理的从新排列动做序列，并把可以合并的动做放在一个渲染周期内完成，从而呈现出更流畅的动画效果。好比，经过requestAnimationFrame()，JS动画可以和CSS动画/变换或SVG SMIL动画同步发生。另外，若是在一个浏览器标签页里运行一个动画，当这个标签页不可见时，浏览器会暂停它，这会减小CPU，内存的压力，节省电池电量。

requestAnimationFrame的用法

// shim layer with setTimeout fallback
window.requestAnimFrame = (function(){
  return  window.requestAnimationFrame       ||
          window.webkitRequestAnimationFrame ||
          window.mozRequestAnimationFrame    ||
          function( callback ){
            window.setTimeout(callback, 1000 / 60);
          };
})();


// usage:
// instead of setInterval(render, 16) ....

(function animloop(){
  requestAnimFrame(animloop);
  render();
})();
// place the rAF *before* the render() to assure as close to
// 60fps with the setTimeout fallback.

实现0到100的输出 requestAnimationFrame实现

(function(){
            var i=0;
            var timer=requestAnimationFrame(function fn() {
                console.log(i++);
                timer=requestAnimationFrame(fn);
                if(i>100){
                    cancelAnimationFrame(timer);
                }
            })

        }())

setTimeout实现

　

(function setTime(){
            var i=0;
            var timer = setTimeout(function fn() {
                console.log(i++);
                timer=setTimeout(fn,1000/60);
                if(i>100){
                    clearTimeout(timer)
                }
            },1000/60)
        }())

　　

setInterval实现

(function() {
            var i=0;
            var timer = setInterval(function () {
                console.log(i++);
                if(i>100){
                    clearInterval(timer);
                }
            },1000/60)

        }())