2

スプライト シートを使用して EaselJS と 2 つのアニメーション インスタンスを試しており、同じ z インデックスを持つ異なる位置にある 2 つの別々のキャンバスを使用しています。それらはレイヤー化されていません。私が今持っているのは、それぞれ異なるステージとスプライト シートを持つ 2 つの EaselJS 関数です。instance1 は DOM ロード後に jQuery で起動され、instance2 は jQuery で mouseenter/mouseleave イベントで起動されます。

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 で実行されることがわかりました。jQuery では、instance1 の FPS が instance2 の FPS を自動的に変更します。個別の FPS を保持するために、各インスタンスに異なるティッカーを適用する方法はありますか? 前もって感謝します。

4

3 に答える 3

3

ドキュメントTickerには、「設定された間隔での一元化されたティックまたはハートビート ブロードキャスト」を提供すると記載されています。また、静的 API を実装しており、インスタンス化すべきではないと述べています。したがって、ライブラリは、異なる間隔で実行される複数のティッカーの作成をサポートしていないように思われます。

24 fps は、10 よりもはるかに優れたスムーズなアニメーションのフレーム レートです。それをグローバルとして設定し、たとえば期間などの別の値を使用して、最初のインスタンスでアニメーションを遅くすることはできますか? もう 1 つのオプションは、フレーム レートをより高い値に設定し、jquery スロットル プラグインなどのコードを実装して、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 に答える