animatorgroup example

[Peter_Chea]

Hi guys, my next project will require a lot of complex animation. Can you provide me with an example of animating attributes of two different objects in sequence using animator and animatorgroup. I am more interested in a scripting example more than tag example.

[Peter_Chea]

related to this. I want to find a way to add a animator to the animatorgroup. I wasn't able to find anything in the documentation on that.

var an1 = new LzAnimator(parent.view1, {attribute : "x", to:"100", duration : 1000, start : false} );
var an2 = new LzAnimator(parent.view2, {attribute : "y", to:"100", duration : 1000, start : false} );
var angroup = new LzAnimatorGroup(this);
angroup.add(an1);
angroup.add(an2);
angroup.start();

[antun]

Here's two ways to do what I think you're asking:


<canvas debug="true">

<class name="myAnim" bgcolor="0xff0000" width="50" height="50" />

<!-- Scripting -->
<myAnim name="view1">
<animatorgroup name="angroup" />
</myAnim>

<!-- Declarative -->
<myAnim name="view2" bgcolor="0x00ff00">
<animatorgroup name="angroup" start="false">
<animator attribute="x" to="100" duration="1000"
relative="true" />
<animator attribute="y" to="100" duration="1000"
relative="true" />
</animatorgroup>
</myAnim>



<view name="buttons" y="75">
<simplelayout axis="x" spacing="10" />
<button>Animate the scripting way
<!-- Scripting -->
<method event="onclick">
var an1 = new LzAnimator(view1.angroup, { attribute : "x",
to:"100",
duration : 1000,
start : false} );
var an2 = new LzAnimator(view1.angroup, { attribute : "y",
to:"100",
duration : 1000,
start : false} );
view1.angroup.start();
</method>
</button>

<button>Animate the declarative way
<!-- Declarative -->
<method event="onclick">
view2.angroup.start();
</method>
</button>
</view>


</canvas>


The first is the procedural or scripting way you requested, but we don't recommend it. You basically instantiate a new animator, and set its parent to an animatorgroup:


var an1 = new LzAnimator( view1.angroup, { ... } );


The second method is the more declarative (tag-based) way. You can name both the animator and animatorgroup tags, so you can still refer to them in script, and change properties based on user actions, e.g.


myAnimatorGroup.myAnimator.setAttribute( 'from', 300 );


... but the code is much more readable and maintainable.

-Antun

[Peter_Chea]

Hi Antun, I am actually looking for example of grouping animation of two different views. The examples you gave me seem to be different animations on the same view. I asked because I am considering writing reusable animations that are independent of the specific views. An example of this might be a page transition animation:

var transition = new PageTransition(curView, nextView);
transition.start();

This kind of code will reduce my copy and past of animations in future projects.

[antun]

Each <animator> or <animatorgroup> is only going to control one view. There's no way around that, although we are working on APIs to make it easier to animate different views.

What you can do is to define a custom animatorgroup class that you apply to whatever view you like:


<canvas debug="true">

<class name="myAnim" bgcolor="0xff0000" width="50" height="50" />

<class name="animateOut" extends="animatorgroup"
start="false">
<animator attribute="x" to="200" duration="1000"
relative="true" />
<animator attribute="y" to="625" duration="1000"
relative="true" />
</class>

<!-- Declarative -->
<myAnim name="myView" bgcolor="0x00ff00">
<animateOut name="angroup" />
</myAnim>

<view name="buttons" y="75">
<simplelayout axis="x" spacing="10" />
<button>Animate the declarative way
<!-- Declarative -->
<method event="onclick">
myView.angroup.start();
</method>
</button>
</view>

</canvas>


To solve what you're trying to do, you could have a second animatorgroup (or just animator if its in a single direction), called "animateIn". You would still need to use delegates to have the animateIn() method get called when the animateOut() method finished; that's just the nature of an event-based system.

Does that help you out?

-Antun

[Peter_Chea]

Thanks Antun, that helps with part of what I need.