Behold the animation magic of an Android interpolator

William J. Francis demonstrates how to the use BounceInterpolator, an Android indirect interpolator subclass.

One of the aspects I enjoy most about developing software in the mobile space is getting to work extensively with animations. Animations help engage the user, unify the overall experience, and are just plain fun. Over the past few iterations, the animation framework inside the Android SDK has really grown; this includes the number of interpolators.

 

Interpolators are predefined classes that implement a specific interpolation, which is simply a fancy kind of estimation. For instance, given a start point, an end point, and a period of time, a linear interpolator can estimate where an object should be on the path at a given instance of time. Constant linear interpolation is easy to wrap your head around. Say you throw a ball from point 0 to 100, and you know that it takes 10 seconds to travel the entire distance, then you can interpolate that at 5 seconds your ball should be at point 50.

Interpolators get interesting when they simulate things that are not so easy to wrap your brain around. Currently Android supports nine indirect interpolator subclasses; some of the more interesting ones include a CycleInterpolator, an OvershootInterpolator, and a BounceInterpolator. This tutorial demonstrates BounceInterpolator. You can follow along or download the entire source code and import the project directly into Eclipse.

1. Create a new Android project. Target Android 3.0 (Honeycomb) or better.

2. In the /res/layouts folder, modify the activity_main.xml file to include a button and a text view.

activity_main.xml


    

3. We want to modify the MainActivity.java file in the /src file. We'll use the on create override to wire up the button and apply the animation in the on click. There is also a small helper method that determines the display height so we don't "drop" our text off the screen.

 

MainActivity.java
package com.authorwjf.bounceinterpolator;

import android.os.Bundle;
import android.util.DisplayMetrics;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.animation.BounceInterpolator;
import android.view.animation.TranslateAnimation;
import android.app.Activity;

public class MainActivity extends Activity implements OnClickListener {

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		findViewById(R.id.the_button).setOnClickListener(this);
	}

	@Override
	public void onClick(View v) {
		 findViewById(R.id.the_text).clearAnimation();
		 TranslateAnimation translation;
		 translation = new TranslateAnimation(0f, 0F, 0f, getDisplayHeight());
		 translation.setStartOffset(500);
		 translation.setDuration(2000);
		 translation.setFillAfter(true);
         translation.setInterpolator(new BounceInterpolator());
         findViewById(R.id.the_text).startAnimation(translation);
	}
	
	private int getDisplayHeight() {
		DisplayMetrics metrics = new DisplayMetrics();
		getWindowManager().getDefaultDisplay().getMetrics(metrics);
		return metrics.widthPixels;
	}

}

Believe it or not, that's all there is to it. The interpolator performs all of the magic for us. You can take a look at the effect by playing this short video.

When you have a few minutes, try changing out BounceInterpolator with some of the other interpolators in the Android SDK. You can even combine interpolators to create really interesting effects. Feel free to share any slick animations you come up with in the discussion thread.