requestAnimationFrame使用JS操作动画,如果你想做逐帧动画,你应该用这个方法。这个方法接受一个函数为参,该函数会在重绘前调用。
requestAnimationFrame通过在参数中递归调用requestAnimationFrame()以便得到逐帧动画,被调用的频率是每秒60次,但也会按照W3C标准频率。
IE10和现代浏览器都支持。
返回值
requestID 是一个长整型非零值,作为一个唯一的标识符.你可以将该值作为参数传给 window.cancelAnimationFrame() 来取消这个回调函数。
//动态调整元素左边距,到200px停止
var start = null;
var element = document.getElementById("SomeElementYouWantToAnimate");
element.style.position = 'absolute';
function step(timestamp) {
if (!start) start = timestamp;
var progress = timestamp - start;
element.style.left = Math.min(progress/10, 200) + "px";
if (progress < 2000) {
window.requestAnimationFrame(step);
}
}
window.requestAnimationFrame(step);
效果展示:
timestamp是时间戳,为每执行一次传给调用函数的参数,表示动画开始到现在消耗的时间,单位是毫秒。
可以在chrome下console.log()输出查看: