javascript - 使用 requestAnimationFrame() 作为 setInterval() Javascript

Question

我目前处于使用 setInterval() 以创建在屏幕上以特定频率闪烁的按钮的情况。像这样:(元素指的是按钮)

setInterval(function() { 
   if($(element).css("background-color") === darkColor){ //if colour is dark
       $(element).css("background-color", lightColor); //set to light

   }else if($(element).css("background-color") === lightColor){ //if colour is light
       $(element).css("background-color", darkColor); //set to dark
   }
}, frequency); //frequency value is in milliseconds

我最近在 Internet 上看到，requestAnimationFrame() 函数通常更适合显示定时的屏幕动画。您知道在这种情况下如何使用 requestAnimationFrame() 或者在这种情况下是否适合使用它？

注意:必须使用 Javascript 来实现闪烁效果(无 CSS)

谢谢

Answer 1

您可以通过给它一个函数引用来使用 requestAnimationFrame()。如果你想用相同的函数连续调用它，让函数递归地安排另一个 requestAnimationFrame()，它不会像 setInterval() 那样连续触发，它会起作用更像是 setTimeout()。

如果你想延迟下一个请求，那么你并没有真正获得 setInterval 或 setTimeout 的好处，因为你仍然必须安排下一个动画帧请求经过一段时间。 requestAnimationFrame() 只是说，“嘿浏览器，下次你去绘制窗口时，运行这个函数。”

你会遇到像这样比较颜色的问题。在某些情况下您可能会得到一个 rgb(n, n, n) 或者在其他情况下可能会得到一个十六进制字符串。我不知道 API 规范。

警告，下面的示例会非常快速地闪烁颜色

function change() {
  if ($("#foo").css("background-color") === "rgb(0, 128, 0)") {
    $("#foo").css("background-color", "rgb(128, 0, 0)");
  } else {
    $("#foo").css("background-color", "green");
  }
  
  setTimeout(()=>requestAnimationFrame(change), 500);
}

$("#foo").css("background-color", "red");
requestAnimationFrame(change);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="foo">M</span>

此外，我真的建议您改用 CSS 动画。

#foo {
  animation: 500ms flicker infinite steps(1);
}

@keyframes flicker {
  0% {
    background-color: rgb(256, 0, 0);
  }
  50% {
    background-color: rgb(0, 256, 0);
  }
}

<span id="foo">M</span>