requestAnimationFrame() not refreshing

Question

我正在学习如何使用requestAnimationFrame((，刷新页面时动画会发生变化。它不应该在不刷新的情况下不断更改字体大小吗？

var x = Math.floor((Math.random() * 100));
function draw(){
  for (i=0; i < 100; i++){
    $("#lw").css("font-size", x);
  }
  requestAnimationFrame(draw);
}
requestAnimationFrame(draw);

Answer 1

requestAnimationFrame像

它应该的那样工作。您永远不会更改调用或循环迭代之间的条件。

function draw(){
  for (var i = 0, x = Math.floor((Math.random() * 100)); i < x; i++){
    $("#lw").css("font-size", i);
  }
  requestAnimationFrame(draw);
}
requestAnimationFrame(draw);

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

Answer 2

问题是你的循环将 css 设置为 x 的值。这是在循环之外设置的。 如果您希望大小变大，请将字体大小设置为 i 而不是 x