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.