API

AnimatedPNG API

Constructor

new AnimatedPNG(name, firstImage, imageCount, delay);

This is used to create and initialise the animation with the basic settings. The animation is created as a Javascript object called
name, on which the other functions are invoked to alter its behaviour.
The firstImage parameter specifies the filename of the first frame of the animation. This should be in the same directory as the current page, and should be of the form <letters><numbers>.png. The library will automatically calculate the filenames of the subsequent frames by deconstructing the filename. If you wish to zero- pad the numbers in the filename, that will also be detected automatically. Some suitable filename formats are as follows:

  • fish1.png
  • fish01.png
  • fish-1.png
  • fish-01.png


The delay parameter will set the delay between all the frames in the animation. If you wish to set different delays for some frames, you can use the setFrameDelay function.

Note: This constructor will not actually draw the animation in the page. You must call the draw function to display the animation.

Parameters

name The name of the animation object
firstImage The filename of the first image of the animation
imageCount The number of frames in the animation
delay The number of milliseconds to wait between each frame of the animation

draw

draw(delayStart);

Draws the animation in the page. This can be called directly after the constructor, or after other function calls if you wish to alter the animation’s settings before it is drawn.

Parameters

delayStart If set to false (the default), the animation will be started immediately. If true, the animation will not be started until startAnimation() is called. You can add startAnimation() to the onload attribute to delay the animation until the whole page has loaded.

setRepeat

setRepeat(repeatFlag);

Specifies whether or not the animation will repeat when it completes. If the repeat is set to true when the animation is not running, it will be restarted.

Parameters

repeatFlag Pass true to enable repeating animation; false to disable the repeat

setFrameDelay

setFrameDelay(frame, delay);

Sets the delay for an individual frame of the animation. This will override the delay specified in the constructor.

Parameters

frame The frame number for which the delay will be set
delay The frame delay, in milliseconds

clearFrameDelays

clearFrameDelays();

Clears any custom frame delays set using setFrameDelay. All frame delays are set to the delay specified in the constructor.

startAnimation

startAnimation();

Restarts the animation if it has been stopped.

stopAnimation

stopAnimation();

Stops the animation on the current frame.