1

だから私は「アニメーター」モジュールを作成しようとしています。これにより、基本的にrequestAnimationFrameループの開始と停止が簡単になります

define(function(require, exports, module) {
  var a = require( 'js/lib/stats.min.js'  );

  function Animator(){

    this.stats = new Stats();
    this.stats.domElement.style.position  = 'absolute';
    this.stats.domElement.style.bottom    = '0px';
    this.stats.domElement.style.right     = '0px';
    this.stats.domElement.style.zIndex   = '999';

    this.requestAnimationFrame = requestAnimationFrame;

    document.body.appendChild( this.stats.domElement );


  }

  Animator.prototype.start = function(){
    this.animate( this );
  }

  Animator.prototype.stop = function(){

    if (requestId) {
      cancelAnimationFrame(this.requestId);
      this.requestId = undefined;
    }

  }

  Animator.prototype.animate = function( ){

    this.update();

    this.requestId = this.requestAnimationFrame( this.animate );

 }


 // Empty function, because it will be user defined
 Animator.prototype.update = function(){

 }

  return Animator

});

あなたが言うことができるように、私はここでいくつかの違法なことをしています:

まず、requestAnimationFrame を this.requestAnimationFrame に割り当てようとしています。これは、プロトタイプの .animate 関数で、このオブジェクトの更新関数にアクセスできるようにしたいためです。問題は、私がこれを行うとき、次のようになることです:

Animator.prototype.animate = function( ){

  whichAnimator.update();

  whichAnimator.requestId = requestAnimationFrame( whichAnimator.animate( whichAnimator ) );

}

最大スタック呼び出しを超えました。

現時点では、自分が何をしているのかまったくわからないため、これを行う最善の方法は何かと考えていると思います。

ご不明な点がございましたら、お気軽にお問い合わせください。お時間をいただきありがとうございます。

4

2 に答える 2

2

.bind やった！

ありがとう@kalley

Animator.prototype.start = function(){
  this.running = true;
  this.animate();
}

Animator.prototype.stop = function(){
  this.running  = false;
}

Animator.prototype.animate = function( ){

  this.stats.update();
  this.update();

  if( this.running == true ){ 
    window.requestAnimationFrame( this.animate.bind( this ) );
  }

}
于 2013-10-19T21:33:29.787 に答える