How can i use RotateAnimation to rotate a circle?

Question

I want my circle image (ImageView) to rotate as the user touch and drag it. If the user drags it to the right, it should spin right and vice versa. Like when you spin a DJ disc, if you know what i mean. I've played around a bit with OnTouchListener and RotateAnimation but i'm getting nowhere.

Any ideas?

Answer 1

Let's assume you have ImageView mCircle which you want to rotate. You have to use RotateAnimation to rotate it. In OnTouch method determine the angle where user's finger is.

For example, in your main activity do the following

private ImageView mCircle;
private double mCurrAngle = 0;
private double mPrevAngle = 0;

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

    mCircle = (ImageView) findViewById(R.id.circle);
    mCircle.setOnTouchListener(this); // Your activity should implement OnTouchListener
}

@Override
public boolean onTouch(View v, MotionEvent event) {
    final float xc = mCircle.getWidth() / 2;
    final float yc = mCircle.getHeight() / 2;

    final float x = event.getX();
    final float y = event.getY();

    switch (event.getAction()) {
    case MotionEvent.ACTION_DOWN: {
        mCircle.clearAnimation();
        mCurrAngle = Math.toDegrees(Math.atan2(x - xc, yc - y));
        break;
    }
    case MotionEvent.ACTION_MOVE: {
        mPrevAngle = mCurrAngle;
        mCurrAngle = Math.toDegrees(Math.atan2(x - xc, yc - y));
        animate(mPrevAngle, mCurrAngle, 0);
        break;
    }
    case MotionEvent.ACTION_UP : {
        mPrevAngle = mCurrAngle = 0;
        break;
    }
    }

    return true;
}

private void animate(double fromDegrees, double toDegrees, long durationMillis) {
    final RotateAnimation rotate = new RotateAnimation((float) fromDegrees, (float) toDegrees,
            RotateAnimation.RELATIVE_TO_SELF, 0.5f,
            RotateAnimation.RELATIVE_TO_SELF, 0.5f);
    rotate.setDuration(durationMillis);
    rotate.setFillEnabled(true);
    rotate.setFillAfter(true);
    mCircle.startAnimation(rotate);
}