requestAnimationFrame 动画接口

传统的 javascript 动画无非就是用setInterval函数来实现，这对于简单或对流畅性要求不高时不会有什么问题，但现在随着对用户体验的关注度不断提高，对动画的复杂程度和流畅性都有了更高的要求，传统动画显得捉襟见肘了。为解决此问题浏览器提供了一个统一帧管理、提供监听帧的API，即requestAnimationFrame

优势：

对于一个侦中对DOM的所有操作，只进行一次Layout和Paint。
如果发生动画的元素被隐藏了，那么就不再去Paint。

使用方法：

调用requestAnimationFrame函数，传递一个callback参数，则在下一个动画帧时，会调用callback。
不传递参数地直接调用该函数，启动动画帧，下一个帧触发时，会同时触发window.onmozbeforepaint事件，可以通过注册该事件来进行动画。

第2种方法由于依赖于Firefox自己的事件，且beforepaint事件还没进入到标准中，所以不推荐使用，还是使用第1种方式比较好。此时，我们的动画逻辑可以变成这样：

记录当前时间startTime，作为动画开始的时间。
请求下一帧，带上回调函数。
下一帧触发时，回调函数的第一个参数为当前的时间，再与startTime进行比较，确定时间间隔ellapseTime。
判断ellapseTime是否已经超过事先设定的动画时间time，如果超过，则结束动画。
计算动画属性变化的差值differ = to – from，再确定在ellapseTime的时候应该变化多少step = differ / time * ellapseTime。
计算出现在应该变化到的位置Math.round(from + step)，并重新对样式赋值。
继续请求下一帧。

DEMO:

<html>
<body>
<div id="demo" style="position:absolute; left:0px; top:100px;100px; height:100px; background:#cc0;"></div>
<div id="time"></div>
<script>
var timeDiv = document.getElementById('time'),
	count = 0;
requestAnimationFrame = window.requestAnimationFrame
|| window.mozRequestAnimationFrame
|| window.webkitRequestAnimationFrame
|| window.msRequestAnimationFrame
|| window.oRequestAnimationFrame
|| function(callback) {
setTimeout(callback, 1000 / 60);
};
function animate(element, name, from, to, time) {
    time = time || 800; // 默认0.8秒
    var style = element.style,
        startTime = (new Date()).getTime();
 
    function go(timestamp) {
		timestamp = timestamp || (new Date()).getTime();
        var progress = timestamp - startTime;
		timeDiv.innerHTML += progress + '\t\t';
		count++;
        if (progress >= time) {
            style[name] = to + 'px';
			timeDiv.innerHTML += '<br>have do  ' + count + ' setting';
            return;
        }
 
        var now = (to - from) * (progress / time);
        style[name] = now.toFixed() + 'px';
        requestAnimationFrame(go);
    }
 
    style[name] = from + 'px';
 
    requestAnimationFrame(go);
}
animate(document.getElementById('demo'), 'left', 0, 400, 1000);
</script>
</body>
</html>

浏览器的支持

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)
Basic support	10 webkitRequestAnimationFrame	4.0 (2.0) mozRequestAnimationFrame

目前分别基于WebKit (Chrome,Safari)和MineField (Firefox)架构的浏览器都开始支持requestAnimationFrame，但其调用的接口还有差异： WebKit ：webkitRequestAnimationFrame (chrome 10+) Firefox：mozRequestAnimationFrame (firefox 4.0(Gecko2.0)+) 对opera和IE现在还不支持，但以后应该是会支持的 opera:oRequestAnimationFrame IE: msRequestAnimationFrame

兼容处理：

每个浏览器对requestAnimationFrame函数的调用方法都有差别，所以再做一个简单的修正。根据Firefox的特性来看，其mozRequestAnimationFrame提供的最高FPS为60，并且会根据每一帧的计算的耗时来进行调整，比如每一帧计算用了1s，那他只会提供1FPS的动画效果。而Chrome的高版本同样也实现了这个函数，叫webkitRequestAnimationFrame，可以预见未来还会有Opera的oRequestAnimationFrame和IE的msRequestAnimationFrame，所以这里一并做一个简单的兼容处理：

 

requestAnimationFrame = window.requestAnimationFrame
|| window.mozRequestAnimationFrame
|| window.webkitRequestAnimationFrame
|| window.msRequestAnimationFrame
|| window.oRequestAnimationFrame
|| function(callback) {
setTimeout(callback, 1000 / 60);
};

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
    <title>requestAnimFrame</title>
<script>

// requestAnim shim layer by Paul Irish
      window.requestAnimFrame = (function(){
        return  window.requestAnimationFrame       ||
          window.webkitRequestAnimationFrame ||
          window.mozRequestAnimationFrame    ||
          window.oRequestAnimationFrame      ||
          window.msRequestAnimationFrame     ||
          function(/* function */ callback, /* DOMElement */ element){
          window.setTimeout(callback, 1000 / 60);
        };
      })();

// example code from mr doob : http://mrdoob.com/lab/javascript/requestanimationframe/

var canvas, context;

function init() {

canvas = document.createElement( 'canvas' );
        canvas.width = 256;
        canvas.height = 256;

context = canvas.getContext( '2d' );

document.body.appendChild( canvas );

}

function animate() {
        requestAnimFrame( animate );
        draw();

}

function draw() {

var time = new Date().getTime() * 0.002;
        var x = Math.sin( time ) * 96 + 128;
        var y = Math.cos( time * 0.9 ) * 96 + 128;

context.fillStyle = 'rgb(245,245,245)';
        context.fillRect( 0, 0, 255, 255 );

context.fillStyle = 'rgb(255,0,0)';
        context.beginPath();
        context.arc( x, y, 10, 0, Math.PI * 2, true );
        context.closePath();
        context.fill();

}
      window.onload = function(){
        init()
        animate();
      }

</script>

</script>
  </head>
  <body>

</body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
    <title>dom Framework</title>

// shim layer with setTimeout fallback
      window.requestAnimFrame = (function(){
        return  window.requestAnimationFrame ||
          window.webkitRequestAnimationFrame ||
          window.mozRequestAnimationFrame ||
          window.oRequestAnimationFrame ||
          window.msRequestAnimationFrame ||
          function(/* function FrameRequestCallback */ callback, /* DOMElement Element */ element){
          window.setTimeout(callback, 1000 / 60);
        };
      })();

var elem = document.getElementById("anim");
      var startTime = undefined;

function render(time) {

if (time === undefined)
          time =new Date()-0;
        if (startTime === undefined)
          startTime = time;

elem.style.left = ((time - startTime)/10 % 500) + "px";
      }

elem.onclick = function() {

(function animloop(){
          render();
          requestAnimFrame(animloop, elem);//elem没有用
        })();

};
    </script>
  </body>
</html>

相关阅读:
SAP S/4HANA extensibility扩展原理介绍
SAP CRM系统订单模型的设计与实现
使用nodejs代码在SAP C4C里创建Individual customer
SAP Cloud for Customer Account和individual customer的区别
Let the Balloon Rise map一个数组
How Many Tables 简单并查集
Heap Operations 优先队列
Arpa’s obvious problem and Mehrdad’s terrible solution 思维
Passing the Message 单调栈两次
The Suspects 并查集

原文地址：https://www.cnblogs.com/rubylouvre/p/2148797.html