我现在正在使用Canvas做一些动画，并且将为艺术家准备一个用于制作交互式动画的系统。我将使用自己的时间轴，因为场景将从一些声明性非js输入创建。我的问题是：处理每帧回调和时间测量的正确方法是什么？在音频（我的实时背景）中，规则是音频系统应该只有一个主回调方法，并且任何其他对象以某种方式注册它。并且所有时间计算都是通过计算此回调的样本滴答来完成的，因此只有一个真正的时钟源（没有询问系统时钟的任何内容，只计算样本）。我认为这是我应该在我的画布应用程序中做的，但我在书籍和网站中看到多个对象使用requestAnimationFrame的示例，然后通过使用日期对象来测量帧速率来测量经过的时间。我认为一个主要的回调仍然是最优雅的方式吗？如果使用requestAnimationFrame，我可以依赖于帧标记中的测量时间，假设我得到的确是60fps吗？
答案 0 :(得分：0)
你的直觉是有效的...通过一个requestAnimationFrame循环路由你的所有动画，以保持你的动画很好地协调。
现代浏览器中当前版本的requestAnimationFrame会根据performance对象自动接收高度准确的时间戳参数。该时间戳精确到1/1000毫秒。
您不能依赖于计算动画循环的调用次数（＆＃34; ticks＆＃34;）。如果先前循环的动画代码尚未完成或系统繁忙，则循环将被延迟。因此，您无法保证60fps。保证浏览器尽最大努力为您提供60fps。
底线：requestAnimationFrame不保证以60fps的间隔调用，因此您可以选择2种基本动画：
使用时间戳计算时间并根据已用时间定位对象。
每次调用动画循环时增加一个计数器，并根据计数器定位你的对象。