AnimatedPNG API


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.


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



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.


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.



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.


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


setFrameDelay(frame, delay);

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


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



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



Restarts the animation if it has been stopped.



Stops the animation on the current frame.

Leave a Reply