12. Animation


All visual components can have animations associated with them. These animations can be used to move a component, or change its alpha, and also to trigger actions.

12.2 Adding animations: the <animation> tag

The <animation> tag is used to add an animation instance to a component. By default, animations are not played. They can be set to play by setting the state attribute to play or by sending it an action telling it to play.

12.3 Keyframing: the <keyframe> tag

Animations can be specified by keyframes. The structure for keyframe animations is given in the following example:

<x2d width="4" height="3">
  <rectangle id="me">
    <animation id="Animation1" interpolation="linear">
      <keyframe frame="1" color="1 0 0 1"/>
      <keyframe frame="2" color="0 0 1 1"/>
    <animation id="Animation2" interpolation="cubic" controlpoints="1 3 4 6">
      <keyframe frame="1.5" size="40 40"/>
      <keyframe frame="4" size="80 80"/>
    <animation id="Animation3" looped="true">
      <keyframe frame="1" pos="0 0"/>
      <keyframe frame="2" pos="50 50"/>
      <keyframe frame="3" pos="110 50"/>
      <keyframe frame="4" pos="100 50"/>
      <keyframe frame="5" pos="75 50"/>
      <keyframe frame="6" pos="50 50"/>

Notice that a component can have an arbitrary number of animations, and each <animation> can have an arbitrary number of keyframes. If less than two <keyframe> tags are specified, then the animation is not carried out.

Animation parameters are interpolated according to the interpolation attribute within the <animation> tag. By default, linear interpolation is used, but cubic interpolation can also be specified. For finer grain animations, more keyframes can be added. If necessary, It is possible to provide one keyframe per frame of animation. This provides the most flexibility since no interpolation between frames will occur.

Animations can also be looped for continuous playback. To set the playback mode to loop, use the loop attribute and set it to true. Its default value is false.

12.4 Playback actions

The playback of an animation can be controlled through the action tags. The possible actions include: play, stop, goto, pause, rewind, and forward. The format for specifying these commands is as follows:

<play target="Animation1"/>
<goto target="Animation2" frame="20"/>

These action events will be dispatched whenever a given condition occurs and activates a trigger. See the section on Interactivity.