| |
|
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 the author to focus on animation, a timeline view shows all animation elements and group them together according to the graphics element they animate.
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 providing the user with 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 the user to get a 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 the user to get back to the condensed representation.
Position on the timeline depends on when they start and stop acting and the color of each bar reflects the type of animation:
animate,set,animateMotion,animateColor,animateTransform
The timeline view is helpful to quickly perceive the animation of all
graphics in a document, but it also allows an author to edit animation.
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).
When creating a movement for an existing graphics element:
Click Ctrl + Left mouse button on the red timeline slider and move it to the right start position
If the element should have an ID which will be used as a label,
button in the timeline view
This creates a new animation element in that view.
Click Ctrl + Left mouse button on the displayed 
icon in the formatted
view.Doing so, he/she can control the key positions of the animated
element in the context of the other graphics elements. In fact, the user
draws the motion path it as if he/she would draw the shape of any curve
belonging to the document.
Manipulating timing in the timeline view is more comfortable, as this allows the user to better understand the synchronization of a particular element with the other animated elements. The user can also modify the key positions in the main view, just by moving points with the mouse. 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.
When creating a a color change for an existing graphics element, the user
starts by selecting the element of interest in the main view, he/she then
clicks on the top left 
button.
The user can manipulate a bar representing an animation in the same way he/she manipulates 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 can not be changed individually. Those constraints represent the semantics of the timeline graphic language.