传统的 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:
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); };
// 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>
</script>
</head>
<body>
</body>
</html>
<style>
#anim {
position:absolute;
left:0px;
width:150px;
height:150px;
background: blue;
font-size: larger;
color: white;
border-radius: 10px;
padding: 1em;
}
</style>
</head>
<body>
<div id="anim">Click here to start animation</div>
<script>
// 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>