Sequential Animation

[antun]

Laszlo makes it easy to animate using code. To have a number of animators go off in sequence, group them into an <animator> and set its process attribute to sequential:


<canvas>
<view bgcolor="blue" width="50" height="50" x="50" y="50"
onclick="this.square.start()">

<animatorgroup name="square" process="sequential"
start="false">

<animator attribute="x" to="300" relative="true"
duration="500" motion="linear" />
<animator attribute="y" to="250" relative="true"
duration="500" motion="easein" />
<animator attribute="x" to="-300" relative="true"
duration="500" motion="easeboth" />
<animator attribute="y" to="-250" relative="true"
duration="500" motion="easeout" />

</animatorgroup>
</view>
</canvas>


Note the different values for the motion attribute, to control the acceleration/deceleration of the animation.

Enjoy!