正确使用requestAnimationFrame / cancelAnimationFrame

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

};

实际上，它移动背景位置1 1px与每一个动画帧低。(必要时重置，以避免高油漆时间和FPS损失)

我通过调用：

cache.mechanism.snowFall();

因此，它运行良好，具有非常高的FPS，但它是不可能阻止它。

cancelAnimationFrame( cache.mechanism.snowFall );

-does nothing，并返回未定义的。

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;