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

};

实际上,它会将每个动画帧的背景位置移动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;