Android Animation 101

Tonight I experimented with simple animation techniques using Google Android. I started with an example from “Hello, Android“, Chapter 4. That example shows how to draw text along a path such as a circle. The code is pretty simple:

// create a path Path circle = new Path(); circle.addCircle(centerX, centerY, radius, Direction.CW);  // set the color and font size Paint paint = new Paint(); paint.setColor(Color.BLUE); paint.setTextSize(30); paint.setAntiAlias(true);  // draw the text along the circle canvas.drawTextOnPath(QUOTE, circle, 0, 30, paint);

That’s all it takes to draw text along a path. You are not limited to circles; you can draw along any Path.

Animating the Text

Rather than stop there, I wanted to rotate the text about the circle. It should accelerate, spin, slow down, then spin backwards. This spinning should repeat forever. Here is a screen shot showing what it looks like:

(trust me, the text is spinning)

Animation Code

I started with a new Android project using Eclipse and the Android plugin, creating an activity named Spinning:

public class Spinning extends Activity {      @Override     public void onCreate(Bundle savedInstanceState) {         super.onCreate(savedInstanceState);         setContentView(new GraphicsView(this));     }

So far, so good. That GraphicsView class is an inner class:

    private static class GraphicsView extends View {         private static final String QUOTE =             "Nobody uses Java anymore. It's this big heavyweight ball and chain.";          private Animation anim;          public GraphicsView(Context context) {             super(context);         }

That’s a Steve Jobs quotation in case you were wondering. That Animation reference is lazily created when the canvas is first painted, so we know the width and height. Here is the code:

        private void createAnim(Canvas canvas) {             anim = new RotateAnimation(0, 360, canvas.getWidth() / 2, canvas                     .getHeight() / 2);             anim.setRepeatMode(Animation.REVERSE);             anim.setRepeatCount(Animation.INFINITE);             anim.setDuration(10000L);             anim.setInterpolator(new AccelerateDecelerateInterpolator());              startAnimation(anim);         }

Android includes several types of animations:

Mine makes the text rotate about the center, repeats forever, and plays forwards and backwards. The duration of 10000L represents the total time it takes for one forward/backward loop to complete.

        @Override         protected void onDraw(Canvas canvas) {             super.onDraw(canvas);              // creates the animation the first time             if (anim == null) {                 createAnim(canvas);             }              Path circle = new Path();              int centerX = canvas.getWidth() / 2;             int centerY = canvas.getHeight() / 2;             int r = Math.min(centerX, centerY);              circle.addCircle(centerX, centerY, r, Direction.CW);             Paint paint = new Paint();             paint.setColor(Color.BLUE);             paint.setTextSize(30);             paint.setAntiAlias(true);              canvas.drawTextOnPath(QUOTE, circle, 0, 30, paint);         }     } }

That’s the remainder of the code.

Including a Bitmap

Next I wanted to include a picture of Steve Jobs in the middle of the circle, like this:

This requires the following additional steps:

  1. Drop a file named jobs.png into res/drawable. Hit F5 to Refresh Eclipse, and R.java automatically updates.
  2. Add some additional fields to GraphicsView:
        private static class GraphicsView extends View {         private Bitmap jobs;         private int jobsXOffset;         private int jobsYOffset;
  3. Load the bitmap in the constructor:
            public GraphicsView(Context context) {             super(context);             jobs = BitmapFactory                     .decodeResource(getResources(), R.drawable.jobs);             jobsXOffset = jobs.getWidth() / 2;             jobsYOffset = jobs.getHeight() / 2;         }
  4. At the end of the onDraw(...) method, add this:
                canvas.drawBitmap(jobs, centerX - jobsXOffset,                     centerY - jobsYOffset, null);

Now Steve rotates along with the text!

Leave a Reply

Your email address will not be published. Required fields are marked *