为啥这个基本的 Canvas 动画不流畅？

Posted 2023-03-24

【中文标题】为啥这个基本的 Canvas 动画不流畅？

【英文标题】：Why is this basic Canvas animation not smooth?为什么这个基本的 Canvas 动画不流畅？

【发布时间】：2017-01-18 08:56:26

【问题描述】：

我在动画循环中唯一要做的就是更新 x 和 y 坐标，但圆仍然没有像应有的那样平滑移动。 This is the fiddle。我正在使用 CraftyJS 为圆圈设置动画。这是执行动画的代码：

.bind("EnterFrame", function (eventData) 
     this.x += this.xDirection;
     this.y += this.yDirection;
     if (this.x < 0) this.xDirection *= -1;
     if (this.y < 0) this.yDirection *= -1;
     if (this.x > (0.96*gWidth)) this.xDirection *= -1;
     if (this.y > (0.96*gHeight)) this.yDirection *= -1;
);

其余的计算只完成一次，我不认为只是一堆乘法会导致动画滞后。任何有关如何使动画流畅的帮助将不胜感激。

我之前没有提到xDirection 等于0.005*gWidth 和yDirection 等于0.005*gHeight。如果gWidth 是600，球仍在移动，只是3px。真的那么快吗？我不想以像素为单位指定宽度（gWidth 是屏幕大小），因为那样不同设备上的游戏玩法会有所不同。有什么方法可以在保持动画流畅的同时快速移动圆圈？

【问题讨论】：

这是因为圆移动的最小距离太大。尽量减少

Rachit 是正确的...从最小距离（1 px）开始

这会使它的平滑度提高一倍 "this.x += this.xDirection / 2; this.y += this.yDirection / 2;" , 同时慢两倍

我肯定会尝试，但我也希望圈子快速移动。能不能同时流畅又快速？

你可以通过摆弄Crafty.timer获得更好的结果。 This fiddle 对我来说运行起来更顺畅。

【参考方案1】：

从“固定”步骤类型更改为“可变”步骤类型为我解决了问题。 Crafty.init 之后，调用Crafty.timer.steptype():

const _step = 20;
Crafty.init(gWidth, gHeight, document.getElementById('game'));
Crafty.timer.steptype('variable', _step);
// ...

您可能还想更新您的 EnterFrame 以考虑自上一帧以来经过的时间：

.bind("EnterFrame", function (eventData) 
    let dt = eventData.dt;
    this.x += this.xDirection * dt / _step;
    this.y += this.yDirection * dt / _step;
    // ...