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)?
-
Hier ist caniuse.com dein Freund:
http://caniuse.com/#feat=requestanimationframe