Question

I want to rotate an imageview from 30 degrees on each click on a button.

On the first clic, i can set the animation properly but i can’t succeed to update the imageview position after the animation. When i clicked again on the button, the animation start from the original position of the imageview and not from the final position after the first animation.

Here is my code :

public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main);

    turnImg = (ImageView) findViewById(R.id.imageViewturnImg );
    Bitmap bmp = BitmapFactory.decodeResource(getResources(), R.drawable.imgTurn);
    // Getting width & height of the given image.
    int w = bmp.getWidth();
    int h = bmp.getHeight();

    turnImg .setImageBitmap(bmp);

    Button buttonok = (Button) findViewById(R.id.buttonok);
    buttonok.setOnClickListener(new OnClickListener() {
        public void onClick(View v) {
            turn();
        }
    });

}

public void turn()
{
    float degrees = 30; 

    RotateAnimation anim = new RotateAnimation(0, degrees,Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF,0.5f);
    anim.setInterpolator(new LinearInterpolator());
    anim.setDuration(300);
    anim.setFillEnabled(true);

    anim.setFillAfter(true);

    anim.setAnimationListener(new AnimationListener() {
        @Override
        public void onAnimationEnd(Animation arg0) {

        Matrix mat = turnImg.getImageMatrix();
            mat.postRotate(30,turnImg.getWidth()/2, turnImg.getHeight()/2);
            turnImg.setScaleType(ScaleType.MATRIX);
            turnImg.setImageMatrix(mat);

        }

        @Override
        public void onAnimationRepeat(Animation animation) {}
        @Override
        public void onAnimationStart(Animation animation) {}
    });


    turnImg.startAnimation(anim);

}

I think the problem came from the way i actualize the position in the onAnimationEnd().

ps : sorry for my bad english…

Answer 1

The problem is that your animation is not affecting the same object as your matrix rotation. That is, you are animating the rotation of the ImageView object, but then you are setting the rotation of the image that is within that ImageView object. So, for example, the first time you rotate it, the ImageView rotates from 0 to 30 degrees, and then remains at a rotation of 30 degrees due to the call to setFillAfter(true). Then the onAnimationEnd() handler runs, which rotates the internal image by 30 degrees. This effectively jumps the image to a rotation of 60 degrees, as seen by the user (30 for the View, 30 for the bitmap). Then the next time the animation runs, it rotates the view from 0 to 30 degrees, with the internal image still at its rotation of 30 degrees. This makes it look to the user like it’s rotating from 30 to 60 degrees. Then you apply another rotation on the internal image when that animation finishes, ending up with the image rotated to 60 degrees and the view rotated (again) to 30 degrees, so the image is now visually rotated to 90 degrees.

And so on.

There are different ways to handle this problem, but one simple way is to avoid affecting the two different objects – just work with the ImageView. Instead of rotating from 0 to 30 each time, rotate from whatever the current rotation is to that value plus 30 degrees. You can remove the onAnimationEnd() handler, because you will no longer need to rotate the image inside the view.

The resulting code for turn() is much simpler:

public void turn()
{
    RotateAnimation anim = new RotateAnimation(currentRotation, currentRotation + 30,
            Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF,0.5f);
    currentRotation = (currentRotation + 30) % 360;

    anim.setInterpolator(new LinearInterpolator());
    anim.setDuration(1000);
    anim.setFillEnabled(true);

    anim.setFillAfter(true);
    turnImg.startAnimation(anim);
}

This code assumes an instance variable of currentRotation, which is used to track the last degrees the view was rotated to.
Its a bit more involved if you allow the user to click mid-animation, but not too difficult.

By the way, this is much simpler in the animation system in 3.0; there is now a ‘rotation’ property on View, and you can run an animation on that property and it can track its own current value. But the approach above should work for older releases.