AnimatorGroups let you perform multiple animations either in sequence or in parallel.

Sequential Animations

The first example above shows an AnimatorGroup whose mode is set to "sequential" - this causes the animations in the group to be performed in sequence - useful for animating a property to a destination value and then back to its original value:

    <j:AnimatorGroup animatorId="anim1" mode="sequential">            
        <j:Animator duration="1000"
                    propertyId="$left" to="100"/>            
        <j:Animator propertyId="$left" to="0"/>            
    </j:AnimatorGroup>            
    

Parallel Animations

The second example uses a "parallel" AnimatorGroup:

    <j:AnimatorGroup animatorId="anim2" mode="parallel">            
        <j:Animator duration="1000"
                    propertyId="$width" to="10" relative="true"/>            
        <j:Animator duration="1000"
                    propertyId="$height" to="10" relative="true"/>            
    </j:AnimatorGroup>            
    

Using the parallel mode lets you animate multiple properties at the same time - e.g. in this case we are animating both the width and the height properties.

Nesting AnimatorGroups

You can nest sequential and parallel groups to create complex animations. For example:

    <j:AnimatorGroup animatorId="anim3" mode="sequential">
        <j:AnimatorGroup mode="parallel">            
            <j:Animator propertyId="$width" to="10" relative="true"/>            
            <j:Animator propertyId="$height" to="10" relative="true"/>            
        </j:AnimatorGroup>            
        <j:AnimatorGroup mode="parallel">            
            <j:Animator propertyId="$width" to="-10" relative="true"/>            
            <j:Animator propertyId="$height" to="-10" relative="true"/>            
        </j:AnimatorGroup>            
    </j:AnimatorGroup>
    

The outer AnimatorGroup defines a sequence, consisting of two animator groups: the first group animates the width and height to be +10 from their current value. The second group animates the width and height to be -10 from their current value (restoring the original size).