====== 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 [[https://github.com/brentertz/scianimator|SciAnimator]].

===== Download and Install =====

Plugin source: {{wiki:animation.zip|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).

===== Updates =====

  * 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

===== Requirement =====

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.

===== Usage =====

The syntax:

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

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 [[https://github.com/brentertz/scianimator|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 animation interface =====

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

===== Example =====

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'':

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

which will produce:

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

Here is an [[wiki:animation_example|example page]], and you can find even more in this wiki.

===== Feedback =====

Please drop me an email if you have any suggestions. --- //[[xie@yihui.name|Yihui Xie]] 2011/01/01 23:11//