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

我最近在网上看到，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>

使用requestAnimationFrame（）作为setInterval（）Javascript

1 个答案: