メインプログラムで、アニメーション化するオブジェクトをランダムに選択するため、オブジェクトを引数として関数を呼び出します。最初のループは大丈夫です。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]);
参照を作成するか、次のように関数呼び出しを別の関数でラップする必要があります。
mainFunc: function(x) {
anim.update(x);
anim.redraw(x);
window.requestAnimationFrame(function() {
anim.mainFunc(x);
});
}
.bind
。
mainFunc: function(x) {
anim.update(x);
anim.redraw(x);
window.requestAnimationFrame(anim.mainFunc.bind(anim,x));
}
最善の方法は、おそらくそれを行わないようにすることです。
これを可能にするソリューションでは、新しい関数を作成する必要があります(@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>