In the Boxely UI Toolkit, you can animate any part of a box's style, including its position. In this exercise, we will animate a box by moving it from left to right and then back to the left again.
Create a scene and add the target box you wish to animate. Because we intend to animate the absolute position of the target box, in the style associated with the target box, you must set the position attribute to "fixed".
<?xml version="1.0" encoding="utf-8" ?>
<?import href="box://ocpToolkit/content/core/coreGadgets.box"?>
<?import href="box://ocpToolkit/theme/default/toolkit.box"?>
<window xmlns="http://www.aol.com/boxely/box.xsd"
xmlns:s="http://www.aol.com/boxely/style.xsd"
xmlns:on="http://www.aol.com/boxely/reaction.xsd"
s:height="800" s:width="800" s:top="center" s:left="center"
translucent="true" >
<library xmlns="http://www.aol.com/boxely/resource.xsd"
xmlns:box="http://www.aol.com/boxely/box.xsd"
xmlns:s="http://www.aol.com/boxely/style.xsd"
xmlns:on="http://www.aol.com/boxely/reaction.xsd" >
<style target="opacityDemoBox" s:height="200" s:width="200"
position="fixed" s:fill="green" s:opacity="50" />
</library>
<vbox id="opacityDemoBox" />
</window>
Within the scene's library tags, create the first animation to move the box from its current position to 400 pixels.
<animation id="moveRight">
<animate name="left" type="style" from="before" to="400"
begin="0ms" end="500ms"/>
</animation>
Create the second animation to move the box back to its original position.
<animation id="moveBack">
<animate name="left" type="style" from="before" to="50"
begin="0ms" end="500ms"/>
</animation>
Associate the animations with the target box through the box's style attribute.
<style target="opacityDemoBox" s:height="200" s:width="200"
position="fixed" s:fill="green" s:opacity="50" >
<attribute name="myRightAnimation" animate="url(#moveRight)"/>
<attribute name="myBackAnimation" animate="url(#moveBack)"/>
</style>
Now that the animations are associated with the box via its style, we can trigger these animations by setting the myLeftAnimation and myBackAnimation attributes to true using JavaScript. When the animation is done, we can remove these attributes to reset the animations.