Animation loop

build/gallery-animloop/gallery-animloop-debug.js

@@ -0,0 +1,102 @@
+YUI.add('gallery-animloop', function(Y) {
+
+/*
+ * Copyright (c) 2011 Nicholas C. Zakas. All rights reserved.
+ * http://www.nczonline.net/
+ */
+
+/**
+ * Animation loop for optimizing game animation control. Based on
+ * technique described at http://nokarma.org/2010/02/02/javascript-game-development-the-game-loop/.
+ * @module gallery-animloop
+ */
+/*global YUI*/
+
+//-----------------------------------------------------------------------------
+// Local Variables
+//-----------------------------------------------------------------------------
+
+var run = false,                    //determines if the loop should be executed
+    runLoop,                        //method that starts the loop
+    event = {type:"beforedraw"},    //event that fires before it's time to draw
+    AnimLoop;                       //main object
+
+//-----------------------------------------------------------------------------
+// Main Object
+//-----------------------------------------------------------------------------
+
+/**
+ * Represents an animation loop, set for optimal frames-per-second rates
+ * using either setInterval() or available requestAnimationFrame methods.
+ * In order to use, assign an event handler to the "beforedraw" event,
+ * this is where you should do any calculations for animation.
+ * @class AnimLoop
+ * @static
+ */
+AnimLoop = {
+
+    /**
+     * Starts the animation loop.
+     * @method start
+     * @return {void}
+     */
+    start: function(){
+        run = true;
+        runLoop();
+    },
+
+    /**
+     * Stops the animation loop by setting the run variable to false.
+     * The next time a draw happens, this flag is checked and the
+     * animation loop will be aborted.
+     * @method stop
+     * @return {void}
+     */
+    stop: function(){
+        run = false;
+    }
+};
+
+//inherit custom events
+Y.augment(AnimLoop, Y.Event.Target);
+
+//determine the best function to use for drawing
+runLoop = (function(){
+    var innerFunction,
+        intervalId;
+    if (window.mozRequestAnimationFrame){
+        innerFunction = function() {
+            if (run){
+                AnimLoop.fire(event);
+                window.mozRequestAnimationFrame(innerFunction);
+            }  
+        };
+    } else if (window.webkitRequestAnimationFrame){
+        innerFunction = function() {
+            if (run){
+                AnimLoop.fire(event);
+                window.webkitRequestAnimationFrame(innerFunction);
+            }  
+        };
+    } else {
+        innerFunction = function(){
+            intervalId = setInterval(function(){
+                if (run){
+                    AnimLoop.fire(event);
+                } else {
+                    clearInterval(intervalId);
+                }
+            }, 1000 / 60);
+
+        }
+    }
+
+    return innerFunction;
+})();
+
+//export
+Y.AnimLoop = AnimLoop;
+
+
+
+}, '@VERSION@' ,{requires:['event-base','event-custom-base']});

build/gallery-animloop/gallery-animloop.js

@@ -0,0 +1,102 @@
+YUI.add('gallery-animloop', function(Y) {
+
+/*
+ * Copyright (c) 2011 Nicholas C. Zakas. All rights reserved.
+ * http://www.nczonline.net/
+ */
+
+/**
+ * Animation loop for optimizing game animation control. Based on
+ * technique described at http://nokarma.org/2010/02/02/javascript-game-development-the-game-loop/.
+ * @module gallery-animloop
+ */
+/*global YUI*/
+
+//-----------------------------------------------------------------------------
+// Local Variables
+//-----------------------------------------------------------------------------
+
+var run = false,                    //determines if the loop should be executed
+    runLoop,                        //method that starts the loop
+    event = {type:"beforedraw"},    //event that fires before it's time to draw
+    AnimLoop;                       //main object
+
+//-----------------------------------------------------------------------------
+// Main Object
+//-----------------------------------------------------------------------------
+
+/**
+ * Represents an animation loop, set for optimal frames-per-second rates
+ * using either setInterval() or available requestAnimationFrame methods.
+ * In order to use, assign an event handler to the "beforedraw" event,
+ * this is where you should do any calculations for animation.
+ * @class AnimLoop
+ * @static
+ */
+AnimLoop = {
+
+    /**
+     * Starts the animation loop.
+     * @method start
+     * @return {void}
+     */
+    start: function(){
+        run = true;
+        runLoop();
+    },
+
+    /**
+     * Stops the animation loop by setting the run variable to false.
+     * The next time a draw happens, this flag is checked and the
+     * animation loop will be aborted.
+     * @method stop
+     * @return {void}
+     */
+    stop: function(){
+        run = false;
+    }
+};
+
+//inherit custom events
+Y.augment(AnimLoop, Y.Event.Target);
+
+//determine the best function to use for drawing
+runLoop = (function(){
+    var innerFunction,
+        intervalId;
+    if (window.mozRequestAnimationFrame){
+        innerFunction = function() {
+            if (run){
+                AnimLoop.fire(event);
+                window.mozRequestAnimationFrame(innerFunction);
+            }  
+        };
+    } else if (window.webkitRequestAnimationFrame){
+        innerFunction = function() {
+            if (run){
+                AnimLoop.fire(event);
+                window.webkitRequestAnimationFrame(innerFunction);
+            }  
+        };
+    } else {
+        innerFunction = function(){
+            intervalId = setInterval(function(){
+                if (run){
+                    AnimLoop.fire(event);
+                } else {
+                    clearInterval(intervalId);
+                }
+            }, 1000 / 60);
+
+        }
+    }
+
+    return innerFunction;
+})();
+
+//export
+Y.AnimLoop = AnimLoop;
+
+
+
+}, '@VERSION@' ,{requires:['event-base','event-custom-base']});

src/gallery-animloop/build.properties

@@ -0,0 +1,4 @@
+builddir=../../../builder/componentbuild
+component=gallery-animloop
+component.jsfiles=animloop.js
+component.requires=event-base,event-custom-base

src/gallery-animloop/build.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project name="YUI" default="local">
+    <property file="build.properties" />
+    <import file="${builddir}/3.x/bootstrap.xml" 
+            description="Default Build Properties and Targets" />
+</project>

src/gallery-animloop/js/animloop.js

@@ -0,0 +1,96 @@
+/*
+ * Copyright (c) 2011 Nicholas C. Zakas. All rights reserved.
+ * http://www.nczonline.net/
+ */
+
+/**
+ * Animation loop for optimizing game animation control. Based on
+ * technique described at http://nokarma.org/2010/02/02/javascript-game-development-the-game-loop/.
+ * @module gallery-animloop
+ */
+/*global YUI*/
+
+//-----------------------------------------------------------------------------
+// Local Variables
+//-----------------------------------------------------------------------------
+
+var run = false,                    //determines if the loop should be executed
+    runLoop,                        //method that starts the loop
+    event = {type:"beforedraw"},    //event that fires before it's time to draw
+    AnimLoop;                       //main object
+
+//-----------------------------------------------------------------------------
+// Main Object
+//-----------------------------------------------------------------------------
+
+/**
+ * Represents an animation loop, set for optimal frames-per-second rates
+ * using either setInterval() or available requestAnimationFrame methods.
+ * In order to use, assign an event handler to the "beforedraw" event,
+ * this is where you should do any calculations for animation.
+ * @class AnimLoop
+ * @static
+ */
+AnimLoop = {
+
+    /**
+     * Starts the animation loop.
+     * @method start
+     * @return {void}
+     */
+    start: function(){
+        run = true;
+        runLoop();
+    },
+
+    /**
+     * Stops the animation loop by setting the run variable to false.
+     * The next time a draw happens, this flag is checked and the
+     * animation loop will be aborted.
+     * @method stop
+     * @return {void}
+     */
+    stop: function(){
+        run = false;
+    }
+};
+
+//inherit custom events
+Y.augment(AnimLoop, Y.Event.Target);
+
+//determine the best function to use for drawing
+runLoop = (function(){
+    var innerFunction,
+        intervalId;
+    if (window.mozRequestAnimationFrame){
+        innerFunction = function() {
+            if (run){
+                AnimLoop.fire(event);
+                window.mozRequestAnimationFrame(innerFunction);
+            }  
+        };
+    } else if (window.webkitRequestAnimationFrame){
+        innerFunction = function() {
+            if (run){
+                AnimLoop.fire(event);
+                window.webkitRequestAnimationFrame(innerFunction);
+            }  
+        };
+    } else {
+        innerFunction = function(){
+            intervalId = setInterval(function(){
+                if (run){
+                    AnimLoop.fire(event);
+                } else {
+                    clearInterval(intervalId);
+                }
+            }, 1000 / 60);
+
+        }
+    }
+
+    return innerFunction;
+})();
+
+//export
+Y.AnimLoop = AnimLoop;