2

我在动画循环中唯一要做的就是更新 x 和 y 坐标，但圆仍然没有像应有的那样平滑移动。这就是小提琴。我正在使用 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 是屏幕大小），因为这样不同设备上的游戏玩法会有所不同。有没有办法在保持动画流畅的同时快速移动圆圈？

4

1 回答 1

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;
    // ...
于 2020-11-24T17:19:30.207 回答