Android rorate Animation

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 namedSpinning:

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:

• RotateAnimation for rotating about a point
• AlphaAnimation for fading in and out
• ScaleAnimation for making things bigger and smaller
• TranslateAnimation for moving things around
• AnimationSet for combining several animations into one

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!