如何阻止精灵移动？

Question

我正在使用 easeljs 库。我设法创建了一个小精灵，每次我按下键盘上的向右箭头时它都会移动。现在我提出的问题是，如果我没有任何按键，精灵给人的印象是它在移动，（基本上它正在从图像 1 变为图像 2）

我这里有代码笔的演示：https://codepen.io/diegotc/pen/qKezQB
我认为问题在于我如何使用图像管理运行。

 spriteSheet = new createjs.SpriteSheet({
        framerate: 5,
        "images": ["https://preview.ibb.co/eLKC7T/man2_rt1.gif","https://preview.ibb.co/ccR3E8/man2_rt2.gif"],
        "frames": {"regX": 82, "height": 32, "count": 2, "regY": 0, "width": 32},
        "animations": {
            "run": [0,1,"run",1],
            "stop": [0,"stop",0]
        }
    });

或者我应该在调用运行之后调用停止？

Answer 1

有几件事阻碍了您想要的效果。

您可以控制 SpriteSheets。与其拥有 "Grant" 和 "Begin"，不如拥有一个。你可以告诉 Sprite 到 gotoAndStop/gotoAndPlay 让它改变状态。这就是 spritesheet 有多个动画的原因。
当您按下按键时，您每次唯一希望发生的动作就是移动精灵。当你第一次开始移动时，你应该只调用 gotoAndPlay()（或像你正在做的那样交换精灵）一次。然后当你停止移动（keyup）时，停止精灵。
只添加一次滴答监听器。你已经在 init() 中有了全局的，这就足够了，它一直在运行。
继续 "keydown" 并不理想，因为按键事件会在您按下时触发一次，然后在短暂的延迟后开始重复。最好在按下时触发动画循环，而不是仅仅在按下时移动。

示例：

createjs.Ticker.addEventListener("tick", tickFn);
document.addEventListener('keydown' ,(event) =>{
    const keyName = event.key;

    let wasMoving = moving;
    if (keyName == 'ArrowRight') {
        moving = true;
    }

    if (moving != wasMoving) {
      grant.gotoAndPlay("run");
    }
});

document.addEventListener('keyup', e => {
  const keyName = event.key;
  if (keyName === 'ArrowRight') {
    moving = false;
    grant.gotoAndStop("stop");
  }
});

// Instead of ticking the stage, tick this function. Then update the stage yourself
function tickFn(event) {
  if (moving) {
    if(grant.x > stage.canvas.width){
      grant.x = 50;
    }
    grant.x += 10;
  }
  stage.update(event);
};

我更新了你的codepen to do the above，还添加了一些其他修改：

修复了 spritesheet 上的 regX。它被设置为 82，这将你的精灵向右推了将近 3 倍。我把它设置为宽度的 50%，所以它在中间。然后我将它移动到 50px
我在按键事件上加了一个preventDefault来防止页面滚动
我通过设置 scaleX=-1 添加了向左移动，然后设置一个 "direction" 来增加移动。
我为您更改了 Spritesheet 动画格式 "run" (to complex) 以便第一帧为 1，而不是 0。这使您的精灵立即开始行走，而不是播放停止帧优先。

我希望这能回答您的问题，并为您接下来的步骤提供一些启示。干杯！

如何阻止精灵移动？

How to stop sprite from moving?

easeljs