CODEWITHSUNDEEP
javaandroid
philip
philip

Reputation: 1302

Make canvas animate in android

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.

enter image description here

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);


    }
}

Upvotes: 5

Views: 6064

Answers (2)

Ted Hopp
Ted Hopp

Reputation: 234795

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.

Upvotes: 1

CarlLee
CarlLee

Reputation: 4182

Basically any animation logic is consist of 3 components:

  • Parameters: positions, rotations, and scales of the objects you're going to draw;

  • Threads: You can choose to use 2 threads to draw and update object properties (positions, rotations, and scales) seperately or do them in one thread.

  • Infinite loop: a loop that does draw -> update -> draw ... infinitely

There're many ways to implement them, I can only suggest some APIs you can use:

  • View.invalidate(), use this to request the framework to redraw your view, so your onDraw() method will be called.

  • [View.postDelayed()](http://developer.android.com/reference/android/view/View.html#postDelayed(java.lang.Runnable, long)) , use this to make infinite loop at the end of your onDraw() method to call View.invalidate().

Upvotes: 2

Related Questions