Android Animations Tutorial 6: Animation Sets and Start Offset

Until now we have avoided talking about startOffset, a property that allows you to delay the start of an animation by a specified number of milliseconds. You can do this in the XML resource file of your animation.

<scale
  android:duration="300"
  android:startOffset="150"
  android:fromXScale="0.0"
  android:fromYScale="0.0"
  android:toXScale="1.0"
  android:toYScale="1.0" />

Alternatively you can call the setStartOffset method programmatically.

ScaleAnimation scale = new ScaleANimation(0.0f, 1.0f, 0.0f, 1.0f);
scale.setStartOffset(150);

The question arises, why you would want to do this. Remember that we already had the possibility setting the start time programmatically with the setStartTime method. The power of the startOffset property becomes apparent when combined with animation sets.

Suppose you want to play a sequence of animations, one after another. You can do this simply by creating an animation set containing all the animations and adjusting the start offset times so that all the animations are played one after the other. The following example illustrates this.

<set xmlns:android="http://schemas.android.com/apk/res/android"
  android:shareInterpolator="true"
  android:fillAfter="true">

  <translate
    android:duration="300"
    android:startOffset="0"
    android:fromXDelta="0"
    android:fromYDelta="0"
    android:toXDelta="100"
    android:toYDelta="100" />

  <scale
    android:duration="300"
    android:startOffset="300"
    android:fromXScale="1.0"
    android:fromYScale="1.0"
    android:toXScale="0.0"
    android:toYScale="0.0" />

</set>

The animation will perform a translation during the first 300 milliseconds followed by a scale animation during the following 300 milliseconds. In this way you can assemble longer animations into a single resource.

Note that you should not set the duration of the animation set in this case. You might be tempted to set the duration to the total time of 600 milliseconds in the above example. This will cause two conflicting behaviours. On one hand all the durations of the elements of the set will be set to 600 milliseconds. On the other hand the complete animation will stop after the specified 600 milliseconds. That means that the translate animation will take up the whole time of the animation. The scale animation will only get halfway through by the time the animation set finishes because of the start offset. This is probably not what you want.

The effect of Interpolators

One little question remains. How do interpolators affect the behaviour of the individual animations. In fact the answer is simple. Even when the shareInterpolator property is set to true, each individual animation of a set will interpolate the animation according to its own duration. This means, if we include an

android:interpolator="@android:anim/accelerate_decelerate_interpolator"

in the set above, the effect will be as follows.

First the translate animation will run for 300 milliseconds and will accelerate in the beginning and decelerate towards the end of the 300 milliseconds. Then the scale animation will run and will also accelerate in the beginning and decelerate towards the end. This can be most clearly seen when using the bounce_interpolator and making the animations slightly longer.

<set xmlns:android="http://schemas.android.com/apk/res/android"
  android:interpolator="@android:anim/bounce_interpolator"
  android:shareInterpolator="true"
  android:fillAfter="true">

  <translate
    android:duration="1000"
    android:startOffset="0"
    android:fromXDelta="0"
    android:fromYDelta="0"
    android:toXDelta="100"
    android:toYDelta="100" />

  <scale
    android:duration="1000"
    android:startOffset="1000"
    android:fromXScale="1.0"
    android:fromYScale="1.0"
    android:toXScale="0.0"
    android:toYScale="0.0" />
    </set>

The result can be seen in the short animation below.

A translate animation followed by a scale animation using the same bounce_interpolator

A translate animation followed by a scale animation using the same bounce_interpolator

Follow the author

1 Comment

  1. grammar

    U.S. News | Latest National News, Videos & Photos – …

    Reply

Leave a Comment

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>