Add Animation
This exercise will demonstrate how to animate the attributes of
an object. We will animate the position of the text when it begins
and ends. This will cause the text to scroll into and out of view.
The animation will be done on the position of the text. Thus add
the <transformation> element, with a default position of "0
0". The media object will continue to be positioned from the
<region> element.
Add the <animateMotion> element animate the position of the
text. The <animateMotion> element is a child of the <transformation>
element which is a child to a media object. The <animateMotion>
element animates the position of the text. An <animate> element
could be used by animating the translation attribute, for example
<animate attributeName="translation">.
The animation has a begin time to start the animation and a duration
to indicate how long the animation should last. The arrival scroll
of the text starts at the same time as the text and lasts for 2
seconds. The departure scroll of the text starts at 2 seconds before
the end of the text and lasts for 2 seconds.
The from and to attributes indicate the path the animation will
take. Note that the text is clipped during scrolling. The clipping
happens because the region tag has a clipping rectangle specified
by the size attribute.
<xmt-o ...>
<head>
<layout ...>
<topLayout ...>
<region id="Slide" translation="0 16" size="300 200" z-index="1"/>
<region id="Title" translation="0 -126" size="208 18" z-index="2"/>
</topLayout>
</layout>
...
</head>
<body>
<par>
...
<string ...>
<transformation>
<animateMotion begin="text1.end-2s" dur="2s" from="0 0" to="0 -18"/>
</transformation>
<use .../>
<use .../>
</string>
<string ...>
<transformation>
<animateMotion begin="text2.begin" dur="2s" from="0 18" to="0 0"/>
<animateMotion begin="text2.end-2s" dur="2s" from="0 0" to="0 -18"/>
</transformation>
<use .../>
<use .../>
</string>
<string ...>
<transformation>
<animateMotion begin="text3.begin" dur="2s" from="0 18" to="0 0"/>
<animateMotion begin="text3.end-2s" dur="2s" from="0 0" to="0 -18"/>
</transformation>
<use .../>
<use .../>
</string>
<string ...>
<transformation>
<animateMotion begin="text4.begin" dur="2s" from="0 18" to="0 0"/>
</transformation>
<use .../>
<use .../>
</string>
</par>
</body>
</xmt-o>
 |
The following is the complete XMT-O file used for this exercise:
IBMSlideShow6.xml
Here is a snap shot of the exercise:
In the next exercise, you will add
transitions between the pictures.
|