关于旋转动画效果

好久没有写过blog了,5.1还在继续劳动,:(
刚研究完一个旋转动画的,困扰了我很久的一个问题,现在终于解决了,放在这里给大家分享,避免大家走我一样的弯路,:)
Main.java:

public class Main extends Activity {

	private com.example.view.RoundSpinView mSelfView;

	/** Called when the activity is first created. */
	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.main);
		mSelfView = (com.example.view.RoundSpinView) findViewById(R.id.mSelfView);
		mSelfView.setmPointX(160);
		mSelfView.setmPointY(150);
		mSelfView.setmRadius(80);
		mSelfView.fixBoxPosition();
	}
}

自定义View,实现旋转动画:
RoundSpinView.java:

public class RoundSpinView extends View {

	private Paint mPaint = new Paint();
	private static final int STONE_COUNT = 4;
	/** 4张图片分布的角度均值 */
	private int mDegreeDelta;
	private float mDown_x, mDown_y;

	private int[] mResourceId = { R.drawable.customer, R.drawable.product,
			R.drawable.order, R.drawable.info };

	public RoundSpinView(Context context, AttributeSet attrs) {
		super(context, attrs);
		mPaint.setColor(Color.RED);
		mPaint.setStrokeWidth(2);
		setupStones();
		computeCoordinates();
	}

	/** 初始化每个旋转图片的坐标位置及图片资源 */
	private void setupStones() {
		mStones = new BigStone[STONE_COUNT];
		BigStone stone;
		int angle = 0;
		mDegreeDelta = 360 / STONE_COUNT;

		for (int index = 0; index < STONE_COUNT; index++) {
			stone = new BigStone();
			stone.angle = angle;
			stone.bitmap = BitmapFactory.decodeResource(getResources(),
					mResourceId[index]);
			angle += mDegreeDelta;
			mStones[index] = stone;
		}
	}

	/** 计算每个旋转图片坐标 */
	private void computeCoordinates() {
		BigStone stone;
		for (int index = 0; index < STONE_COUNT; index++) {
			stone = mStones[index];
			if (stone.angle >= 360) {
				stone.angle -= 360;
			}
			stone.x = mPointX
					+ (float) (mRadius * Math.cos(stone.angle * Math.PI / 180));
			stone.y = mPointY
					+ (float) (mRadius * Math.sin(stone.angle * Math.PI / 180));
		}
	}

	public RoundSpinView(Context context) {
		super(context);
	}

	private BigStone[] mStones;

	/** 旋转的中心点 */
	private int mPointX = 0, mPointY = 0;
	/** 旋转半径 */
	private int mRadius = 0;

	private int[] mInts = new int[] { 0, 0, 0, 0 };
	/** 标识那个图片应该位于正中间 */
	private int mIn;

	public int getmRadius() {
		return mRadius;
	}

	public void setmRadius(int mRadius) {
		this.mRadius = mRadius;
	}

	public int getmPointX() {
		return mPointX;
	}

	public void setmPointX(int mPointX) {
		this.mPointX = mPointX;
	}

	public int getmPointY() {
		return mPointY;
	}

	public void setmPointY(int mPointY) {
		this.mPointY = mPointY;
	}

	/** Sort the elements in one array. */
	public static void sort(int[] data) {
		int len = data.length;
		for (int i = 0; i < len - 1; i++) {
			int temp = 0;
			boolean isExchanged = false;
			for (int j = len - 1; j > i; j--) {
				if (data[j] < data[j - 1]) {
					temp = data[j];
					data[j] = data[j - 1];
					data[j - 1] = temp;
					/** 发生了交换,故将交换标志置为真 */
					isExchanged = true;
				}
			}
			/** 本趟排序未发生交换,提前终止算法,提高效率 */
			if (!isExchanged) {
				return;
			}
		}
	}

	public void fixBoxPosition() {
		for (int i = 0; i < 4; i++) {
			mInts[i] = Math.abs(mStones[i].angle - 90);
		}
		RoundSpinView.sort(mInts);
		for (int i = 0; i < 4; i++) {
			if (Math.abs(mStones[i].angle - 90) == mInts[0]) {
				mIn = i;
				break;
			}
		}
		int mO = 0;
		do {
			mStones[mIn].angle = mO * 90 + 90;
			mIn++;
			if (mIn == 4) {
				mIn = 0;
			}
			mO++;
		} while (mO < 4);
		computeCoordinates();
		invalidate();
	}

	public void catchClickEvent(float mX, float mY) {
		System.out.println("mDown_x__________" + mDown_x);
		System.out.println("mDown_y__________" + mDown_y);
		for (int i = 0; i < mStones.length; i++) {
			if (mStones[i].angle == 90) {
				mStones[i].bitmap = BitmapFactory.decodeResource(
						getResources(), R.drawable.icon);
			}
		}
		invalidate();
	}

	@Override
	public boolean dispatchTouchEvent(MotionEvent event) {
		switch (event.getAction()) {
		case MotionEvent.ACTION_DOWN:
			mDown_x = event.getX();
			mDown_y = event.getY();
			// catchClickEvent(mDown_x, mDown_y);
			break;
		case MotionEvent.ACTION_MOVE:
			float mDistance_x = event.getX() - mDown_x;
			float mDistance_y = event.getY() - mDown_y;
			computeAngle(mDistance_x, mDistance_y);
			computeCoordinates();
			invalidate();
			break;
		case MotionEvent.ACTION_UP:
			fixBoxPosition();
			break;
		}
		return true;
	}

	public void computeAngle(float mX, float mY) {
		int angle = (int) (mX * 0.1);
		if (mX < 0) {
			for (int index = 0; index < STONE_COUNT; index++) {
				mStones[index].angle = mStones[index].angle - angle;
			}
		} else if (mX > 0) {
			for (int index = 0; index < STONE_COUNT; index++) {
				mStones[index].angle = mStones[index].angle - angle;
			}
		}
	}

	/** 计算一次滑动的角度 */
	public int computeCurrentAngle(float x, float y) {
		float distance = (float) Math
				.sqrt(((x - mPointX) * (x - mPointX) + (y - mPointY)
						* (y - mPointY)));
		int degree = (int) (Math.acos((x - mPointX) / distance) * 180 / Math.PI);
		return degree;
	}

	@Override
	public void onDraw(Canvas canvas) {
		canvas.drawPoint(mPointX, mPointY, mPaint);

		for (int index = 0; index < STONE_COUNT; index++) {
			if (!mStones[index].isVisible)
				continue;
			drawInCenter(canvas, mStones[index].bitmap, mStones[index].x,
					mStones[index].y);
			// 不想有红线，就注掉下面这句
			// canvas.drawLine(mPointX, mPointY, mStones[index].x,
			// mStones[index].y, mPaint);
		}
	}

	/**
	 * 把中心点放到中心处
	 * 
	 * @param canvas
	 * @param bitmap
	 * @param left
	 * @param top
	 */
	void drawInCenter(Canvas canvas, Bitmap bitmap, float left, float top) {
		canvas.drawPoint(left, top, mPaint);
		canvas.drawBitmap(bitmap, left - bitmap.getWidth() / 2,
				top - bitmap.getHeight() / 2, null);
	}

	class BigStone {
		Bitmap bitmap;
		int angle;
		float x;
		float y;
		boolean isVisible = true;
	}
}

代码有点长,各位可以建个工程运行看下效果.

main.xml:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
	android:layout_width="fill_parent" android:layout_height="fill_parent"
	android:background="@drawable/bg">
	<TextView android:layout_width="fill_parent"
		android:layout_height="wrap_content" android:text="The animation is solved." />
	<com.example.view.RoundSpinView
		android:layout_width="320dp" android:layout_height="300dp" android:id="@+id/mSelfView"
		android:layout_alignParentBottom="true" />
</RelativeLayout>

评论

1 楼 zzhhff2008 2012-06-30