android spinning image

Question

hi,

i am trying to create two spinning wheels, as in pulleys, so everytime the attached rope moves, the two pulleys will rotate. i have tried two approaches:

1) use Matrix.postRotate within the onDraw() method of the View class, which calls the following:

private void drawSpinningWheel(Canvas canvas)
{
    try
    {
        canvas.save();

            Bitmap bitmapOrg = null;

        int iDrawable = R.drawable.spinning_button;

        bitmapOrg = BitmapFactory.decodeResource(getResources(), iDrawable);

        if(bitmapOrg != null)
        {
            int width = bitmapOrg.getWidth(); 
            int height = bitmapOrg.getHeight(); 
            int newWidth = 24; 
            int newHeight = 24; 

            // calculate the scale - in this case = 0.4f 
            float scaleWidth = ((float) newWidth) / width; 
            float scaleHeight = ((float) newHeight) / height; 

            // createa matrix for the manipulation 
            Matrix matrix = new Matrix(); 
            // resize the bit map 
            matrix.postScale(scaleWidth, scaleHeight); 
            matrix.postRotate((float) mDegrees++);

            Bitmap resizedBitmap = Bitmap.createBitmap(bitmapOrg, 0, 0, 
                    width, height, matrix, true); 

            canvas.drawBitmap(resizedBitmap, matrix, null);

        }

        canvas.restore();
    }
    catch(Exception e)
    {
        Log.e(TAG + "drawSpinningWheel", e.getMessage());
    }

}

but it seems like the image not only spins but rotates around another axis

2) use SurfaceView and a separate thread, in the run() call this:

    private void doDraw(Canvas canvas) {
        // Draw the background image. Operations on the Canvas accumulate
        // so this is like clearing the screen.
        canvas.drawBitmap(mBackgroundImage, 0, 0, null);

        int yTop = mCanvasHeight - ((int) mY + mSpinningWheelImageHeight / 2);
        int xLeft = (int) mX - mSpinningWheelImageWidth / 2;

...

        // Draw the ship with its current rotation
        canvas.save();
        canvas.rotate((float) mHeading++, (float) mX, mCanvasHeight
                - (float) mY);

            mSpinningWheelImage.setBounds(xLeft, yTop, xLeft + mSpinningWheelImageWidth, yTop
                    + mSpinningWheelImageHeight);
            mSpinningWheelImage.draw(canvas);


        canvas.restore();
    }

i get the spinning to work but i can't add another spinning wheel. i even tried to create another thread for the second spinning wheel, only one shows up. can someone point me in the right direction? thanks.

3) ok now i also tried RotateAnimation:

public class GraphicsView extends View { private static final String QUOTE = "Nobody uses Java anymore. It's this big heavyweight ball and chain.";

private Animation anim;
private Animation anim2;

private Bitmap jobs;
private Bitmap wheel;

private int jobsXOffset;        
private int jobsYOffset;

private int wheelXOffset;        
private int wheelYOffset;

public GraphicsView(Context context) 
{
    super(context);
    jobs = BitmapFactory
    .decodeResource(getResources(), R.drawable.spinning_button);

    jobsXOffset = jobs.getWidth() / 2;
    jobsYOffset = jobs.getHeight() / 2;

    wheel = BitmapFactory
    .decodeResource(getResources(), R.drawable.wheel);

    wheelXOffset = jobs.getWidth() / 2;
    wheelYOffset = jobs.getHeight() / 2;


}

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

    startAnimation(anim);
}

private void createAnim2(Canvas canvas) 
{
    anim2 = new RotateAnimation(0, 360, canvas.getWidth() / 2+30, canvas
            .getHeight() / 2);
    anim2.setRepeatMode(Animation.INFINITE);
    anim2.setRepeatCount(Animation.INFINITE);
    anim2.setDuration(10000L);
    anim2.setInterpolator(new AccelerateDecelerateInterpolator());

    startAnimation(anim);
}

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);

    // creates the animation the first time
    if (anim == null) {
        createAnim(canvas);
    }

    int centerX = canvas.getWidth() / 2;
    int centerY = canvas.getHeight() / 2;

    canvas.drawBitmap(jobs, centerX - jobsXOffset,
            centerY - jobsYOffset, null);

    canvas.drawBitmap(wheel, centerX - wheelXOffset + 30,
            centerY - wheelYOffset, null);

}

}

but the result is similar to Canvas.Rotate, i was able to get the first image to rotate fine, but the second image will simply revolve around the first image, although i notice the second image is actually rotating too. looks like i will need a separate view for the second image, i was hoping to avoid this, because i am not sure how to make the wheel spin but the attached rope to not spin.

Answer 1

Have you tried RotateAnimation?

Answer 2

Check out my question and its answer, I think it is what you (and I) are looking for ... http://stackoverflow.com/questions/3137490/how-to-spin-an-android-icon-on-its-center-point

I put three animations, the text of my logo and my logo icon. Then I put a negative rotation on the text and positive on the icon. It is simple but cool. The answer on my question has the code listing.