js requestAnimFrame vs requestAnimationFrame



  • Hi,

    ich versuche gerade eine animation mit javascript zu bauen...

    what ist der unterschied zwischen requestAnimationFrame und requestAnimFrame?
    warum braucht ein "window.setTimeout(callback, 1000 / 60);" and requestAnimationFrame nicht?

    AnimationFrame:

    if (!window.requestAnimationFrame) {
      (function() {
          var w=windows, raf="RequestAnimationFrame";
          window.requestAnimationFrame = w['webkit'+raf] || w['moz'+raf] || 
                                         w['o'+raf]      || ['ms'+raf]   ;
      }());
    }
    
    function Game ( initialHP, initialSpeed, initialPower ) {
       this.hp    = intialHP;
       this.speed = initialSpeed;
       this.power = initialPower;
       this._lastCallTime = 0;
       this._delta        = 0;
       this._boundRecursiveAnim = null;
    }
    
    Game.Prototype = {
       startGame : function() {  
            if (window.requestAnimationFrame) {
                this._boundRecursiveAnim = this._recursiveAnim.bind(this);
                this._lastCallTime = Date.now();
                this._recursiveAnim(); 
             }
            else  setInterval( this.gameLoop.bind(this), 33.33 );
       },
       _recursiveAnim : function() { 
            requestAnimationFrame(this._boundRecursiveAnim);
            this._gameLoop();
       },
       _gameLoop : function () {  
            var currentTime = Date.now();         
            this._delta = 1e-3*(currentTime - this._lastCallTime);
            this._lastCallTime = currentTime;
    
            this.hp = this.hp - this._delta *(this.speed );
       },      
       getFPS() : function() { return  ( 1/this._lastCallTime ); }
    }
    
    // use with:
    var myGame = new Game(1000000, 5, 5);
    myGame.startGame();
    

    requestAnimFrame:

    window.requestAnimFrame = (function() {
      return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
        function( /* function */ callback, /* DOMElement */ element) {
          window.setTimeout(callback, 1000 / 60);
        };
    })();
    
    var game = {
      gameLoop: function() {
        //requestAnimFrame(this.gameLoop.bind(this)); // ein bind aufruf hier kostet viel ressourcen...
    
        var self = this;
        window.requestAnimFrame(function(){
          self.gameLoop();
        });
    
        // do render, etc...
      }
    }
    


  • was ist der unterschied zwischen requestAnimationFrame und requestAnimFrame?

    warum braucht requestAnimFrame ein "window.setTimeout(callback, 1000 / 60);" and requestAnimationFrame nicht?



  • requestAnimationFrame ist eine API Funktion. Die braucht gar nichts.

    Was du hier hast sind Implementationen die ein requestAnimationFrame zur Verfügung stellen wenn es diese API Funktion nicht gibt. Version 1 von dir verwendet propritäre APIs der Browser und hofft das diese da sind. Version 2 verwendet Timeouts um requestAnimationFrame zu simulieren.

    window.requestAnimFrame = (function() { //definiere eine neue Funktions
      return window.requestAnimationFrame //wenn es requestAnimationFrame gibt, dann verwende das
    || window.webkitRequestAnimationFrame  //wenn es webkitRequestAnimationFrame gibt, dann verwende das
    || window.mozRequestAnimationFrame //wenn es mozRequestAnimationFrame gibt, dann verwende das
    || window.oRequestAnimationFrame //wenn es oRequestAnimationFrame gibt, dann verwende das
    || window.msRequestAnimationFrame //wenn es msRequestAnimationFrame gibt, dann verwende das
    || //andernfalls
        function( /* function */ callback, /* DOMElement */ element) {
          window.setTimeout(callback, 1000 / 60);
        }; //implementiere es selber
    })();
    


  • danke. wie alt ist der browser wenn es kein requestAnimationFrame gibt (line 3-6)? wie alt ist der browser falls er zum setTimeout kommt (line 9)?




Anmelden zum Antworten