All these classes reside in the same package and this section looks at these classes.

Animator

The Animator class is an abstract class that provides methods that are inherited by subclasses. There is a method for setting the target object to be animated (setTarget), a method for setting the duration (setDuration), and a method for starting the animation (start). The start method can be called more than once on an Animator object.

In addition, this class provides an addListener method that takes an Animator.AnimatorListener instance. The AnimatorListener interface is defined inside the Animator class and provides methods that will be called by the system upon the occurrence of certain events. You can implement any of these methods if you want to respond to a certain event.

The methods in AnimatorListener are as follows.

void onAnimationStart(Animator animation);

void onAnimationEnd(Animator animation);

void onAnimationCancel(Animator animation);

void onAnimationRepeat(Animator animation);

For example, the onAnimationStart method is called when the animation starts and the onAnimationEnd method is called when it ends.

ValueAnimator

A ValueAnimator creates an animation by calculating a value that transitions from a start value and to an end value. You tell what the start value and end value should be when constructing the ValueAnimator. By registering an UpdateListener to a ValueAnimator, you can receive an update at each frame, giving you a chance to update your object(s).

Here are two static factory methods that you can use to construct a ValueAnimator.

public static ValueAnimator ofFloat(float... values)

public static ValueAnimator ofInt(int... values)

Which method to use depends on whether you want to receive an int or a float in each frame.

Once you create a ValueAnimator, you should create an implementation of AnimationUpdateListener and write your animation code under its onAnimationUpdate method and register the listener with the ValueAnimator. Here is an example.

 

valueAnimator.addUpdateListener(new

        ValueAnimator.AnimatorUpdateListener() {

    @Override

    public void onAnimationUpdate(ValueAnimator animation) {

        Float value = (Float) animation.getAnimatedValue();

        // use value to set a property or multiple properties

        // Example: view.setRotationX(value);

    }

});

Finally, call the ValueAnimator’s setDuration method to set a duration and start method to start the animation. If you do not call setDuration, the default method (300ms) will be used.

More on using ValueAnimator is given in the example below.

ObjectAnimator

The ObjectAnimator class offers the easiest way of animating an object, most probably a View, by continually updating one of its properties. To create an animation, create an ObjectAnimator using one of its factory methods, passing a target object, a property name, and the start and end values for the property. In recognition of the fact that a property can have an int value, or a float value, or another value type, ObjectAnimator provides three static methods: ofInt, ofFloat, and ofObject. Here are their signatures.

public static ObjectAnimator ofInt(java.lang.Object target,

        java.lang.String propertyName, int... values)

public static ObjectAnimator ofFloat(java.lang.Object target,

        java.lang.String propertyName, float... values)

public static ObjectAnimator ofObject(java.lang.Object target,

        java.lang.String propertyName, java.lang.Object... values)

You can pass one or two arguments to the values argument. If you pass two arguments, the first will be used as the start value and the second the end value. If you pass one argument, the value will be used as the end value and the current value of the property will be used as the start value.

Once you have an ObjectAnimator, call the setDuration method on the ObjectAnimator to set the duration and the start method to start it. Here is an example of animating the rotation property of a View.

 

ObjectAnimator objectAnimator = ObjectAnimator.ofFloat(view,

        "rotationY", 0F, 720.0F); // rotate 720 degrees.

objectAnimator.setDuration(2000); // 2000 milliseconds

objectAnimator.start();

Running the animation will cause the view to make two full circles within two seconds.

As you can see, you just need two or three lines of code to create a property animation using ObjectAnimator. You will learn more about ObjectAnimator in the example below.

AnimatorSet

An AnimatorSet is useful if you want to play a set of animations in a certain order. A direct subclass of Animator, the AnimatorSet class allows you to play multiple animations together or one after another. Once you’re finished deciding how your animations should be called, call the start method on the AnimatorSet to start it.

The playTogether method arranges the supplied animations to play together. There are two overrides for this method.

public void playTogether(java.util.Collection<Animator> items)

public void playTogether(Animator... items)

The playSequentially method arranges the supplied animations to play sequentially. It too has two overrides.

public void playSequentially(Animator... items)

public void playSequentially(java.util.List<Animator> items)

Example

The AnimationDemo project uses the ValueAnimator, ObjectAnimator, and AnimatorSet to animate an ImageView. It provides three buttons to play different animations.

The manifest for the application is given in Listing 6.1.

Listing 6.1: The manifest for AnimationDemo

<?xml version="1.0" encoding="utf-8"?>

<manifest xmlns:android="http://schemas.android.com/apk/res/android"

    package="com.example.animationdemo"

    android:versionCode="1"

    android:versionName="1.0" >

 

    <uses-sdk

        android:minSdkVersion="11"

        android:targetSdkVersion="18" />

 

    <application

        android:allowBackup="true"

        android:icon="@drawable/ic_launcher"

        android:label="@string/app_name"

        android:theme="@style/AppTheme" >

        <activity

            android:name="com.example.animationdemo.MainActivity"

            android:label="@string/app_name" >

            <intent-filter>

                <action android:name="android.intent.action.MAIN" />

 

                <category android:name="android.intent.category.LAUNCHER" />

            </intent-filter>

        </activity>

    </application>

 

</manifest>

Note that the minimum SDK level is 11 (Honeycomb).

The application has one activity, whose layout is printed in Listing 6.2

Listing 6.2: The activity_main.xml file

<LinearLayout

    xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:tools="http://schemas.android.com/tools"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:paddingBottom="@dimen/activity_vertical_margin"

    android:paddingLeft="@dimen/activity_horizontal_margin"

    android:paddingRight="@dimen/activity_horizontal_margin"

    android:paddingTop="@dimen/activity_vertical_margin"

    tools:context=".MainActivity" >

 

    <ImageView

        android:id="@+id/imageView1"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_gravity="top|center"

        android:src="@drawable/photo1" />

       

    <Button

        android:id="@+id/button1"

        android:text="@string/button_animate1"

        android:textColor="#ff4433"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:onClick="animate1"/>

    <Button

        android:id="@+id/button2"

        android:text="@string/button_animate2"

        android:textColor="#33ff33"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:onClick="animate2"/>

    <Button

        android:id="@+id/button3"

        android:text="@string/button_animate3"

        android:textColor="#3398ff"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:onClick="animate3"/>

</LinearLayout>

The layout defines an ImageView and three Buttons.

Finally, Listing 6.3 shows the MainActivity class for the application. There are three event-processing methods (animate1, animate2, and animate3) that each uses a different method of animation.

Listing 6.3: The MainActivity class

package com.example.animationdemo;

import android.animation.AnimatorSet;

import android.animation.ObjectAnimator;

import android.animation.ValueAnimator;

import android.app.Activity;

import android.os.Bundle;

import android.view.Menu;

import android.view.View;

 

public class MainActivity extends Activity {

 

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);

    }

 

    @Override

    public boolean onCreateOptionsMenu(Menu menu) {

        getMenuInflater().inflate(R.menu.main, menu);

        return true;

    }

   

   public void animate1(View source) {

        View view = findViewById(R.id.imageView1);

        ObjectAnimator objectAnimator = ObjectAnimator.ofFloat(

                view, "rotationY", 0F, 720.0F);

        objectAnimator.setDuration(2000);

        objectAnimator.start();

    }

   

    public void animate2(View source) {

        final View view = findViewById(R.id.imageView1);

        ValueAnimator valueAnimator = ValueAnimator.ofFloat(0F,

                7200F);

        valueAnimator.setDuration(15000);

       

        valueAnimator.addUpdateListener(new

                ValueAnimator.AnimatorUpdateListener() {

            @Override

            public void onAnimationUpdate(ValueAnimator animation) {

                Float value = (Float) animation.getAnimatedValue();

                view.setRotationX(value);

                if (value < 3600) {

                    view.setTranslationX(value/20);

                    view.setTranslationY(value/20);

                } else {

                    view.setTranslationX((7200-value)/20);

                    view.setTranslationY((7200-value)/20);

                }

            }

        });

        valueAnimator.start();

    }

    public void animate3(View source) {

        View view = findViewById(R.id.imageView1);

        ObjectAnimator objectAnimator1 =

                ObjectAnimator.ofFloat(view, "translationY", 0F,

                        300.0F);

        ObjectAnimator objectAnimator2 =

                ObjectAnimator.ofFloat(view, "translationX", 0F,

                        300.0F);

        objectAnimator1.setDuration(2000);

        objectAnimator2.setDuration(2000);

        AnimatorSet animatorSet = new AnimatorSet();

        animatorSet.playTogether(objectAnimator1, objectAnimator2);

       

        ObjectAnimator objectAnimator3 =

                ObjectAnimator.ofFloat(view, "rotation", 0F,

                        1440F);

        objectAnimator3.setDuration(4000);

        animatorSet.play(objectAnimator3).after(objectAnimator2);

        animatorSet.start();

    }

}

Run the application and click the buttons to play the animations. Figure 6.1 shows the application.

 

Figure 6.1: Animation demo

Summary

In this chapter you learned about the new Animation API in Android, the Property Animation system. In particular, you learned about the android.animation.Animator class and its subclasses, ValueAnimator andObjectAnimator. You also learned to use the AnimatorSet class to perform multiple animations.