Question

我不知道为什么cancelAnimationFrame方法不能取消requestAnimationFrame。它仍然控制台记录消息。谁能提供解释？

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <meta name="description" content="Interaktywny poradnik szybkiego startu dla Brackets.">
    <link rel="stylesheet" href="test.css">

  </head>
  <body>

<div class="box1" style="height:100px;width:100px;background:red">
</div>

</body>

<script>

let container;
container = document.getElementsByClassName('box1')[0];
let increase=0
let animate;
         function increaseHeight(){
                    increase = increase + 2;
                    container.style.height=increase + "px";
          if(increase>200){
            console.log("cancelAnimation");
          cancelAnimationFrame(animate)
          }
      animate = requestAnimationFrame(increaseHeight);
        }
    increaseHeight();
</script>

</html>

Answer 1

我认为您真正想做的是

const container = document.getElementsByClassName('box1')[0];
let increase = 0;
function increaseHeight() {
    if (increase < 200) {
        increase = increase + 2;
        container.style.height = increase + "px";
        requestAnimationFrame(increaseHeight); // continue animation
    } else {
        console.log("stopping animation");
    }
}
increaseHeight();

无需取消。

Answer 2

之所以取消，是因为您要取消一个已经运行的帧，然后再请求一个新的帧。您需要将新的框架请求放入if(increase<200){块中。另外，您实际上不应该取消任何内容。动画帧请求仅运行一次，然后，如果要运行另一个，则必须请求另一个。因此，制作完动画后，只要不再请求另一个动画就可以了。

为什么cancelAnimationFrame不取消requestAnimationFrame？

2 个答案: