HTML5 Canvas 动画偶尔会出现抖动/犹豫/卡顿

Posted 2023-03-05

【中文标题】HTML5 Canvas 动画偶尔会出现抖动/犹豫/卡顿

【英文标题】：HTML5 Canvas Animation Has Occasional Jitter / Hesitation / Stutter

【发布时间】：2012-04-14 06:08:29

【问题描述】：

在 Firefox 11 中，我在使用 html5 的画布和翻译的一些基本动画中偶尔会出现抖动/犹豫/口吃。

请看下面的例子... http://jsfiddle.net/ACRdx/

上面示例中的配置似乎以指定的移动速率提供了最流畅的动画，当然除了偶尔的卡顿。

有人知道是什么原因导致了这种行为吗？

类似帖子中提供的建议似乎没有帮助，并且自 2011 年 6 月以来没有更新。此外，示例链接现在已损坏。请看...

Is there a solution for HTML5 canvas animation stutter?

【参考方案1】：

尝试降低您的 FPS。可能是浏览器由于某种原因难以运行。我弄乱了你的代码，也可能是你的 imageMoveXDelta 太小了。我把它提高到 0.2，它对我来说运行得非常顺利。除此之外，您应该尝试将其视为在完成之前运行的总帧数，以便获得良好的混合。