Question

I’m new to android and I’m having problems understanding how to animate canvas.
basically i have drawn a red ball and a stair when the ball should drop from the stair

here’s what it looks like.

can anyone help me on what method i should use? if you can provide me with a source code that would be very helpful.

here are my source code:

DrawingView.java

package com.ballandstair;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.view.View;

public class DrawingView extends View {
    DrawingView(Context context) {
        super(context);
    }

    protected void onDraw(Canvas canvas){
        super.onDraw(canvas);
        Paint paint = new Paint();
        Path path = new Path();

        paint.setStyle(Paint.Style.FILL);
        paint.setColor(Color.RED);
        paint.setAntiAlias(true);
        canvas.drawCircle(100, 50, 25, paint);

        paint.setColor(Color.BLUE);
        paint.setStyle(Paint.Style.FILL);
        path.moveTo(75, 75);
        path.lineTo(125, 75);
        path.lineTo(125, 125);
        path.lineTo(175, 125);
        path.lineTo(175, 175);
        path.lineTo(225, 175);
        path.lineTo(225, 225);
        path.lineTo(275, 225);
        path.lineTo(275, 275);
        path.lineTo(325, 275);
        path.lineTo(325, 325);
        path.lineTo(75, 325);
        path.close();
        canvas.drawPath(path, paint);

    }
}

MainActivity.java

package com.ballandstair;

import android.app.Activity;
import android.os.Bundle;

public class MainActivity extends Activity {

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        DrawingView drawing = new DrawingView(this);
        setContentView(drawing);


    }
}

Answer 1

You will need to do (at least) two things:

1. Modify your code so that the position of the ball is variable. This should not be too hard.
2. Have a way of updating the variable(s) that define the ball position and triggering redraws of your custom view so that over time the ball appears to follow the path you want.

The second step requires a little care. You might be tempted to write a loop that invokes Thread.sleep(frameRate) (where frameRate is the number of milliseconds between frames), updates the ball position, and then calls invalidate() for your custom view to trigger a repaint. The problem with this is that you cannot pause the event thread. There are (again) two ways of dealing with this:

1. Create a worker thread that has the animation loop. It cannot call invalidate() directly, but it can call postInvalidate() to the same effect.
2. Declare a Runnable that in its run() method updates the ball position, calls invalidate(), and then asks the view to run the Runnable itself again after a delay of frameRate (by calling postDelayed()).

Both methods are reasonable approaches. You will also need logic to know when the animation should end, and you might want to give the user control over when it starts or to allow replay.