requestAnimationFrame/cancelAnimationFrame的正确使用[重复]

Posted 2023-02-27

【中文标题】requestAnimationFrame/cancelAnimationFrame的正确使用[重复]

【英文标题】：Right usage of requestAnimationFrame / cancelAnimationFrame [duplicate]

【发布时间】：2015-01-04 08:02:40

【问题描述】：

在使用 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。

【参考方案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;