Gallery

Modules

Documentation

Context Navigation

YUI Library is not responsible for bugs or support with this module. It is available as a free service. For support please contact the module owner with the provided links.

AnimLoop (gallery-animloop) on cdn

Last Updated: 02/10/11

+ 0 -

Nicholas C. Zakas

YUI Developer

See 7 more by this user.

Created: 02/7/11
Last CDN Push: 02/9/11
Build Tag: gallery-2011.02.09-21-32
Project: YUI 3
License: YUI BSD
YUI Version: 3.3.0
Free for use.

Game programming using canvas, or even older DOM elements, is complex because it's difficult to precisely time when animations should occur. Firefox added an experimental API for better-performing animations, and WebKit soon copied it. The AnimLoop makes it easy to use the best-performing implementation of an animation loop so you can focus on creating games or other experiences that require frequent animation. In browsers that support the new APIs, the framerate is automatically throttled; for all others, it's fixed at a max of 60 fps.

The technique used in this module is based on this blog post:
http://nokarma.org/2010/02/02/javascript-game-development-the-game-loop/

Code Sample

<script src="http://yui.yahooapis.com/3.3.0/build/yui/yui-min.js"></script>

YUI({
    //Last Gallery Build of this module
    gallery: 'gallery-2011.02.09-21-32'
}).use('gallery-animloop', function(Y) {
 
    Y.AnimLoop.on("beforedraw", function(){
        //do your animation processing here
    });
 
 
    //start the loop
    Y.AnimLoop.start();
 
 
    //stop the loop, you can always call start() again later
    Y.AnimLoop.stop();
 
});

Forum Posts

Subject	Author	Date
Useful code for this lib?	Andrew Wooldridge	02/23/11