javascript - requestAnimationFrame/cancelAnimationFrame的正确使用

Question

这个问题已经有答案了:

How to stop a requestAnimationFrame recursion/loop? (6 个回答)

已关闭 4 年前。

在使用requestAnimationFrame API时，我遇到了问题。可能是因为我使用的结构是错误的，但对我来说似乎是合乎逻辑的。

我基本上所做的是一个非常简单的背景位置操作，以获得无限的下落效果:

(这个版本是简化的，但具有示范性)

cache.mechanism.snowFall = function(){

    cache.snow.position.y ++;
    if( cache.snow.position.y > cache.viewport.height ){ 
        cache.snow.position.y -= cache.viewport.height; 
    }
    cache.snow.elem.style.backgroundPosition = "0px " + cache.snow.position.y + "px";

    requestAnimationFrame( cache.mechanism.snowFall );

};

实际上，它会在每个动画帧中将背景位置降低 1px。(必要时重置，以避免绘制时间过长和 FPS 损失)

我通过调用来初始化它:

cache.mechanism.snowFall();

所以，它运行良好，具有非常高的 FPS，但无法阻止它。

cancelAnimationFrame( cache.mechanism.snowFall );

-不执行任何操作，并返回未定义。

Answer 1

您应该将要取消的 requestAnimationFrame 的 ID 发送到 cancelAnimationFrame 中。该 id 是原始 requestAnimationFrame 的返回值。

因此请求一个动画循环:

var id = requestAnimationFrame(cache.mechanism.snowFall);

并取消该请求:

cancelAnimationFrame(id);

或者，由于必须调用 requestAnimationFrame 来保持循环运行，因此您可以使用标志来停止动画:

// Set an external flag to allow animations to continue
var continueAnimating = true;

function animate()
{
    if(continueAnimating)
    {
        // when continueAnimating is false, this new
        // request will not occur and animation stops
        requestAnimationFrame(animate); 
    }
}

// To turn off animation
continueAnimating = false;