为什么cancelAnimationFrame不取消requestAnimationFrame?

问题描述 投票:0回答:2

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

let container;
container = document.getElementsByClassName('box1')[0];
let increase=0
let animate;

function increaseHeight(){
  if(increase<200){
    increase = increase + 2;
    container.style.height=increase + "px";
  } else {
    console.log("cancelAnimation");
    cancelAnimationFrame(animate)
  }
  animate = requestAnimationFrame(increaseHeight);
}
<!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>
javascript
2个回答
0
投票

我认为您真正想做的是

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();

无需取消。


0
投票

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

热门问题
推荐问题
最新问题