Animation Plugin (for creating animations)

The animation plugin can generate an animation from a sequence of images, e.g. 1.png, 2.png, 3.png, … The animation is driven by HTML & JS, and the JS library is from SciAnimator.

Plugin source: zip format (53K) (last updated on 2011-02-02)

For people who want to create animations in this wiki, the above file does not need to be downloaded (just follow the instructions below).

• 2011-02-02: the 3rd version
  • the syntax has changed again, but this should not affect users; I've tried my best to maintain compatibility with old versions
• 2011-01-01: the plugin was rewritten using SciAnimator;
  • the last version is not completely compatible with the new version
    • the width might not be correct
    • there might be a tag </ani> which is not parsed any more
  • the description field in the last version was discarded
  • the title field was replaced by opts
• 2008-06-20: the first version

Any web browsers except the Microsoft Internet Explorer, e.g. Firefox, Safari, Google Chrome, Opera… The animations in the Internet Explorer might not be stable.

The syntax:

<ani id url type max interval autoplay navigator width | opts>

There are 9 parameters in total:

• id: a unique identifer of each animation in the same page
• url: the directory of the animation frames. NOT the actual URL of any animation frames; only a directory!
• type: the image format. E.g. png, jpeg, etc
• max: the maximum number of animation frames; an integer
• interval: the time interval (duration) between animation frames in seconds; a non-negative real number
• autoplay: (optional) if a string autoplay is provided here, the animation will start playing once the page is loaded; any other strings (including empty strings) means do not autoplay the animation
• navigator: (optional) whether to include a navigator in the toolbar panel; default to omit the navigator because it is too wide; if a string true is provided here, the navigator will be included, but bear in mind that you should specify the width option as well in this case
• width: (optional) the width of the animation frames in pixel; an integer
• opts: additional JavaScript options, e.g. 'theme': 'dark' (note the single quotes are necessary in JS); see SciAnimator for more options

Please do note that the first 8 parameters are separated by spaces, while the 9th parameter is seperated by ”|”; besides, autoplay, navigator, width and opts can be left empty.

The interface just looks like a movie player, so perhaps you can figure out what these buttons do without any explanations.

Suppose we have created a sequence of 30 images with width equal to 400px: 1.png, 2.png, 3.png, …, 30.png, and they are in this directory ”http://animation.yihui.name/_media/wiki:”. Now we wish to create an animation in this wiki specifying the initial time interval to be 0.1:

<ani example http://animation.yihui.name/_media/wiki: png 30 0.1 autoplay true 400|'utf8': false, 'theme': 'dark'>

which will produce:

Here is an example page, and you can find even more in this wiki.

Please drop me an email if you have any suggestions. — Yihui Xie 2011/01/01 23:11