Animations in Android

Android supports three types of animation:

Property animations — A tweened animation that can be used to potentially animate any property on the target object by applying incremental changes between two values. This can be used for anything from changing the color or opacity of a View to gradually fade it in or out, to changing a font size, or increasing a character’s hit points.

View animations — Tweened animations that can be applied to rotate, move, and stretch
a View.

Frame animations — Frame-by-frame “cell” animations used to display a sequence of Drawable images.

Defining animations as external resources enables you to reuse the same sequence in multiple places and provides you with the opportunity to present different animations based on device hardware or orientation.

Property Animations

Property animators were introduced in Android 3.0 (API level 11). It is a powerful framework that can be used to animate almost anything.

Each property animation is stored in a separate XML fi le in the project’s res/animator folder. As with layouts and Drawable resources, the animation’s filename is used as its resource identifier

You can use a property animator to animate almost any property on a target object. You can define animators that are tied to a specific property, or a generic value animator that can be allocated to any property and object

The following simple XML snippet shows a property animator that changes the opacity of the target object by calling its setAlpha method incrementally between 0 and 1 over the course of a second:

<?xml version=”1.0” encoding=”utf-8”?>
<objectAnimator xmlns:android=”http://schemas.android.com/apk/res/android”
 android:propertyName=”alpha”
 android:duration=”1000”
 android:valueFrom=”0.0”
 android:valueTo=”1.0”
/>

View Animations

Each view animation is stored in a separate XML fi le in the project’s res/anim folder. As with layouts and Drawable resources, the animation’s filename is used as its resource identifier

An animation can be defined for changes in alpha (fading), scale (scaling), translate (movement), or rotate (rotation)

Animation type attributes

You can create a combination of animations using the set tag. An animation set contains one or more animation transformations and supports various additional tags and attributes to customize when and how each animation within the set is run.

The following list shows some of the set tags available:

• duration — Duration of the full animation in milliseconds.
• startOffset — Millisecond delay before the animation starts
• fillBeforetrue — Applies the animation transformation before it begins
• fillAftertrue — Applies the animation transformation after it ends
• interpolator — Sets how the speed of this effect varies over time. Chapter 11 explores the interpolators available. To specify one, reference the system animation resources at android:anim/interpolatorName

The following example shows an animation set that spins the target 360 degrees while it shrinks and fades out:

<?xml version=”1.0” encoding=”utf-8”?>
<set xmlns:android=”http://schemas.android.com/apk/res/android”
 android:interpolator=”@android:anim/accelerate_interpolator”>
 <rotate
 android:fromDegrees=”0”
 android:toDegrees=”360”
 android:pivotX=”50%”
 android:pivotY=”50%”
 android:startOffset=”500”
 android:duration=”1000” />
 <scale
 android:fromXScale=”1.0”
 android:toXScale=”0.0”
 android:fromYScale=”1.0”
 android:toYScale=”0.0”
 android:pivotX=”50%”
 android:pivotY=”50%”
 android:startOffset=”500”
 android:duration=”500” />
 <alpha
 android:fromAlpha=”1.0”
 android:toAlpha=”0.0”
 android:startOffset=”500”
 android:duration=”500” />
</set>

Frame-by-Frame Animations

Frame-by-frame animations produce a sequence of Drawables, each of which is displayed for a specified duration

Because frame-by-frame animations represent animated Drawables, they are stored in the res/ drawable folder and use their filenames (without the .xml extension) as their resource Ids.

The following XML snippet shows a simple animation that cycles through a series of bitmap resources, displaying each one for half a second. To use this snippet, you need to create new image resources android1 through android3:

<animation-list
 xmlns:android=”http://schemas.android.com/apk/res/android”
 android:oneshot=”false”>
 <item android:drawable=”@drawable/android1” android:duration=”500” />
 <item android:drawable=”@drawable/android2” android:duration=”500” />
 <item android:drawable=”@drawable/android3” android:duration=”500” />
</animation-list>

Note that in many cases you should include multiple resolutions of each of the drawables used within the animation list in the drawable-ldpi, -mdi, -hdpi, and -xhdpi folders, as appropriate

To play the animation, start by assigning the resource to a host View before getting a reference to the Animation Drawable object and starting it:

ImageView androidIV = (ImageView)findViewById(R.id.iv_android);
androidIV.setBackgroundResource(R.drawable.android_anim);
AnimationDrawable androidAnimation = 
 (AnimationDrawable) androidIV.getBackground();
androidAnimation.start();

Typically, this is done in two steps; assigning the resource to the background should be done within the onCreate handler.

Within this handler the animation is not fully attached to the window, so the animations can’t be started; instead, this is usually done as a result to user action (such as a button press) or within the onWindowFocusChanged handler.