javascript - CreateJS 是否包含类似于 AS3 中的 "ENTER_FRAME"的事件监听器？

Question

我正在尝试将“Actionscript 3.0:游戏编程大学”中的效果转换为 HTML5 Canvas 渲染，更具体地说，是 Create/EaselJS。

这是我正在编写的代码:

    private var flipStep:uint;
    private var isFlipping:Boolean = false;
    private var flipToFrame:uint;

    // begin the flip, remember which frame to jump to
    public function startFlip(flipToWhichFrame:uint) {
        isFlipping = true;
        flipStep = 10;
        flipToFrame = flipToWhichFrame;
        this.addEventListener(Event.ENTER_FRAME, flip);
    }

    // take 10 steps to flip
    public function flip(event:Event) {
        flipStep--; // next step

        if (flipStep > 5) { // first half of flip
            this.scaleX = .20*(flipStep-6);
        } else { // second half of flip
            this.scaleX = .20*(5-flipStep);
        }

        // when it is the middle of the flip, go to new frame
        if (flipStep == 5) {
            gotoAndStop(flipToFrame);
        }

        // at the end of the flip, stop the animation
        if (flipStep == 0) {
            this.removeEventListener(Event.ENTER_FRAME, flip);
        }
    }

我大概完成了一半，然后才意识到需要逐步插入每一帧才能正确设置动画。这是我在 HTML5 中的 JS 等效项:

function FlipTile(e)
{
    if (!TileFlipping)
    {
        var flipStep = 30;
        var sprite = e.currentTarget;
        console.log(sprite);

        TileFlipping = true;

        flipStep--;

        if (flipStep > 15)
        {
            sprite.scaleX = .02 * (flipStep-6);
        } else {
            sprite.scaleX = .02 * (5 - flipStep);
        }


        if (flipStep == 0)
        {
            TileFlipping = false;
        }

    }
}

效果就像一张围绕中心翻转的卡片，但是如果没有一步一步地进行，这会破坏并严重“倾斜” Sprite 翻转。它也只触发一次，打破翻转计数器。这使它开始寻找 ENTER_FRAME 等效项......或替代方法。此刻我很困惑。

Answer 1

不太确定我是否正确回答了您的问题 - 但您应该使用 CreateJS Ticker 来更新舞台上的内容，请在此处查看文档: http://www.createjs.com/docs/easeljs/classes/Ticker.html您只需将 Event.ENTER_FRAME 替换为 "tick" 即可，并保持与 AS3 示例中的逻辑相同。

在内部，Ticker 使用 window.requestAnimationFrame，通常每秒运行 60 次 (= 60fps)。 https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame