# Graphics and SMIL Animation

SVG represents animation as elements interspersed through the main structure which represents the organization of the graphics. Animation elements appear as children of the graphics elements they animate. To allow focussing on animation, a timeline view shows all animation elements and groups them together according to the graphics elements they animate.

## The Timeline View

The timeline view displays animations associated with graphics objects. Each animated object of the document is represented there, with a graphical representation of its animation elements.

The following figure shows the three animated objects of a document. Each object is represented on the left side of the view by a label with a white background and a box next to its label. Clicking the label highlights the corresponding element in the formatted view, thus showing the context of that element. If the graphics element has a single animation element (like element Rectangle in the figure), this animation element is displayed as a colored bar. If there are several elements, a single gray bar represents the whole animation (Circle, at the bottom of the figure), and a '+' button in the label allows to view an expanded representation. Element MyText is an example of such an expanded representation where each animation element is represented by a colored bar. The button becomes a '-' that allows to go back to the condensed representation.

The position of an animation on the timeline depends on when it starts and stops acting, and the color of each bar reflects the type of animation:

- yellow for `animate`,
- red for `set`,
- green for `animateMotion`,
- dark blue for `animateColor`,
- light blue `animateTransform`

## Editing Animations

The timeline view is useful to get a quick overview of the animation of all graphics in a document, but it also allows to edit animations. Existing elements can be modified. Most manipulations are done directly on the timeline, such as moving a bar or changing its length. This is immediately reflected in other views where the corresponding attributes of the animation element are updated (attributes `begin` and `dur` in that case).

A movement for an existing graphics element is created as follows:

- Select the start time of the animation:

  Click Ctrl + Left mouse button on the red timeline slider and move it to the correct start position.

- Select the element of interest in the formatted view:

  The element should have an ID. This ID will be displayed as the element label.

- Create a new animation element in the timeline view:

  Click on the top left button in the timeline view.

- Mark the starting and ending positions of the movement in the formatted view:

  Click Ctrl + Left mouse button on the displayed icon in the formatted view. This allows to control the key positions of the animated element in the context of the other graphics elements. Simply draw the motion path of the element.

- Finally, going back to the timeline view, one can move and/or resize the new generated colored bar to adjust the timing.

Manipulating timing in the timeline view is more comfortable, as the synchronization of a particular element with the other animated elements is more clearly visible in this view. But the other views are still there, and some parameters may be adjusted in the structure view by editing attributes, as well as in the source code if necessary.

A color change for an existing graphics element is created as follows:

- First select the element of interest in the main view,
- then click on the top left button.

A bar representing an animation can be manipulated exactly like a rectangle in the document. Obviously some constraints are put in the timeline view. For instance, colored bars can move only horizontally along the time axis and their height cannot be changed individually. These constraints follow from the semantics of the timeline graphic language.