Question

我正在使用精灵表和2个独立画布在具有相同z-index的不同位置试验EaselJS和2个动画实例，它们不是分层的。我现在拥有两个EaselJS函数，每个函数都有一个不同的阶段和精灵表，在DOM加载后使用jQuery触发instance1，使用带有jQuery的mouseenter / mouseleave事件触发instance2。

EaselJS：

function instance1() {
    var stage = new Stage(document.getElementById(canvas1));
    var ss = new SpriteSheet({
        "images": ["sprite1.jpg"], 
        "frames": {"regY": 0, "height": 100, "regX": 0, "width": 200, "count": 17}, 
        "animations": {"instance1": [0, 16]}
    });

        var initInstance1 = new BitmapAnimation(ss);
    initInstance1.x = 0;
    initInstance1.y = 0;
    initInstance1.gotoAndPlay("instance1");

    stage.addChild(initInstance1);
    Ticker.setFPS(10);
    Ticker.addListener(stage);
}
function instance2() {
    var stage = new Stage(document.getElementById(canvas2));
    var ss = new SpriteSheet({
        "images": ["sprite2.jpg"], 
        "frames": {"regY": 0, "height": 100, "regX": 0, "width": 200, "count": 17}, 
        "animations": {"instance2": [0, 16]}
    });

        var initInstance2 = new BitmapAnimation(ss);
    initInstance2.x = 0;
    initInstance2.y = 0;
    initInstance2.gotoAndPlay("instance2");

    stage.addChild(initInstance2);
    Ticker.setFPS(24);
    Ticker.addListener(stage);
}

在测试时，我发现不是运行每个函数定义的FPS，instance1将以10FPS运行，然后如果instance2由mouseenter（）调用;使用jQuery，instance1的FPS将自动更改instance2的FPS。是否有一种方法可以为每个实例应用不同的Ticker以保留单独的FPS？提前致谢。

Answer 1

documentation表示Ticker以“设定的间隔”提供“集中式滴答或心跳广播”。它还声明它实现了静态API，不应该实例化。因此，似乎图书馆不支持创建以不同间隔运行的多个代码。

对于平滑动画，24 fps是一个比10更好的帧速率。是否可以将其设置为全局并使用其他值（例如持续时间）来减慢第一个实例上的动画？另一种选择可能是将帧速率设置为更高的值并实现一些代码，例如jquery throttle plugin，以限制对动画实例1的函数的调用次数。

Answer 2

不要将Stage个对象作为听众添加到自动收报机，尝试创建自己的tick功能并改为使用它。这样您就可以根据需要随时更新您的舞台。

window.tick = function (delta) {
 ...
};

Ticker.setFPS(20);
Ticker.addListener(window);

编辑：或者您可以保留代码完整并覆盖“较慢”阶段的tick方法，并仅在需要时更新。

Answer 3

举一个有效的例子：

let fps1 = 30,
    fps2 = 15,
    delay1Start = Math.round(60/fps1),
    delay1 = delay1Start,
    delay2Start = Math.round(60/fps2),
    delay2 = delay2Start;

createjs.Ticker.framerate = 60;
createjs.Ticker.timingMode = createjs.Ticker.RAF;

createjs.Ticker.addEventListener('tick', () => {
    if( delay1 === 0 ) { stage1.update(); delay1 = delay1Start; }
    delay1--;
});
createjs.Ticker.addEventListener('tick', () => {
    if( delay2 === 0 ) { stage2.update(); delay2 = delay2Start; }
    delay2--;
});

EaselJS - 有两个不同FPS的画布

3 个答案: