Animating to and from a location

[antun]

Here is a handy pattern for animating an object to a specific location/size, and then returning it to its original position/size without having to do a lot of attribute management. Basically, the object caches its present coordinates and dimensions when the beginning animation starts, and then animates the object back to the cached values when the finish animation runs.

Using this pattern, you can guarantee that am object is in a consistent state in order to perform some UI presentation without worrying about where it was or what it looked like. When finished, the object will automatically return to its previous state. For example, move the smiley to the first location using the button, then drag him around using the mouse. When you're ready to send him back to where he started, all you need do is click the second button.

Ignore the compilation warnings for the time being.


<canvas>
<view id="myThing" resource="smiley.png"
onmousedown="this.dragger.apply()"
onmouseup="this.dragger.remove()">
<dragstate name="dragger" />

<attribute name="oldX" value="0" type="number" />
<attribute name="oldY" value="0" type="number" />
<attribute name="oldWidth" value="0" type="number" />
<attribute name="oldHeight" value="0" type="number" />

<animatorgroup name="animateToSpecificPlace" process="simultaneous"
start="false">
<animator attribute="x" to="200" duration="1000" />
<animator attribute="y" to="50" duration="1000" />
<method event="onstart">
this.parent.setAttribute( "oldX", myThing.x );
this.parent.setAttribute( "oldY", myThing.y );
</method>
</animatorgroup>

<animatorgroup name="returnToStartingState" process="simultaneous"
start="false" >
<animator attribute="x"
to="${this.parent.parent.oldX}" duration="1000" />
<animator attribute="y"
to="${this.parent.parent.oldY}" duration="1000" />
</animatorgroup>
</view>

<view name="controls">
<simplelayout axis="x" spacing="2" />
<button onclick="myThing.animateToSpecificPlace.start()">
Go to first place
</button>
<button onclick="myThing.returnToStartingState.start()">
Go back to where you started
</button>
</view>
</canvas>


Enjoy!

Thanks to Iconfactory (http://www.iconfactory.com/) for the images.

[userfriendly]

hoia, i tried something similar (actually with doing a lot of attribute management), but i ran into trouble when moving the "thing" while its animation was playing: it seems that it uses changed x & y values after that, moving back to a wrong position.

i tried your code also, but with same result. now, is there a way to take away the clickable attribute only during animation? i did set that to false when animation starts (with oninit), but i don't know how to set it to true again when the animation has stopped.

many thanks :)