Android
package

android.view.animation

Classes | Description

Provides classes that handle tweened animations.

Android provides two mechanisms that you can use to create simple animations: tweened animation, in which you tell Android to perform a series of simple transformations (position, size, rotation, and so on) to the content of a View; and frame by frame animation, which loads a series of Drawable resources one after the other. Both animation types can be used in any View object to provide simple rotating timers, activity icons, and other useful UI elements. Tweened animation is handled by this package; frame by frame animation is handled by the AnimationDrawable class. Animations do not have a pause method.

Tweened Animation

Android can perform simple visual transformations for you, including straight line motion, size change, and transparency change, on the contents of a View object. These transformations are represented by the following classes:

Note: tweened animation does not provide tools to help you draw shapes. Tweened animation is the act of applying one or more of these transformations applied to the contents of a View object. So, if you have a TextView with text, you can move, rotate, grow, or shrink the text. If it has a background image, the background image will also be transformed along with the text.

Animations are drawn in the area designated for the View at the start of the animation; this area does not change to accommodate size or movement, so if your animation moves or expands outside the original boundaries of your object, it will be clipped to the size of the original canvas, even if the object's LayoutParams are set to WRAP_CONTENT (the object will not resize to accommodate moving or expanding/shrinking animations).

Step 1: Define your animation

The first step in creating a tweened animation is to define the transformations. This can be done either in XML or in code. You define an animation by defining the transformations that you want to occur, when they will occur, and how long they should take to apply. Transformations can be sequential or simultaneous—so, for example, you can have the contents of a TextView move from left to right, and then rotate 180 degrees, or you can have the text move and rotate simultaneously. Each transformation takes a set of parameters specific for that transformation (starting size and ending size for size change, starting angle and ending angle for rotation, and so on), and also a set of common parameters (for instance, start time and duration). To make several transformations happen simultaneously, give them the same start time; to make them sequential, calculate the start time plus the duration of the preceding transformation.

Screen coordinates are (0,0) at the upper left hand corner, and increase as you go down and to the right.

Some values, such as pivotX, can be specified relative to the object itself or relative to the parent. Be sure to use the proper format for what you want ("50" for 50% relative to the parent, "50%" for 50% relative to itself).

You can determine how a transformation is applied over time by assigning an Interpolator to it. Android includes several Interpolator subclasses that specify various speed curves: for instance, AccelerateInterpolator tells a transformation to start slow and speed up; DecelerateInterpolator tells it to start fast than slow down, and so on.

If you want a group of transformations to share a set of parameters (for example, start time and duration), you can bundle them into an AnimationSet, which defines the common parameters for all its children (and overrides any values explicitly set by the children). Add your AnimationSet as a child to the root AnimationSet (which serves to wrap all transformations into the final animation).

Here is the XML that defines a simple animation. The object will first move to the right, then rotate and double in size, then move up. Note the transformation start times.

XML Equivalent Java
<set android:shareInterpolator="true" 
     android:interpolator="@android:anim/accelerate_interpolator">

    <translate android:fromXDelta="0"
               android:toXDelta="30"
               android:duration="800"
               android:fillAfter="true"/>
    
    <set android:duration="800" 
         android:pivotX="50%"
         android:pivotY="50%" >

        <rotate android:fromDegrees="0"
                android:toDegrees="-90" 
                android:fillAfter="true"
                android:startOffset="800"/>
    
        <scale android:fromXScale="1.0"
                android:toXScale="2.0"
                android:fromYScale="1.0"
                android:toYScale="2.0"
                android:startOffset="800" />
    </set>

    <translate android:toYDelta="-100"
               android:fillAfter="true"
               android:duration="800"
               android:startOffset="1600"/>
</set>
// Create root AnimationSet.
AnimationSet rootSet = new AnimationSet(true);
rootSet.setInterpolator(new AccelerateInterpolator());
rootSet.setRepeatMode(Animation.NO_REPEAT);

// Create and add first child, a motion animation.
TranslateAnimation trans1 = new TranslateAnimation(0, 30, 0, 0);
trans1.setStartOffset(0);
trans1.setDuration(800);
trans1.setFillAfter(true);
rootSet.addAnimation(trans1);

// Create a rotate and a size animation.
RotateAnimation rotate = new RotateAnimation(
       0, 
       -90, 
       RotateAnimation.RELATIVE_TO_SELF, 0.5f, 
       RotateAnimation.RELATIVE_TO_SELF, 0.5f);
       rotate.setFillAfter(true);
       rotate.setDuration(800);

ScaleAnimation scale = new ScaleAnimation(
       1, 2, 1, 2, // From x, to x, from y, to y
       ScaleAnimation.RELATIVE_TO_SELF, 0.5f, 
       ScaleAnimation.RELATIVE_TO_SELF, 0.5f);
       scale.setDuration(800);
       scale.setFillAfter(true);

// Add rotate and size animations to a new set,
// then add the set to the root set.
AnimationSet childSet = new AnimationSet(true);
childSet.setStartOffset(800);
childSet.addAnimation(rotate);
childSet.addAnimation(scale);
rootSet.addAnimation(childSet);

// Add a final motion animation to the root set.
TranslateAnimation trans2 = new TranslateAnimation(0, 0, 0, -100);
trans2.setFillAfter(true);
trans2.setDuration(800);
trans2.setStartOffset(1600);
rootSet.addAnimation(trans2);

// Start the animation.
animWindow.startAnimation(rootSet);

 

The following diagram shows the animation drawn from this code:

A tweened animation: move right, turn and grow, move up.

The previous diagram shows a few important things. One is the animation itself, and the other is that the animation can get cropped if it moves out of its originally defined area. To avoid this, we could have sized the TextView to fill_parent for its height.

If you define your animation in XML, save it in the res/anim/ folder as described in Resources. That topic also describes the XML tags and attributes you can use to specify transformations.

Animations have the following common parameters (from the Animation interface). If a group of animations share the same values, you can bundle them into an AnimationSet so you don't have to set these values on each one individually.

Property XML Attribute Java Method / Description
Start time android:startOffset Animation.setStartOffset() (or setStartTime() for absolute time) The start time (in milliseconds) of a transformation, where 0 is the start time of the root animation set.
Duration android:duration Animation.setDuration() The duration (in milliseconds) of a transformation.
Fill before android:fillBefore Animation.setFillBefore() True if you want this transformation to be applied at time zero, regardless of your start time value (you will probably never need this).
Fill after android:fillAfter Animation.SetFillAfter() Whether you want the transform you apply to continue after the duration of the transformation has expired. If false, the original value will immediately be applied when the transformation is done. So, for example, if you want to make a dot move down, then right in an "L" shape, if this value is not true, at the end of the down motion the text box will immediately jump back to the top before moving right.
Interpolator android:interpolator Animation.SetInterpolator() Which interpolator to use.
Repeat mode Cannot be set in XML Animation.SetRepeatMode() Whether and how the animation should repeat.

 

Step 2: Load and start your animation

  1. If you've created your transformation in XML, you'll need to load it in Java by calling AnimationUtils.loadAnimation().
  2. Either start the animation immediately by calling View.startAnimation(), or if you have specified a start time in the animation parameters, you can call View.setCurrentAnimation().

The following code demonstrates loading and starting an animation.

// Hook into the object to be animated.
TextView animWindow = (TextView)findViewById(R.id.anim);

// Load the animation from XML (XML file is res/anim/move_animation.xml).
Animation anim = AnimationUtils.loadAnimation(AnimationSample.this, R.anim.move_animation);
anim.setRepeatMode(Animation.NO_REPEAT);

// Play the animation.
animWindow.startAnimation(anim);

Copyright 2007 Google Inc. Build 0.9_r1-98467 - 14 Aug 2008 18:48