3

requestAnimationFrame を使用しているゲームを開発しています。これがそのコードです。

Game.prototype.startLoop = function (arg) {

    var parent = this;

    (function tick() {

        parent.update();
        window.animationID = webkitRequestAnimationFrame(tick);

    }());

};

Game.prototype.stopLoop = function () {
    console.log('cancel the game now');
    window.webkitCancelRequestAnimationFrame(window.animationID);
};

問題は、というメッセージが表示cancel the game nowされることですが、animationFrame がキャンセルされないため、ゲームは引き続き実行されます。、、、およびブラウザでアニメーション フレームを要求するすべてのバージョンを試しました: webkitCancelAnimationFrame、。どの組み合わせも機能しません。cancelAnimationFramewebkitCancelRequestAnimationFramerequestAnimationFramewebkitRequestAnimationFrame

奇妙なことwindow.webkitCancelRequestAnimationFrame(window.animationID)に、Webkit インスペクター コンソールで実行すると、ゲームが予期したとおりに停止します。このコードwindow.webkitCancelRequestAnimationFrame(window.animationID); console.log('button test')を DOM ボタンの onclick 属性に追加しました。クリックするとゲームが停止しますが、JS を実行するとtheDOMButton.click()何も起こりませんが、「ボタン テスト」というメッセージが表示されます。

ここに私のユーザーエージェントがあります:

Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/28.0.1500.95 Safari/537.36

ここにjsfiddleがあります：

http://jsfiddle.net/mJPMt/

これに変更した後：http://pastebin.com/ewDXBT9C動作しますが、ループごとに変数をチェックする必要なくリクエストアニメーションが停止する必要があるため、奇妙だと思います

4

2 に答える 2

4

を設定した後、 update を呼び出す必要がありますid

(function tick () {
    id = webkitRequestAnimationFrame(tick);
    update();
}());

そうしないと、古いものは停止しますが、新しいものはまだ設定されています。

フィドル

Vincent Piel が提起した問題に対処するには、いつupdateでもpromise. これは、このアプローチを使用したフィドルです。スコープ付きブール値が必要ないことを除いて、彼の回答のも​​のと似ています。

function update() {
    var dfd = $.Deferred();
    x += 0.1;
    y += 0.1;

    if (x > 50) {
        dfd.reject();
        return;
    }

    draw();
    dfd.resolve();

    return dfd.promise();
}

(function tick () {
    update().done(function() {
        id = webkitRequestAnimationFrame(tick);
    });
}());
于 2013-08-13T21:03:31.640 に答える