标签:some 兼容 out animation amp data cat 用法 name
在说明这个js的api用法之前,我先给个效果以及源码:
1. 页面效果
2. 页面源码
window.requestAnimationFrame()这个API是浏览器提供的js全局方法,针对动画效果。
function animate() { //done(); requestAnimationFrame(animate); } requestAnimationFrame(animate);
注意函数里的requestAnimationFrame(animate)
??有了这句话,就形成了递归调用,设置应为这个函数多用在持续的动画中,可以自由处理要不要这句话。
2. 用法2:
var globalID; function animate() { // done(); 一直运行 globalID=requestAnimationFrame(animate); // Do something animate } globalID=requestAnimationFrame(animate);//开始 cancelAnimationFrame(globalID);//结束
浏览器可以优化并行的动画动作,更合理的重新排列动作序列,并把能够合并的动作放在一个渲染周期内完成,从而呈现出更流畅的动画效果。
可以调节重新渲染,大幅提高网页性能。其中最重要的,它可以将某些代码放到下一次重新渲染时执行。避免短时间内触发大量reflow。
function doubleHeight(element) { var currentHeight = element.clientHeight; window.requestAnimationFrame(function () { element.style.height = (currentHeight * 2) + ‘px‘; }); } elements.forEach(doubleHeight);
页面滚动事件(scroll)的监听函数,就很适合用这个api,推迟到下一次重新渲染。
$(window).on(‘scroll‘, function() { window.requestAnimationFrame(scrollHandler); });
最佳的应用场景还是在帧动画里,可以大幅优化性能;
为了避免老浏览器没有提供这个api,可以先检测,后处理,没有提供api时,写对应的函数挂在window下,以后的调用与正常情况一致。
网上大神的杰作
(function() {
var lastTime = 0;
var vendors = [‘webkit‘, ‘moz‘];
for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
window.requestAnimationFrame = window[vendors[x]+‘RequestAnimationFrame‘];
window.cancelAnimationFrame =
window[vendors[x]+‘CancelAnimationFrame‘] || window[vendors[x]+‘CancelRequestAnimationFrame‘];
}
if (!window.requestAnimationFrame)
window.requestAnimationFrame = function(callback) {
var currTime = new Date().getTime();
var timeToCall = Math.max(0, 16 - (currTime - lastTime));
var id = window.setTimeout(function() { callback(currTime + timeToCall); },
timeToCall);
lastTime = currTime + timeToCall;
return id;
};
if (!window.cancelAnimationFrame)
window.cancelAnimationFrame = function(id) {
clearTimeout(id);
};
}());
简单说明:
window.requestAnimationFrame()的使用,处理更流畅的动画效果
标签:some 兼容 out animation amp data cat 用法 name
原文地址:https://www.cnblogs.com/chaoyuehedy/p/9768080.html