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.