EaselJS - 有两个不同FPS的画布

问题描述

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

I am experimenting with EaselJS and 2 animation instances using sprite sheets and 2 separate canvases at different positions with the same z-index, they aren't layered. What I have now are two EaselJS functions each with a different stage and sprite sheet, instance1 being fired with jQuery after DOM load and instance2 with mouseenter/mouseleave events also with jQuery.

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运行，然后如果instance3由mouseenter（）调用;使用jQuery，instance1的FPS将自动更改instance2的FPS。是否有一种方法可以为每个实例应用不同的Ticker以保留单独的FPS？提前致谢。

While testing, I found that instead of running at the FPS defined by each function, instance1 will run at 10FPS, then if instance2 is called by mouseenter(); with jQuery, instance1's FPS will automatically change instance2's FPS. Is there a method of applying a different Ticker to each instance as to retain separate FPS? Thanks in advance.

推荐答案

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

The documentation states that Ticker provides a "centralized tick or heartbeat broadcast at a set interval". It also states that it implements a static API and should not be instantiated. It would seem, therefore, that the library does not support the creation of multiple tickers running at different intervals.

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

24 fps is a far better frame rate for smooth animation than 10. Is it possible to set that as the global and use another value, such as duration for example, to slow the animation on your first instance? Another option might be to set the frame rate to the higher value and implement some code, such as the jquery throttle plugin, to limit the number of calls to the function which animates instance1.

这篇关于EaselJS - 有两个不同FPS的画布的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！