animatePNG.js

// jQuery PNG Animation
// by Josh Pyles (Pixelmatrix Design LLC)
// 
// Licensed under MIT License - http://www.opensource.org/licenses/mit-license.php
//
// Usage:
// $("#container").animatePNG("/images/animation.png", 32, 32, 10, {fps: 10, horizontal: false});
// Creates a div that is animated inside of #container and returns the animating div
//
// $(…).animatePNG(imageURL, w, h, frames, options);
// ---------------------------------------------------------
// imageURL (string): URL to the image to be animated (can be relative)
// w (integer): width (in pixels) of the image frame
// h (integer): height (in pixels) of the image frame
// frames (integer): number of frames in the animation
// options (object):
// - fps (integer): number of frames per second to render
// - horizontal (boolean): true if the frames go horizontal (left to right), or false if they go vertical (top to bottom)
//

(function($) {
  //
  // plugin definition
  //
  $.fn.animatePNG = function(imageURL, w, h, frames, options) {
    
    var opts = $.extend({}, $.fn.animatePNG.defaults, options);
    var $this = $(this);
    
    // setup local variables
    var animation = {
      o: $.meta ? $.extend({}, opts, $this.data()) : opts,
      container: $("<div class='animation'></div>"),
      imgW: null,
      imgH: null,
      fpms: null,
      t: null,
      x: 0,
      y: 0,
      h: h,
      w: w,
      imageURL: imageURL,
      frames: frames
    };
    
    //calculations
    animation.imgW = animation.o.horizontal ? 0 - (animation.frames * animation.w) : 0;
    animation.imgH = animation.o.horizontal ? 0 : 0 - (animation.frames * animation.h);
    animation.fpms = Math.round(1000 / animation.o.fps);
    
    //preload
    var img = new Image;
    img.src = animation.imageURL;
    
    function nextX() {
      if (animation.o.horizontal) {
        animation.x = ((animation.x - animation.w) > animation.imgW) ? (animation.x - animation.w) : 0;
        return animation.x;
      } else {
        return 0;
      }
    }
    
    function nextY() {
      if (animation.o.horizontal) {
        return 0;
      } else {
        animation.y = ((animation.y - animation.h) > animation.imgH) ? (animation.y - animation.h) : 0;
        return animation.y;
      }
    }
    
    function iterate() {
      animation.container.css("background-position", nextX() + "px " + nextY() + "px");
    }
    
    function start() {
      animation.t = setInterval(iterate, animation.fpms);
      animation.container.data("animation", animation);
    }
    
    animation.container.css({
      "background-color": "transparent",
      "background-image": "url('" + animation.imageURL + "')",
      "background-position": "0px 0px",
      "background-repeat": "no-repeat",
      "width": animation.w,
      "height": animation.h
    });
    
    $this.append(animation.container);
    
    start();
    
    return animation.container;
  };
  
  $.fn.animatePNG.stop = function($el) {
    var a = $el.data("animation");
    window.clearInterval(a.t);
  };
  
  //
  // plugin defaults
  //
  $.fn.animatePNG.defaults = {
    fps: 20,
    horizontal: true
  };
})(jQuery);