[英]using requestAnimationFrame with wait time
I've some basic script to scroll a text to the right and left which I tried to convert it from timeout
to requestAnimationFrame
, however, I can't make it work. 我有一些基本的脚本可以左右滚动文本,试图将其从
timeout
转换为requestAnimationFrame
,但是我无法使其正常工作。
function slideHorizontal(e, amount, time) {
var waitTime = 500;
e.animate({
marginRight: '-'+amount+'px'
}, time, 'linear', function() {
setTimeout(function() {
e.animate({
marginRight: 0
}, time , 'linear', function() {
setTimeout(function() {
slideHorizontal(e, amount, time);
}, waitTime);
});
}, waitTime);
});
}
any suggestion how I can apply the wait time with requestFrameAnimation
? 有什么建议我可以使用
requestFrameAnimation
申请等待时间吗? BTW, should I even use jQuery.animate()
if I'm going to use the requestFrameAnimation
? 顺便说一句,如果我要使用
requestFrameAnimation
,我什至应该使用jQuery.animate()
吗?
No, requestAnimationFrame()
does not make any sense when you use jQuery's animate()
. 不,当您使用jQuery的
animate()
时, requestAnimationFrame()
没有任何意义。 jQuery may use requestAnimationFrame()
internally though. jQuery可能在内部使用
requestAnimationFrame()
。
You can use requestAnimationFrame()
to replace setTimeout()
when you run the main animation loop with setTimeout(f, x)
. 使用
setTimeout(f, x)
运行主动画循环时,可以使用requestAnimationFrame()
替换setTimeout()
setTimeout(f, x)
。 Instead of having a animation frame every x
ms, requestAnimationFrame()
lets the browser control the frame rate. 而不是每隔
x
毫秒就有一个动画帧, requestAnimationFrame()
允许浏览器控制帧速率。 The actual rate will then be based on whatever the browser deems necessary for a smooth animation, depending on the hardware and other factors. 然后,根据硬件和其他因素,实际速率将基于浏览器认为平滑动画所需的任何值。 The browser can also lower the refresh rate when the window/tab is not visible, to conserve CPU time and reduce power usage of animations that are not visible.
当窗口/选项卡不可见时,浏览器还可以降低刷新率,以节省CPU时间并减少不可见动画的功耗。
But that's not what you are using setTimeout()
for. 但这不是您使用
setTimeout()
的目的。 You use it to wait between two animations. 您可以使用它在两个动画之间等待。 There are more elegant ways of doing this , but
requestAnimationFrame()
isn't one of them. 有更优雅的方法可以做到这一点 ,但是
requestAnimationFrame()
并不是其中一种。
here's how you would use requestAnimationFrame
: 这是使用
requestAnimationFrame
:
var i = 0; var forward = true; function draw() { requestAnimationFrame(draw); if(i < 100 && forward){ i+=2; } else if(i > 0){ forward = false; i-=2; } else{i = 0; forward = true;} document.getElementById("div").style.left = i + "px"; } draw();
div { width: 80px; height: 80px; background: black; position: absolute; }
<div id="div"></div>
The setInterval
equivalent would be: setInterval
等效为:
var i = 0; var forward = true; function draw() { setInterval(function(){ if(i < 100 && forward){ i+=2; } else if(i > 0){ forward = false; i-=2; } else{i = 0; forward = true;} document.getElementById("div").style.left = i + "px";},10); } draw();
div { width: 80px; height: 80px; background: black; position: absolute; }
<div id="div" onload="draw"></div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.