requestAnimationFrame()不刷新

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