使用HTLM5画布时动画回调架构和时间测量？答案

【问题标题】：animation callback architecture and time measuring when using HTLM5 Canvas?使用HTLM5画布时动画回调架构和时间测量？
【发布时间】：2014-08-20 02:29:09
【问题描述】：

我现在正在用 Canvas 制作一些动画，并将准备一个系统供艺术家们用来制作交互式动画。我将使用我自己的时间线，因为场景将由一些声明性的非 js 输入创建。我的问题是：处理每帧回调和时间测量的正确方法是什么？在音频（我的实时背景）中，规则是只有一个由音频系统调用的主回调方法，并且任何其他对象都以某种方式注册。所有时间计算都是通过计算这个回调的样本滴答声来完成的，所以只有一个真正的时钟源（不向系统时钟询问任何东西，只计算样本）。我认为这是我应该在我的画布应用程序中执行的操作，但我在书籍和网站中看到多个对象使用 requestAnimationFrame 的示例，然后通过使用日期对象来测量经过的时间来检查帧速率。我是否认为一个主回调仍然是最优雅的方式？如果使用 requestAnimationFrame，我可以依靠帧刻度来测量时间吗？

【问题讨论】：

标签： javascript animation html5-canvas clock requestanimationframe

【解决方案1】：

您的直觉是正确的...通过一个 requestAnimationFrame 循环路由您的所有动画，以使您的动画保持良好的协调性。

现代浏览器中requestAnimationFrame 的当前版本会自动接收基于performance 对象的高精度时间戳参数。该时间戳精确到 1/1000 毫秒。

您不能依赖于计算动画循环的调用次数（“滴答声”）。如果前一个循环的动画代码尚未完成或系统繁忙，则循环将被推迟。因此，您不能保证 60fps。保证浏览器尽最大努力为您提供 60fps。

底线：requestAnimationFrame 不能保证以 60fps 的间隔被调用，所以你有 2 个基本的动画替代方案：

使用时间戳计算经过的时间并根据经过的时间定位对象。
每次调用动画循环时增加一个计数器，并根据计数器定位您的对象。

【讨论】：

谢谢！因此，要计算一个点应该在一个滴答中移动多远，假设它的平均速度为 60fps 是否安全，或者是否需要在每个滴答上使用时间戳来计算该点应该移动多远？
好吧，如果您的动画绘制时间超过 1/60 秒，那么您将无法获得 60fps。假设平均 60fps 是不安全的——您必须测试每个设计动画的帧速率。使用时间戳将相对于经过的时间正确定位对象。使用刻度计数器将相对于 #-of-elapsed-loops 正确定位对象。两者都会偶尔“口吃”。