Mootools Animated Image (PNG)

This is a script that creates an animated image (png or gif/jpg).

Demo

Javascript	
window.addEvent('domready',function(){
	
	var myAnimation = new AnimateImage('gnome-spinner.png',{
		width: 22,
		height: 22,
		rows: 5,
		cols: 7,
		fps: 10
	});
	$(myAnimation).inject($('spinner'));
	
});

HTML
<div id="spinner"></div>
Image
GNOME-Spinner

Docs

Class: AnimateImage

Syntax

var myAnimation = new AnimateImage(url [,options]);

Arguments

  1. url - (string) the url of the image
  2. options - (object, optional) the options for the animation

Options

AnimateImage.start

This method will start the animation

AnimateImage.stop

This method will stop the animation

AnimateImage.reset

This method will stop and restart the animation

AnimateImage.getFrame

This method will return the frame number where the animation is. This value will between 0 and (options.cols * options.rows)

AnimateImage.setFrame

This method will set the animation to a cerain frame.

Syntax

var myAnimation = new Awf.pngAnimation(url [,options]);
myAnimation.setFrame(frame);

Arguments

  1. frame - (int) the frame number between 0 and (options.cols * options.rows)

AnimateImage.set

This method will set one of the options and reset the animation.

Syntax

var myAnimation = new Awf.pngAnimation(url [,options]);
myAnimation.set(optionKey,value);

Arguments

  1. optionKey - (string) the option name.
  2. value - (mixed) the new value of the option

AnimateImage.get

This method will set one of the options and reset the animation.

Syntax

var myAnimation = new Awf.pngAnimation(url [,options]);
myAnimation.get(optionKey);

Arguments

  1. optionKey - (string) the option name.

AnimateImage.speed

This method will lets you set the speed

Syntax

var myAnimation = new Awf.pngAnimation(url [,options]);
myAnimation.speed(upOrDown[,value]);

Arguments

  1. upOrDown - (string) up to increase or down to decrease the the animation speed
  2. value - (int: default 5) The

Element.animateImage

You can use this method with the image tag. This method will search for the src tag and will apply the animation

Syntax

<img src="gnome-spinner.png" id="spinner" />


document.id('spinner').animateImage([options]);

Arguments

  1. options - (object, optional) the options for the animation

Element.Properties.set

Like Fx.Tween you can use Element.set and Element.get for animateImage. This will only work for the img tag!

Syntax

<img src="gnome-spinner.png" id="spinner" />
		
		
document.id('spinner').set('animateImage',[options]);

Arguments

  1. options - (object, optional) the options for the animation

Element.Properties.get

Like Fx.Tween you can use Element.set and Element.get for animateImage. This will only work for the img tag!

Syntax

<img src="gnome-spinner.png" id="spinner" />
		
		
document.id('spinner').get('animateImage',[options]);

Arguments

  1. options - (object, optional) the options for the animation

Returns

(object) - AnimateImage instance

Download & links

You can download this from MooTools Forge

Dependencies

License

MIT-style license.

Created By

Aryweb Webdevelopment