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 回答
1

requestAnimationFrame不一样setInterval，requestID每次通话都会有所不同。因此，将其分配给上下文确实没有意义。

我发现如果你简单地在全局范围内运行一个requestAnimationFrame，然后调用你在循环中运行的任何动画，会更容易喘不过气来。这是一些粗略的代码：

var animations = {}; // holder for animation functions

(function loop() {
    for(var id in animations) {
        animations[id]();
    }
    requestAnimationFrame(loop);
}());

function start(fn) {
    var id = +new Date();
    animations[id] = fn;
    return id;
}
function stop(id) {
    if (animations.hasOwnProperty(id)) {
        delete animations[id];
    }
}
于 2013-10-19T21:35:17.450 回答