spritefy

Command line build tool for spritesheet and css animations generation

npm install spritefy
17 downloads in the last month

Spritefy

Spritefy is a command line tool to generate images spritesheet and css3 animations.

Version 0.5.7

Requirements

  1. ImageMagick
  2. NodeJS
  3. NPM

Installation

npm install -g spritefy

Browser support

  1. Safari 5.1+
  2. Firefox 11+
  3. Opera 11.62+
  4. Chrome 18+

No toy for you IE (Internet Explorer doesn't support css animations)

Usage

On OSX, open Terminal, and type:

spritefy -n <sprite_name> -s <source_folder>

Where -n is the name of the sprite and the css3 animation, and -s is the path to the directory which contains the images sequence.

It will generate a folder called sprites, containing the image sprite and the css file with the animation of the sprite, and a folder scripts containing the jQuery plugin to control the animation.

Example

Suppose I have a folder with an image sequence of pngs generated by Adobe Flash or After Effects, and you want to animate it in HTML/CSS.

This folder is in "~/Desktop/animations/img"

I would open Terminal, navigate to the "animations" folder:

cd ~/Desktop/animations

And run the spritefy command:

spritefy -n sprite -s img/

It will generate a folder called "sprites" in "~/Desktop/animations/sprites", containing 3 files: sprite.png, sprite.css and sprite-compressed.css, and a folder called "scripts" which contains the jquery plugin to control the css animation.

To test the animation, just create an HTML file, load the css file into it, and assign a class to an element, where the name of the class is the name of the [sprite]-animation, eg:

<div class="sprite-animation"></div>

Destination folder

If you want to build the files at a specific folder, run the command with the -d option, eg:

spritefy -n sprite -s img/ -d img-test

If the folder doesn't exist, it will be created.

See the Examples

Spritefy jQuery Plugin

You can control the animations using the jQuery plugin "jquery.spritefy.js" generated in the folder "scripts"

Version 0.5

Requirements

  1. jQuery

Browser support

  1. Safari 5.1+
  2. Firefox 11+
  3. Opera 11.62+
  4. Chrome 18+

No toy for you IE (Internet Explorer doesn't support css animations)

Usage

$(<el>).spritefy(<animation_name>,<options>);

Example

$("#my_el").spritefy("sprite",{duration:1,count:5,onComplete:function(){console.log("completed")}});

Options

  1. duration:[number] - Total duration in seconds of the animation (for each iteration)

  2. delay:[number] - Delay to start the animation

  3. count:[number] || "infinite" - How many times the animation will run, set "infinite" for infinite loop.

Controlling the animation

After you initialize the spritefy in the element, you will have access to the following methods:

  1. animation.play() - Plays the current animation.

     $("#my_el").animation.play()
    
  2. animation.pause() - Pauses the current animation.

     $("#my_el").animation.pause()
    

Animation events

You can set callbacks for the following animation events in the options:

  1. onStart - Triggered when the animation starts

     $("#my_el").spritefy("sprite",{onStart:startHandle})
    
  2. onIteration - Triggered for each time the animation plays in the loop

     $("#my_el").spritefy("sprite",{onIteration:iterationHandle})
    
  3. onComplete - Triggered when the animation ends

     $("#my_el").spritefy("sprite",{onComplete:completeHandle})
    

See the Example

npm loves you