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;width: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>

posted on 2011-08-22 17:24 司徒正美阅读(15704) 评论(3) 编辑收藏举报

刷新页面返回顶部

Ruby's Louvre

导航

公告