Added requestAnimationFrame support

sprite.js

@@ -21,6 +21,87 @@
 		return result;
 	};
 
+	// http://paulirish.com/2011/requestanimationframe-for-smart-animating/
+	// http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating
+
+	// requestAnimationFrame polyfill by Erik Möller. fixes from Paul Irish and Tino Zijdel
+
+	// MIT license
+	(function() {
+		var lastTime = 0,
+			vendors = ['ms', 'moz', 'webkit', 'o'];
+		for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
+			window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
+			window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame'];
+		}
+
+		if (!window.requestAnimationFrame){
+			window.requestAnimationFrame = function(callback, element) {
+				var currTime = new Date().getTime(),
+					timeToCall = Math.max(0, 16 - (currTime - lastTime)),
+					id = window.setTimeout(function() { callback(currTime + timeToCall); }, timeToCall);
+				lastTime = currTime + timeToCall;
+				return id;
+			};
+		}
+
+		if (!window.cancelAnimationFrame) {
+			window.cancelAnimationFrame = function(id) {
+				clearTimeout(id);
+			};
+		}
+	}());
+
+	/*
+	 * https://gist.github.com/joelambert/1002116
+	 * Drop in replace functions for setTimeout() & setInterval() that 
+	 * make use of requestAnimationFrame() for performance where available
+	 * http://www.joelambert.co.uk
+	 *
+	 * Copyright 2011, Joe Lambert.
+	 * Free to use under the MIT license.
+	 * http://www.opensource.org/licenses/mit-license.php
+	 */
+	window.requestInterval = function(fn, delay) {
+		if( !window.requestAnimationFrame       && 
+			!window.webkitRequestAnimationFrame && 
+			!(window.mozRequestAnimationFrame && window.mozCancelRequestAnimationFrame) && // Firefox 5 ships without cancel support
+			!window.oRequestAnimationFrame      && 
+			!window.msRequestAnimationFrame)
+				return window.setInterval(fn, delay);
+
+		var start = new Date().getTime(),
+			handle = {};
+
+		function loop() {
+			handle.value = requestAnimationFrame(loop);
+			var current = new Date().getTime(),
+				delta = current - start;
+
+			if(delta >= delay) {
+				fn.call();
+				start = new Date().getTime();
+			}
+		}
+
+		handle.value = requestAnimationFrame(loop);
+		return handle;
+	};
+
+	/**
+	 * Behaves the same as clearInterval except uses cancelRequestAnimationFrame() where possible for better performance
+	 * @param {int|object} fn The callback function
+	 */
+	window.clearRequestInterval = function(handle) {
+		window.cancelAnimationFrame ? window.cancelAnimationFrame(handle.value) :
+		window.webkitCancelAnimationFrame ? window.webkitCancelAnimationFrame(handle.value) :
+		window.webkitCancelRequestAnimationFrame ? window.webkitCancelRequestAnimationFrame(handle.value) : /* Support for legacy API */
+		window.mozCancelRequestAnimationFrame ? window.mozCancelRequestAnimationFrame(handle.value) :
+		window.oCancelRequestAnimationFrame	? window.oCancelRequestAnimationFrame(handle.value) :
+		window.msCancelRequestAnimationFrame ? window.msCancelRequestAnimationFrame(handle.value) :
+		clearInterval(handle);
+	};
+
 	// Constructor
 
 	var Sprite = function(el, frames, options){
@@ -106,7 +187,7 @@
 			};
 
 			isPlaying = true;
-			animationTick = window.setInterval(spriteTickHandler, 1000/playOptions.fps);
+			animationTick = window.requestInterval(spriteTickHandler, 1000/playOptions.fps);
 			return this;
 		};
 
@@ -127,7 +208,7 @@
 			var that = this;
 			callback = callback || $.noop;
 
-			window.clearInterval(animationTick);
+			window.clearRequestInterval(animationTick);
 			isPlaying = false;
 
 			if (frame && !animated) {

tests/spec/SpriteSpec.js

@@ -145,7 +145,7 @@ describe('Actual run of play', function(){
 	});
 
 	it('Play is running', function(){
-		// sprite.play();
+		sprite.play();
 		// sprite.play({fps: 12, from: 10});
 		// sprite.play({fps: 12, loop: false});
 		// sprite.play({fps: 10, from: 22}); // There is no 22