Now that you have learned about animations and dynamics, we can create a more complex animation. In the exercise that follows, we will create a bouncing version of the Boxely logo.
Create a container for our project.
<?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" id="window" translucent="false" s:fill="#16164c" title="Fancy Animation"> </window>
Add a box to display the image and add two buttons to control the animation.
<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="theBox" position="fixed" top="200" left="300">
<attribute name="myAnimation" animate="url(#myAnimate)"/>
</style>
</library>
<image id="theBox"
src="../../../../ocpSamples/content/animation/boxelylogo.png" />
<hbox s:flex="1" s:vAlign="end">
<button label="Play" on:command="OnPlay();"/>
<button label="Stop" on:command="OnStop();"/>
</hbox>
Combine our animations into a linear timeline, add dynamics to the animating paths, and create our complex animation., as shown below in bold.
<library...>
<animation id="myAnimate" repeatCount="indefinite">
<animate name="left" type="style" from="300" to="50"
begin="0ms" end="1000ms" dynamics="smoothSpline"/>
<animate name="left" type="style" from="50" to="300"
begin="1000ms" end="2000ms" dynamics="spring"/>
<animate name="scale" type="style" from="100"
to="20" begin="0ms" end="1000ms" dynamics="sSpline"/>
<animate name="rotation" type="style" from="0"
to="360" begin="0ms" end="2500ms" dynamics="spring"/>
<animate name="scale" type="style" from="20"
to="200" begin="1000ms" end="1800ms" dynamics="spring"/>
<animate name="scale" type="style" from="200"
to="100" begin="1800ms" end="2400ms" dynamics="smoothSpline"/>
<animate name="top" type="style" from="50" to="200"
begin="0ms" end="800ms" dynamics="gravity"/>
<animate name="top" type="style" from="200" to="50"
begin="1500ms" end="3000ms" dynamics="spring"/>
</animation>
</library>
Notice the timeline for each of the elements creates a linear timeline, where the second animation starts when the first ends. (The first animation ranges from 0ms to 1000ms; the second animation starts at 1000ms and reaches 2000ms, etc.) You can also run multiple animations in the same timeline, which results in the union of the two animations.