Spritefy
Spritefy is a command line tool to generate images spritesheet and css3 animations.
Version 0.5.7
Requirements
Installation
npm install -g spritefy
Browser support
- Safari 5.1+
- Firefox 11+
- Opera 11.62+
- 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 <dest_folder> 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
Browser support
- Safari 5.1+
- Firefox 11+
- Opera 11.62+
- 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
-
duration:[number] - Total duration in seconds of the animation (for each iteration)
-
delay:[number] - Delay to start the animation
-
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:
-
animation.play() - Plays the current animation.
$("#my_el").animation.play()
-
animation.pause() - Pauses the current animation.
$("#my_el").animation.pause()
Animation events
You can set callbacks for the following animation events in the options:
-
onStart - Triggered when the animation starts
$("#my_el").spritefy("sprite",{onStart:startHandle})
-
onIteration - Triggered for each time the animation plays in the loop
$("#my_el").spritefy("sprite",{onIteration:iterationHandle})
-
onComplete - Triggered when the animation ends
$("#my_el").spritefy("sprite",{onComplete:completeHandle})