Question

我有一些基本的脚本来向右和向左滚动文本，我尝试将其从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);
    });

}

有关我如何使用requestFrameAnimation申请等待时间的任何建议？顺便说一句，如果我打算使用jQuery.animate()，我是否应该使用requestFrameAnimation？

Answer 1

不，requestAnimationFrame()使用jQuery的animate()时没有任何意义。 jQuery可能会在内部使用requestAnimationFrame()。

当您使用requestAnimationFrame()运行主动画循环时，可以使用setTimeout()替换setTimeout(f, x)。 x允许浏览器控制帧速率，而不是每requestAnimationFrame() ms都有一个动画帧。然后，实际速率将基于浏览器认为平滑动画所需的任何内容，具体取决于硬件和其他因素。浏览器还可以在窗口/选项卡不可见时降低刷新率，以节省CPU时间并降低不可见动画的功耗。

但这不是你使用setTimeout()的原因。您可以使用它在两个动画之间等待。有more elegant ways of doing this，但requestAnimationFrame()不是其中之一。

Answer 2

以下是您使用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>

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>

使用带有等待时间的requestAnimationFrame

2 个答案: