Excalibur游戏引擎中的scaleTo/scaleBy动画问题解析

问题背景

在Excalibur游戏引擎中，开发者发现了一个关于缩放动画的有趣问题。当使用scaleTo或scaleBy方法同时对游戏对象进行多轴缩放时，动画效果会出现不流畅的跳跃现象，而不是预期的平滑过渡效果。

问题现象

开发者尝试了两种不同的实现方式：

1. 直接使用scaleTo方法：

this.actions.scaleTo(vec(1.5, 0.75), vec(0.5, 0.25));

2. 使用ParallelActions组合两个独立的缩放动作：

const parallel = new ParallelActions([
    new ActionSequence(this, (ctx) => ctx.scaleBy(vec(-0.5, 0), 1)),
    new ActionSequence(this, (ctx) => ctx.scaleBy(vec(0, -0.25), 1)),
]);

这两种方式都导致了动画在播放过程中出现不自然的跳跃和剪切现象，而不是预期的平滑缩放效果。

技术分析

这个问题的根源在于Excalibur引擎内部对多轴同时缩放的处理方式。在底层实现上，引擎可能没有正确处理多个轴向上的缩放插值计算，导致在每一帧更新时，缩放值的变化不是线性平滑的。

临时解决方案

开发者提供了一个基于协程(coroutine)的临时解决方案，通过手动计算每一帧的缩放变化来实现平滑的动画效果：

var newScaleBy = (actor: ex.Actor, scaleChange: ex.Vector, durationSeconds: number) => {
  ex.coroutine(function * () {
    let duration = durationSeconds * 1000; // 转换为毫秒
    let xScaleChangeRate = scaleChange.x / duration;
    let yScaleChangeRate = scaleChange.y / duration;
    let targetScale = actor.scale.add(scaleChange);
    while (duration > 0) {
      const elapsed = yield;
      duration -= elapsed;
      actor.scale.x += xScaleChangeRate * elapsed;
      actor.scale.y += yScaleChangeRate * elapsed;
    }
    actor.scale = targetScale;
  });
}

这个解决方案通过精确控制每一帧的缩放变化量，确保了动画的平滑性。

问题修复

有趣的是，这个问题在后续的引擎更新中意外地被修复了（具体是在PR #3289中）。这表明引擎的底层动画系统得到了改进，现在能够正确处理多轴同时缩放的插值计算。

最佳实践建议

对于使用Excalibur引擎的开发者，建议：

1. 如果遇到类似的多轴动画问题，可以考虑使用协程实现自定义动画逻辑
2. 保持引擎版本更新，以获取最新的bug修复和功能改进
3. 对于复杂的动画效果，可以组合使用引擎内置动作系统和自定义实现

这个问题展示了游戏引擎开发中常见的动画插值挑战，也体现了Excalibur社区积极解决问题的态度。随着引擎的不断发展，这类问题会越来越少，开发者可以更加专注于游戏逻辑的实现。