To get started, let's look at the code required to animate the opacity property of a box, as shown in the following images.
Tabelle 8.1. Die Sichtbarkeit einer Box animieren
|
Upon loading, the opacity of the box is 100% (opaque). |
|
|
The animation changes the opacity from 100% to 0%. |
|
|
Upon completion, the opacity is 0% (transparent). |
|
To program this type of animation, you must:
Create and instantiate the target object you wish to animate.
Define the animation for the target object using the animation element.
Associate the animation with the target object by adding an attribute element to the style element associated with the target.
Use event handling to play the animation when an event occurs. (To simplify matters, in the example that follows, we'll play the animation when the application first loads, rather than listening for a specific event.)
The following code demonstrates how it works.
<?xml version="1.0" encoding="UTF-8"?>
<window xmlns="http://www.aol.com/boxely/box.xsd"
xmlns:s="http://www.aol.com/boxely/style.xsd"
s:height="200" s:width="275" s:top="center" s:left="center" s:fill="white"
title="My Application" >
<library xmlns="http://www.aol.com/boxely/resource.xsd"
xmlns:s="http://www.aol.com/boxely/style.xsd" >
<!-- Animation -->
<animation id="myOpacityAnimation">
<animate name="opacity" type="style" begin="0ms" end="1250ms" from="100"
to="0" />
</animation>
<style id="myAnimationStyle" target="opacityDemoBox" height="200" width="200"
fill="green" opacity="50" >
<attribute name="boxAnimate" animate="url(#myOpacityAnimation)" />
</style>
</library>
<!-- Target object -->
<vbox id="opacityDemoBox" s:height="180" s:width="255" s:fill="green"
s:opacity="100" s:stroke="black" s:strokeWidth="1" s:margin="10 10 10 10"
boxAnimate="true" />
</window>
In the above code, the vbox element is the target object for the animation.
The animation element is, as its name suggests, the animation. It contains one child element, the animate tag, that animates the opacity attribute of the target object from a value of 100 to a value of 0, over a time interval of 1,250 milliseconds.
The animation is associated with the target object through the target object's style element. In the style element, we have included the child attribute tag, which defines a new attribute named boxAnimate. (Using the attribute tag, you can define any attribute you like; we have selected the name "boxAnimate" arbitrarily.) When the boxAnimate attribute is set to "true", the animation specified in the animate attribute is invoked.
For the purpose of this example, the boxAnimate attribute is set to "true" when the target object first renders. (Notice that boxAnimate is included in the vbox instance declaration.) As an alternative, if you want to trigger the animation at different points during the application, you can use event handlers and JavaScript to set the boxAnimate attribute to "true".