how to do android image animation

Question

hi,

i am trying to get a simple image animation going. i want to make it looks as if the helicopter's propeller blades are turning. i have 3 images for the helicopter, and i am showing one of these images depending on the animation progress. the problem is that all three images end up overlapping each other as opposed to just one image showing up at one time, thereby creating the animation. this is what i did so far, i even tried to clear canvas by doing this canvas.drawColor(Color.BLACK), but that would clear out the whole canvas, which is not what i want.

this is what i have:

1) in the View class:

static class Helicopter { private long mLastUpdate; private long mProgress = 0; private final float mX; private final float mY;

    private final Bitmap mHelicopter1;
    private final Bitmap mHelicopter2;
    private final Bitmap mHelicopter3;
    private final float mRadius;

    Helicopter(long mLastUpdate, float mX, float mY,
              Bitmap helicopter1, Bitmap helicopter2, Bitmap helicopter3) {
        this.mLastUpdate = mLastUpdate;
        this.mX = mX;
        this.mY = mY;
        this.mHelicopter1 = helicopter1;
        this.mHelicopter2 = helicopter2;
        this.mHelicopter3 = helicopter3;
        mRadius = ((float) mHelicopter1.getWidth()) / 2f;

    }

    public void update(long now) {
        mProgress += (now - mLastUpdate);

        if(mProgress >= 400L)
        {
         mProgress = 0;
        }
        mLastUpdate = now;
    }

    public void setNow(long now) {
        mLastUpdate = now;
    }

    public void draw(Canvas canvas, Paint paint) 
    {       

        if (mProgress < 150L) 
        {
            canvas.drawBitmap(mHelicopter1, mX - mRadius, mY - mRadius, paint);
        } 
        else if (mProgress < 300L) 
        {
            canvas.drawBitmap(mHelicopter2, mX - mRadius, mY - mRadius, paint);

        } 
        else if(mProgress < 400L)
        {
         canvas.drawBitmap(mHelicopter3, mX - mRadius, mY - mRadius, paint);
        }

    }

    public boolean done() {
        return mProgress > 700L;
    }
}

private ArrayList<Helicopter> mHelicopters = new ArrayList<Helicopter>();

2) this is being called in the run() of a thread:

private void doDraw(Canvas canvas) 
    {
     final long now = SystemClock.elapsedRealtime();

        canvas.save();

        for (int i = 0; i < mHelicopters.size(); i++) {
            final Helicopter explosion = mHelicopters.get(i);
            explosion.update(now);
        }

        for (int i = 0; i < mHelicopters.size(); i++) {
            final Helicopter explosion = mHelicopters.get(i);
            explosion.draw(canvas, mPaint);
        }

        canvas.restore();
    }

can someone help me? i have looked at a lot of the examples on the web on animation, they seem to always involve text, but not images. thanks.

Answer 1

Usually the thread that draws the canvas redraws the entire canvas and all props/actors. In that way if you increment a helicopter blade image index it will be drawn in place after the rest of the canvas has been redrawn. Something like: Background->Helicopter->Blade1 next iteration Background->Helicopter->Blade2.