2

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

画架： 

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);
}

在测试的时候，我发现instance1不是以每个函数定义的FPS运行，而是以10FPS运行，那么如果instance2被mouseenter()调用；使用 jQuery，instance1 的 FPS 会自动改变 instance2 的 FPS。是否有一种方法可以对每个实例应用不同的 Ticker 以保留单独的 FPS？提前致谢。

4

3 回答 3

3

该文档指出，Ticker提供“以设定的时间间隔进行集中的滴答声或心跳广播”。它还声明它实现了一个静态 API，不应该被实例化。因此，该库似乎不支持创建以不同时间间隔运行的多个代码。

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

于 2012-06-02T13:32:23.247 回答
1

不要将您的Stage对象作为监听器添加到股票行情中，尝试创建自己的tick函数并改用它。这样，您可以根据需要随时更新您的阶段。 

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

Ticker.setFPS(20);
Ticker.addListener(window);
编辑：或者，您可以保持代码完整，并tick在“较慢”阶段覆盖该方法，仅在需要时更新。

于 2012-06-08T12:15:09.440 回答
0

举一个工作示例：

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--;
});
于 2021-06-08T15:27:45.067 回答