web-dev-qa-db-ja.com

requestAnimationFrameで引数を渡すにはどうすればよいですか？

メインプログラムで、アニメーション化するオブジェクトをランダムに選択するため、オブジェクトを引数として関数を呼び出します。最初のループは大丈夫です。xは細かく設定されていますが、次のループではundefinedになります。

このようなもの：

var anim = {
        mainFunc: function(x) {
            anim.update(x);
            anim.redraw(x);
            window.requestAnimationFrame(anim.mainFunc);
        },

        update: function(x) {

        },

        redraw: function(x) {

        }
};

var n=Math.floor(Math.random() * (ArrayOfAnimObject.length));
anim.mainFunc(ArrayOfAnimObject[n]);
javascriptrequestanimationframe
20
Torfiks

参照を作成するか、次のように関数呼び出しを別の関数でラップする必要があります。

mainFunc: function(x) {
    anim.update(x);
    anim.redraw(x);
    window.requestAnimationFrame(function() {
        anim.mainFunc(x);
    });
}
39
kalley

.bind 。

mainFunc: function(x) {
    anim.update(x);
    anim.redraw(x);
    window.requestAnimationFrame(anim.mainFunc.bind(anim,x));
}
18
Archy Will He

最善の方法は、おそらくそれを行わないようにすることです。

これを可能にするソリューションでは、新しい関数を作成する必要があります（@kalleyの回答からの匿名ラッパー、または@ArchyWillHeからのバインドされたラッパー）every frame。

アニメーションループでは、収集可能なオブジェクトをできるだけ残して、アニメーションの実行中にガベージコレクターが起動する必要がないようにして、アニメーションが発生したときに数フレームを殺すようにします。

これを実行するには、さまざまな方法がありますが、たとえばOPで公開されている場合は、このxパラメータをanimオブジェクトに直接アタッチする必要があります。

var anim = {
  mainFunc: function() {
    anim.update();
    anim.redraw();
    window.requestAnimationFrame(this.mainFunc);
  },

  update: function() {
    this.x ++;
  },

  redraw: function() {
    log.textContent = this.x;
  }
};
// replace it with a bound function only once
anim.mainFunc = anim.mainFunc.bind(anim);
anim.x = 0; // attach the parameter to the anim object
anim.mainFunc();
<pre id="log"></pre>

このパラメーターを、呼び出し元とanimの両方で使用できる変数として保持することもできます。

(function() {

var anim = {
  mainFunc: function() {
    anim.update();
    anim.redraw();
    window.requestAnimationFrame(anim.mainFunc);
  },

  update: function() {
    x ++;
  },

  redraw: function() {
    log.textContent = x;
  }
};
var x = 0; // available for both us and anim's method
anim.mainFunc();

})();
<pre id="log"></pre>
0
Kaiido