这篇博客介绍了如何利用requestAnimationFrame在浏览器中创建脚本动画。通过设置元素的位置并不断更新，实现了平滑的滚动效果。代码示例中包含了start和stop函数，用于开始和停止动画，并且处理了多种浏览器的兼容问题。
html>
Script-based animation using requestAnimationFramediv { position: absolute; left: 10px; top:100px; padding: 50px;
background: crimson; color: white; }
var requestId = 0;
var startime = 0;
var lpos = 0;
var elm;
function init() {
elm = document.getElementById("animated");
}
function render() {
elm.style.left = ((lpos += 3) % 600) + "px";
requestId = window.requestAFrame(render);
}
function start() {
if (window.performance.now) {
startime = window.performance.now();
} else {
startime = Date.now();
}
requestId = window.requestAFrame(render);
}
function stop() {
if (requestId)
window.cancelAFrame(requestId);
}
// handle multiple browsers for requestAnimationFrame()
window.requestAFrame = (function () {
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
// if all else fails, use setTimeout
function (callback) {
return window.setTimeout(callback, 1000 / 60); // shoot for 60 fps
};
})();
// handle multiple browsers for cancelAnimationFrame()
window.cancelAFrame = (function () {
return window.cancelAnimationFrame ||
window.webkitCancelAnimationFrame ||
window.mozCancelAnimationFrame ||
window.oCancelAnimationFrame ||
function (id) {
window.clearTimeout(id);
};
})();
Start
Stop
参考文献：http://msdn.microsoft.com/zh-cn/library/hh920765(v=vs.85).aspx
扫一扫
26万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
