XAAL Documentation - Animation


A crucial part of the algorithm animation language is the animation functionality. In the following, we will introduce the elements available in XAAL for defining the animations. First, we will introduce the general grouping and timing functionality followed by detailed discussion about the different animation operations. The animation operations have been divided in three groups: graphical primitive transformations (for example, scale and rotate), elementary data structure operations (for example, create and replace), and abstract data structure operations (for example, insert and delete).

Animation Grouping

Similarly to SMIL, animation operations in XAAL can be grouped using elements seq and par. Element seq animates the operations it contains sequentially, while par animates them simultaneously. Both of the elements can contain a description of the animation group and any of the animation effects described in this section. In addition, they can contain nested seq and par elements. Both of the elements can also have an attribute id to be used when identifying the element.

Common Properties of the Animation Operations

All the animation operations have some common attributes and content. First of all, a timing specification can define the starting time of the transformation, its duration, or both. The timing in XAAL is as it is specified in the ITiCSE XML WG report:

  1. no timing definition: the transformation takes place at once and without a duration.
  2. only delay: a delay between the start of the current step and the start of the operation is given. The delay can be specified as a time (based on seconds - s or milliseconds - ms), or on a number of preceding animation frames. Aframe has a meaning similar to a frame of a movie--it represents one component in a series that is involved in visualizing a step. A step is a phase of an animation that illustrates some single interesting event. A step can thus be made up of many frames that, for example, illustrate the effect of a step by smoothly transitioning the visualization from the current state to the next. The transformation has no duration and therefore immediately completes.
  3. only duration: the transformation starts at the beginning of the frame and takes a certain amount of time. Can also be specified by frames, milliseconds, or seconds.
  4. duration and delay: combines the two options above.

The following listing gives an example of the last three of these different options.

<!-- option 2 -->
<timing><delay s="2"/></timing>
<!-- option 3 --> <timing>
<duration ms="200"/></timing>
<!-- option 4 -->
  <duration frames="15"/>
  <delay frames="10"/>

The other element common to most of the transformations is the object-ref tag that refers to the objects transformed or used in a given effect. In addition to the common elements, every animation operation can have an unique id attribute.

Graphical Primitive Animation

These operations are defined for graphical primitives to transform them. To support better the interoperability of algorithm animation systems, we will use the format specified by the ITiCSE XML Working Group. Thus, in XAAL, the following animation operations are available for this:

  • show/hide,
  • move (along a set of coordinates or following an arc or polyline object)
  • rotate,
  • scale,
  • change-style,
  • change-property,
  • group/ungroup to combine a set of objects under one ID,
  • swap-id to swap the IDs used to reference two objects.

To give an example of what the actual XML for the transformations looks like, The listing below gives an example on how to specify a rotation. In the figure next to the XML, it is assumed that obj1 refers to a rectangle that is rotated 30 degrees.

Rotate example<rotate degree="30" type="simple">
  <object-ref id="obj1"/>
    <timing><delay s="2" /></timing>
    <!-- rotation center, can be any node -->
    <coordinate x="10" y="10"/>

The example below shows how to specify a translation (move) of an object group (in this case, circle and text) along another object (a polyline in the example).

Move example<move type="move">
  <object-ref id="objGrp1"/>
    <duration frames="15"/>
    <delay ms="200"/>
  <along-object id="poly"/>

Elementary Data Structure Operations

The elementary data structure operations available in XAAL are create, remove, replace, and swap. Similarly to the other definitions, here are also some duplicate operations included to ease the use of the language.

Moreover, to be consistent with the structure definitions, every operation can have an optional graphical element describing how the operation should be visualized using graphical primitive animation. Every element can also contain a description of it by using the narrative element.


Creation of new structures in the visualizations is one of the basic operations. In XAAL, this is represented by the create element. This element is used to create new structures, which can be new parts to existing structures or completely new. New parts can be created by specifying the target attribute. The newly created structure will then be added as part of the given target. If the attribute is not specified, the structure is added as a new structure.


Removing structures or parts of them is also considered important. This operation is supported in XAAL with the remove element. This element has attribute target to specify the structure(s) to be removed.


Element replace can be used to replace parts of structures with other parts. The replaced structure is specified using target attribute. For example, in the following example the key with value K would be replaced by key with value K2.

<node><key id="key1" value="K"/></node>
<replace target="key1">
  <key id="key2" value="K2"/>


Swapping two structures is often used, especially for keys in an array. However, in XAAL, any two structures can be swapped using the element swap. The swapped structures are specified using attributes swap and with.

Abstract Data Structure Operations

Abstract data structure operations must always be targeted for the top-level structures (e.g. array, tree, etc) instead of the basic building blocks (nodes, etc.). Every abstract operation can contain the same operation as graphical primitive transformations (element graphical) or as elementary data structure operations (element elementary). However, these are optional.


Element insert can be used to insert value(s) into a structure. The target structure is specified using a target attribute that refers to the ID of an existing structure. If the inserted structure is already in some of the other structures, it can be referenced using the source attribute.


Element delete can be used to delete value(s) from structures. Listing below gives an example where the key C is removed from a Binary Search Tree. The example also shows how to include the same operation as elementary data structure operations. Note, however, that the elementary element is an optional part.

<delete target="BST">
  <key value="C"/>
    <remove target="nodeC"/>
    <remove target="edgeCA"/>
    <replace target="edgeMC">
      <edge from="nodeM" to="nodeA"/>
Fixme (Ville)
Add figure


Element search can be used to search value(s) from a structure specified with the attribute target. The following document fragment gives an example of searching for key K in a structure that is a Splay Tree.

<search target="splayTree">
    <duration ms="2000"/>
  <key value="K"/>
Fixme (Ville)
Add figure

Miscellaneous Operations

There are some operations available in XAAL that do not fit in the other categories. These operations are introduced in the following paragraphs.


Pausing the animation can be a good way to add interaction to the animation. A pause can be used, for example, after showing a comment with a question for a student. The pause can be represented in XAAL using the pause element.


Sound can be added in the animation by adding sound elements as an animation operation. The element has attributes that state where the sound-file is located and how long and how many times it should be played. Below is an example on how to use the sound element.

<sound src="http://www.seaworld.org/animal-info/sound-library/audio/dolphins.wav" repeat-count="2">
  <timing><duration s="5"/></timing>