问题标签 [cancelanimationframe]

我试图取消一个requestAnimationFrame循环，但我不能这样做，因为每次requestAnimationFrame调用都会返回一个新的计时器 ID，但我只能访问第一次调用的返回值requestAnimationFrame。
具体来说，我的代码是这样的，我认为这并不罕见：

因为所有后续调用requestAnimationFrame都在step函数内，所以在我想调用的事件中我无权访问返回的计时器 ID cancelAnimationFrame。

看看Mozilla 的方式（显然还有其他人这样做），看起来他们在他们的代码中（myReq在 Mozilla 代码中）声明了一个全局变量，然后将每次调用的返回值分配给requestAnimationFrame该变量，以便可以使用它任何时间cancelAnimationFrame。

有没有办法在不声明全局变量的情况下做到这一点？
谢谢你。

简要说明：

我制作了一个 requestAnimation ，它也有 2 个回调，具体取决于计数器；

其中一个回调将增加计数器，另一个将减少它（总是在某个范围内循环0// arr.length）。

在停止和重新启动动画之前，一切都按预期工作，
这是激活并应该存储 requestAnimationFrame ( click()) 的代码：

作为一种解决方法，我使用了 aprecidingCount var并且取决于它是否在增加，它可以决定触发哪个 requestAnimationFrame 回调；

问题：

有人可以解释为什么只存储和调用var分配给 requestAnimation 的操作不能像我预期的那样工作吗？

是否有更好的模式来停止重新启动 requestAnimation？

这是一支工作笔（查看从 180 到 182 的问题注释行）_

这可能是一个非常简单的问题，但我刚开始使用请求动画帧，我需要一些指导。我在互联网上发现请求动画帧的最安全（就浏览器兼容性而言）语法是以下代码：

然后这样称呼它：requestAnimFrame( protect );

问题是如何构建取消动画帧语法以与上述语法完全一致。（应取消所有上述前缀启动器并在回退的情况下设置超时）。

谢谢你的回答；）

- -编辑 - -

我刚找到这篇文章>点击我<

文章中提出的解决方案仅包括供应商webkit，moz因为他们声称2013.03.06: No more [ms] or [o] prefixes neccessary. Removed.我现在不知道该解决方案是否完整并且可以在今天使用。

cancelAnimationFrame()在对象的方法中调用时似乎不起作用。我已经尝试将this值绑定到回调函数（如 MDN上所示setTimeout），但在使用时收到了 TypeError cancelAnimationFrame()。然后我尝试将this值设置为一个局部变量_this，并cancelAnimationFrame()再次调用。那个时候，我没有收到错误，但动画本身仍在播放。如何取消动画？

我已经重新创建了我在下面遇到的问题。如果您打开一个控制台窗口，您将看到动画仍在运行。

window.cancelAnimationFrame();在下面的这个例子中会有什么好处（甚至可能吗？

如果是这样，我该怎么做，为什么？

参考：requestAnimationFrame MDN

我在画布上绘制了四个矩形，每边一个，自动来回（或上下）。我想要创建的是蛇效果，例如，我的动画从顶部的矩形开始一直到结束，canvas.width然后我右侧的矩形将从上到下开始动画等等与其他矩形。我该怎么做才能实现这种动画？

查看我的代码：https ://jsfiddle.net/4kdrLde8/

当我调整浏览器大小时，我试图从起点重置我的矩形动画，代码如下：

我在想，如果每次浏览器调整大小时，矩形都必须重置为起点ctx.fillRect(0,canvas.height-100,100,100)并继续其动画。

所以我解决这个问题的原始方法是使用cancelAnimationFrame()这个方法首先杀死动画并在我的内部再次调用这个函数，eventlistener所以每次触发事件时，动画都会停止并再次运行。

但是cancellAnimationFrame()函数需要目标动画时间ID，并且无法在我的animate()函数中跟踪这个时间ID，因为如果我调用var timeID = requestionAnimationFrame(animate)它，我的浏览器会出现巨大的延迟峰值

只是我想修改得越多，我就会为此感到迷茫，所以我的问题是：

1、用cancelAnimationFrame这里作为重置我的动画的第一步是否明智？

2、有没有其他好的方法可以达到这个“重置”的目的？

有人可以帮我吗？提前致谢。

我已经盯着我的代码很久了，但我似乎不明白发生了什么。每当游戏结束时，我都会执行 cancelAnimationFrame 来停止游戏。然后我再次启动菜单。

现在的问题是，当我再次调用 requestAnimationFrame 时，代码似乎调用了它两次（游戏运行速度加倍）。

以下是我的代码：

这是启动：

这是主要功能（用于动画）：

请注意，这些是代码中唯一使用 requestAnimationFrame 和 cancelAnimationFrame 的时间。谢谢！

我正在使用 JS Canvas构建一个类似于Chicken Invaders的小游戏。目前，我对当敌人击中你的船时你的船爆炸的效果感到困惑。我正在尝试在单独的文件中自行创建效果。

我的想法是，当敌人击中你时，一系列图像（14 个图像）将快速连续播放，从而产生爆炸的错觉。所以我确实包含了<img>标签，我把它们都放在一个数组中（使用querySelectorAll），然后我确实创建了爆炸效果。我使用了一个计数器来遍历数组并相应地显示每个图像。

但是随后计数器只是不断增加，因此最终会导致一个，indexError因为它超出了数组的范围。我尝试使用return来终止函数 and cancelAnimationFrame()，但它们都不起作用。

结果是控制台中不断出现每秒 60 个错误（当然，这会搞砸一切） jebba-jabba，这里是 JS-Fiddle 的链接：

https://jsfiddle.net/h7Lvpytm/8/

这是我解决这个问题的尝试：

编辑：我也尝试了一个while循环，但它甚至没有显示爆炸。这让我发疯。

关于 JavaScript 已经有很多问题了，（我认为）我理解这个概念，但是在这种情况下requestAnimationFrame，有和没有之间有什么性能差异吗？cancelAnimationFrame

没有cancelAnimationFrame：

我在每个代码上得到相同的结果。

但我想知道如果我不取消动画帧会发生什么。请求的函数是否堆积在内存中的某个地方或其他地方？