JavaScript：requestAnimationFrame 变得更快

Posted 2023-02-27

【中文标题】JavaScript：requestAnimationFrame 变得更快

【英文标题】：JavaScript: requestAnimateFrame get faster

【发布时间】：2016-10-14 07:53:42

【问题描述】：

我有一个带有 requesetAnimationFrame 的动画，当我重放它时，它变得越来越快，直到它变得不可见。

function tirer()

    var missile=document.getElementById("missile");
    var currt= missile.currentStyle ||window.getComputedStyle(missile);
    if ( parseInt(currt.bottom)<700)
    missile.style.bottom=parseInt(missile.style.bottom)+20+"px";
    else
    alert ( "in top");



function animation ()
    tirer();
    requestAnimationFrame(animation);

我怎样才能让它保持稳定、恒定的速度？

【问题讨论】：

Controlling fps with requestAnimationFrame?的可能重复

是的！谢谢！

【参考方案1】：

您可能多次调用animation()（例如，每当单击按钮时）。

每次调用animation() 都会开始一个新的重复requestAnimationFrame() -> animation() -> requestAnimationFrame() -> animation() -> ... 序列。

E. G。如果你调用animation() 两次，你有两个这样的序列正在运行，你的帧率会加倍。

在发送新请求之前，您需要取消当前正在进行的动画帧请求。见How to stop a requestAnimationFrame recursion/loop?