【第5章 动画】5.6 基于时间的运动

假设在多人射击游戏中有两个玩家各自沿着某条走廊前行，如果保持行进速度不变，那么他们将同时到达走廊的交汇处。若是由于某玩家的电脑配置比另一人好得多，而导致其电脑播放游戏动画的速度更快，那么玩家们就不会再和比自己电脑配置高的人玩了，因为他们总是能提前到达目的地。

不论底层的帧速率如何，动画都应以稳定的速度播放才对。

想让动画以稳定的速度运行，而不受帧速率的影响，那就要根据物体的速度计算出它在两帧之间所移动的像素数。计算公式如下：

像素/帧 = (像素/秒) × (秒/帧)

公式含义

• 左侧（像素/帧）：表示每帧动画中元素移动的像素数量，直接影响动画的视觉流畅度。
• 右侧（像素/秒）：动画元素的实际运动速度（如每秒移动 100 像素）。
• 右侧（秒/帧）：帧率的倒数（如 60 FPS 对应 1/60 秒/帧），代表每帧的持续时间。

应用场景

1. Canvas 动画优化：

   • 根据目标帧率动态调整每帧移动距离，避免因设备性能导致的速度异常
   • 例如：在 60 FPS 设备上每帧移动 5 像素，在 30 FPS 设备上应改为每帧移动 10 像素，以保持相同的视觉速度

2. 跨设备兼容性：

   • 通过公式统一不同帧率下的动画速度，确保在高刷新率屏幕（如 120Hz）和普通屏幕上表现一致