Question

使用 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 );

- 什么也不做，并返回undefined。

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;

requestAnimationFrame / cancelAnimationFrame的正确用法

1 个答案: