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.

Plugin source: zip format (3.99K) (last updated on 2008-06-04)

For people who would like to create animations in this wiki, the above file does not need to be downloaded (just follow the instructions below) – it is merely for Dokuwiki system administrators.

This plugin mainly depends on JavaScript to run, so make sure your browser supports JS (or JS has been enabled).

The basic syntax:

<ani id url type max height interval|title>
description
</ani>

There are 8 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.
• height: the height of animation frames in pixel; an integer.
• interval: the time interval (duration) between animation frames; a non-negative real number.
• title: the title of the animation.
• description: a description of the animation.

Please do note that the first 6 parameters are seperated by spaces, while the 7th parameter is seperated by ”|” and the last one is in the body of the <ani> tag; besides, none of these parameters are optional, i.e. you must set the values for all of them.

You can be more clear about the above parameters if you know the detailed process to generate an animation:

1. First some HTML elements are created and distinguished by id (that's why it should be unique for each animation in the same page)
2. A block of JS code is written to (1) catenate url, the numbers from 1 to max, and type to generate the locations of the images frames (2) download all the animation frames and store them in the HTML elements; during this process, there is a bar showing the progress of downloading
3. After all the animation frames are downloaded, the progress bar disappears and the animation's height is set to height
4. The time interval of the animation is set to interval; the title is written in the top of the animation; the description is written in the bottom

The method is quite naive: just change the CSS attribute display of all the images to show the i-th frame in a loop and hide all the other frames, for i = 1, 2, …, max.

The time interval between animation frames is controlled by two JS functions setTimeout() and clearTimeout().

The interface just looks like a media player, so perhaps you can figure out what these buttons do without the explanation below.

The functions of the 9 buttons in the interface are as follows:

1. > Play;
2. O Pause;
3. + Increase the speed of demonstrating animation frames one by one; the step of increasing is determined in the text field (initially hidden; see the last button)
4. - Slow down the animation;
5. << The previous frame;
6. >> The next frame;
7. |< The first frame;
8. >| The last frame;
9. <> A switch to show/hide more controls below;

You can also change the values in the text fields when they are visible. Leave the fields to implement the changes. For the check box Loop, when it is checked, the animation will be played over and over again (infinitely), otherwise it will be only played once.

Suppose we have created a sequence of 30 images with height equal to 300px: 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 300 0.1|An animation example>
Here is the description for the animation.
</ani>

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

Write your feedbacks here.