android轉圈動畫

① Android屬性動畫之旋轉動畫

CSDN同步發布

旋轉動畫有三種

角度增加是逆時針方向旋轉。注意，如果旋轉角度是90度的話，最終View會不可見。

當要旋轉的View尺寸很小的時候，效果很好，但是當View很大的時候，就出問題了。如下所示：

當時很奇怪為啥會這樣呢？最後是在這篇文章 實現翻轉卡片的動畫效果 看到了一個叫cameraDistance的東西，然後感覺可能這個有用，試了試果然可以。

View的 getCameraDistance 方法。

View的 setCameraDistance 方法，看注釋。

注意：注釋中的這段這個相源襲機距離用「深度像素」來表示。默認的距離依賴屏幕的密度。例如，在一個中等沒裂棗密度的屏幕上，默認的距離是1280。在高密度的屏幕上，默認距離是1920。我認為這個單位是dp。1280dp，1920dp。我的測試機density是2.75，通過getCameraDistance方法，獲枯拆取到的值是3520.0，3520.0除以2.75就是1280。

注意：關於設置cameraDistance，建議始終使用大於此視圖高度（繞X軸旋轉）或寬度（Y軸旋轉）的相機距離。而且這個距離得比較大才行，我測試下來得10000以上才可以。如下所示：

同樣需要設置 cameraDistance

平時這個用的比較多應該，也比較簡單。也不涉及 cameraDistance 的東西。

參考鏈接

② Android 旋轉動畫怎麼動態設置旋轉角度，用

RotateAnimation rotateAnimation = new RotateAnimation(0, 180, centerX, centerY);
其中第一個參數表示動畫的起始角度，第二個參數表示動畫的結束角度。

③ 如何在android studio 中實現圓餅圖的轉動

/**
* 隨手記中可以任意旋轉的炫酷餅圖的實現原理
*
* 小記：
* 在實現的過程中，主要是用到了一些數學計算來實現角度和屏幕位置坐標的計算
* 關於任意兩個點之間的角度計算的問題，一開始想了很久沒有結果，最後，一個偶然的靈光，讓整個
* 事情變得簡單起來，就是計算任意兩個點相對於中心坐標的角度的時候，首先，計算
* 每個點相對於x軸正方向的角度，這樣，總可以將其轉化為計算直角三角形的內角計算問題
* 再將兩次計算的角度進行減法運算，就實現了。是不是很簡單？呵呵，對於像我們這樣數學
* 沒有學好的開發者來說，也只有這樣化難為簡了
*
* @author liner
*
*/
public class PieChart extends View{
public static final String TAG = "PieChart";
public static final int ALPHA = 100;
public static final int ANIMATION_DURATION = 800;
public static final int ANIMATION_STATE_RUNNING = 1;
public static final int ANIMATION_STATE_DOWN = 2;
/**
* 不要問我這個值是怎麼設置的。這個就是圖片中的一大塊圓形區域對應的長方形四個邊的坐標位置
* 具體的值，自己需要多次嘗試並調整了。這樣，我們的餅圖就是相對於這個區域來畫的
*/
private static final RectF OVAL = new RectF(18,49,303,340);
private int[] colors; //每部分的顏色值
private int[] values; //每部分的大小
private int[] degrees; //值轉換成角度
private String[] titles; //每部分的內容
private Paint paint;
private Paint maskPaint;
private Paint textPaint;
private Point lastEventPoint;
private int currentTargetIndex = -1;
private Point center; //這個是餅圖的中心位置
private int eventRadius = 0; //事件距離餅圖中心的距離
//測試的時候使用的
//private ChartClickListener clickListener;
private Bitmap mask; //用於遮罩的Bitmap
private int startDegree = 90; //讓初始的時候，圓餅是從箭頭位置開始畫出的
private int animState = ANIMATION_STATE_DOWN;
private boolean animEnabled = false;
private long animStartTime;
public PieChart(Context context) {
super(context);
init();
}
public PieChart(Context context, AttributeSet attrs){
this(context, attrs, 0);
}
public PieChart(Context context, AttributeSet attrs, int defStyle){
super(context, attrs, defStyle);
init();
}
private void init(){
paint = new Paint();
maskPaint = new Paint();
textPaint = new Paint();
textPaint.setColor(Color.WHITE);
textPaint.setTypeface(Typeface.DEFAULT_BOLD);
textPaint.setAlpha(100);
textPaint.setTextSize(16);
values = new int[]{
60,
90,
30,
50,
70
};
//titles = new String[]{
//"川菜",
//"徽菜",
//"粵菜",
//"閩菜",
//"湘菜"
//};
//測試文字居中顯示
titles = new String[]{
"我是三歲",
"說了算四大皆空",
"士大",
"史蒂芬森地",
"湘"
};
colors = new int[]{
Color.argb(ALPHA, 249, 64, 64),
Color.argb(ALPHA, 0, 255, 0),
Color.argb(ALPHA, 255, 0, 255),
Color.argb(ALPHA, 255, 255, 0),
Color.argb(ALPHA, 0, 255, 255)
};
degrees = getDegrees();
//Drawable d = getResources().getDrawable(R.drawable.mask);
mask = BitmapFactory.decodeResource(getResources(), R.drawable.mask);
//獲取初始位置的時候，下方箭頭所在的區域
animEnabled = true; //同時，啟動動畫
}
//public void setChartClickListener(ChartClickListener l){
//this.clickListener = l;
//}
//計算總和
private int sum(int[] values){
int sum = 0;
for(int i=0; i<values.length;i++){
sum += values[i];
}
return sum;
}
/**
* 根據每部分所佔的比例，來計算每個區域在整個圓中所佔的角度
* 但是，有個小細節，就是計算的時候注意，可能並不能整除的情況，這個時候，為了
* 避免所有的角度和小於360度的情況，姑且將剩餘的部分送給某個部分，反正也不影響
* @return
*/
private int[] getDegrees(){
int sum = this.sum(values);
int[] degrees = new int[values.length];
for(int i=0; i<values.length; i++){
degrees[i] = (int)Math.floor((double)((double)values[i]/(double)sum)*360);
//Log.v("Angle", angles[i]+"");
}
int angleSum = this.sum(degrees);
if(angleSum != 360){
//上面的計算可能導致和小於360
int c = 360 - angleSum;
degrees[values.length-1] += c; //姑且讓最後一個的值稍大點
}
return degrees;
}
/**
* 重寫這個方法來畫出整個界面
*/
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
if(animEnabled){
/**
* 說明是啟動的時候，需要旋轉著畫出餅圖
*/
Log.e(TAG, "anim enabled");
if(animState == ANIMATION_STATE_DOWN){
animStartTime = SystemClock.uptimeMillis();
animState = ANIMATION_STATE_RUNNING;

}

final long currentTimeDiff = SystemClock.uptimeMillis() - animStartTime;
int currentMaxDegree = (int)((float)currentTimeDiff/ANIMATION_DURATION*360f);
Log.e(TAG, "當前最大的度數為:"+currentMaxDegree);
if(currentMaxDegree >= 360){
//動畫結束狀態,停止繪制
currentMaxDegree = 360;
animState = ANIMATION_STATE_DOWN;
animEnabled = false;
}
int[] degrees = getDegrees();
int startAngle = this.startDegree;

//獲取當前時刻最大可以旋轉的角度所位於的區域
int maxIndex = getEventPart(currentMaxDegree);

//根據不同的顏色畫餅圖
for(int i=0; i<= maxIndex; i++){
int currentDegree = degrees[i];

if(i== maxIndex){
//對於當前最後一個繪制區域，可能只是一部分，需要獲取其偏移量
currentDegree = getOffsetOfPartStart(currentMaxDegree, maxIndex);
}

if(i > 0){
//注意，每次畫餅圖，記得計算startAngle
startAngle += degrees[i-1];
}

paint.setColor(colors[i]);
canvas.drawArc(OVAL, startAngle, currentDegree, true, paint);
}

if(animState == ANIMATION_STATE_DOWN){
//如果動畫結束了，則調整當前箭頭位於所在區域的中心方向
onStop();

}else{
postInvalidate();
}

}else{
int[] degrees = getDegrees();
int startAngle = this.startDegree;

/**
* 每個區域的顏色不同，但是這里只要控制好每個區域的角度就可以了，整個是個圓
*/
for(int i=0; i<values.length; i++){
paint.setColor(colors[i]);
if(i>0){
startAngle += degrees[i-1];
}
canvas.drawArc(OVAL, startAngle, degrees[i], true, paint);
}
}


/**
* 畫出餅圖之後，畫遮罩圖片，這樣圖片就位於餅圖之上了，形成了遮罩的效果
*/
canvas.drawBitmap(mask, 0, 0, maskPaint);

/**
* 根據當前計算得到的箭頭所在區域顯示該區域代表的信息
*/
if(currentTargetIndex >= 0){
String title = titles[currentTargetIndex];
textPaint.setColor(colors[currentTargetIndex]);
//簡單作個計算,讓文字居中顯示
int width = title.length()*17;
canvas.drawText(title, 157-width/2+3, 383, textPaint);
}
}

/**
* 處理餅圖的轉動
*/
public boolean onTouchEvent(MotionEvent event){

if(animEnabled && animState == ANIMATION_STATE_RUNNING){
return super.onTouchEvent(event);
}

Point eventPoint = getEventAbsoluteLocation(event);
computeCenter(); //計算中心坐標

//計算當前位置相對於x軸正方向的角度
//在下面這個方法中計算了eventRadius的
int newAngle = getEventAngle(eventPoint, center);

int action = event.getAction();

switch (action) {
case MotionEvent.ACTION_DOWN:
lastEventPoint = eventPoint;
if(eventRadius > getRadius()){
/**
* 只有點在餅圖內部才需要處理轉動,否則直接返回
*/
Log.e(TAG, "當前位置超出了半徑："+eventRadius+">"+getRadius());
return super.onTouchEvent(event);
}
break;
case MotionEvent.ACTION_MOVE:
//這里處理滑動
rotate(eventPoint, newAngle);
//處理之後，記得更新lastEventPoint
lastEventPoint = eventPoint;
break;
case MotionEvent.ACTION_UP:
onStop();
break;
default:
break;
}

return true;
}

/**
* 當我們停止旋轉的時候，如果當前下方箭頭位於某個區域的非中心位置，則我們需要計算
* 偏移量，並且將箭頭指向中心位置
*/
private void onStop() {
int targetAngle = getTargetDegree();
currentTargetIndex = getEventPart(targetAngle);
int offset = getOffsetOfPartCenter(targetAngle, currentTargetIndex);
/**
* offset>0,說明當前箭頭位於中心位置右邊，則所有區域沿著順時針旋轉offset大小的角度
* offset<0,正好相反
*/
startDegree += offset;
postInvalidateDelayed(200);
}
private void rotate(Point eventPoint, int newDegree) {
//計算上一個位置相對於x軸正方向的角度
int lastDegree = getEventAngle(lastEventPoint, center);

/**
* 其實轉動就是不斷的更新畫圓弧時候的起始角度，這樣，每次從新的起始角度重畫圓弧就形成了轉動的效果
*/
startDegree += newDegree-lastDegree;

//轉多圈的時候，限定startAngle始終在-360-360度之間
if(startDegree >= 360){
startDegree -= 360;
}else if(startDegree <= -360){
startDegree += 360;
}

Log.e(TAG, "當前startAngle："+startDegree);

//獲取當前下方箭頭所在的區域，這樣在onDraw的時候就會轉到不同區域顯示的是當前區域對應的信息
int targetDegree = getTargetDegree();
currentTargetIndex = getEventPart(targetDegree);

//請求重新繪制界面，調用onDraw方法
postInvalidate();
}


/**
* 獲取當前事件event相對於屏幕的坐標
* @param event
* @return
*/
protected Point getEventAbsoluteLocation(MotionEvent event){
int[] location = new int[2];
this.getLocationOnScreen(location); //當前控制項在屏幕上的位置

int x = (int)event.getX();
int y = (int)event.getY();

x += location[0];
y += location[1]; //這樣x,y就代表當前事件相對於整個屏幕的坐標

Point p = new Point(x, y);

Log.v(TAG, "事件坐標："+p.toString());

return p;
}
/**
* 獲取當前餅圖的中心坐標，相對於屏幕左上角
*/
protected void computeCenter(){
if(center == null){
int x = (int)OVAL.left + (int)((OVAL.right-OVAL.left)/2f);
int y = (int)OVAL.top + (int)((OVAL.bottom - OVAL.top)/2f)+50; //狀態欄的高度是50
center = new Point(x,y);
//Log.v(TAG, "中心坐標："+center.toString());
}
}
/**
* 獲取半徑
*/
protected int getRadius(){
int radius = (int)((OVAL.right-OVAL.left)/2f);
//Log.v(TAG, "半徑："+radius);
return radius;
}
/**
* 獲取事件坐標相對於餅圖的中心x軸正方向的角度
* 這里就是坐標系的轉換，本例中使用餅圖的中心作為坐標中心，就是我們從初中到大學一直使用的"正常"坐標系。
* 但是涉及到圓的轉動，本例中一律相對於x正方向順時針來計算某個事件在坐標系中的位置
* @param eventPoint
* @param center
* @return
*/
protected int getEventAngle(Point eventPoint, Point center){
int x = eventPoint.x - center.x;//x軸方向的偏移量
int y = eventPoint.y - center.y; //y軸方向的偏移量
//Log.v(TAG, "直角三角形兩直邊長度："+x+","+y);
double z = Math.hypot(Math.abs(x), Math.abs(y)); //求直角三角形斜邊的長度
//Log.v(TAG, "斜邊長度："+z);
eventRadius = (int)z;
double sinA = (double)Math.abs(y)/z;
//Log.v(TAG, "sinA="+sinA);
double asin = Math.asin(sinA); //求反正玄，得到當前點和x軸的角度,是最小的那個
//Log.v(TAG, "當前相對偏移角度的反正弦："+asin);
int degree = (int)(asin/3.14f*180f);
//Log.v(TAG, "當前相對偏移角度："+angle);
//下面就需要根據x,y的正負，來判斷當前點和x軸的正方向的夾角
int realDegree = 0;
if(x<=0 && y<=0){
//左上方，返回180+angle
realDegree = 180+degree;
}else if(x>=0 && y<=0){
//右上方，返回360-angle
realDegree = 360-degree;
}else if(x<=0 && y>=0){
//左下方，返回180-angle
realDegree = 180-degree;
}else{
//右下方,直接返回
realDegree = degree;
}
//Log.v(TAG, "當前事件相對於中心坐標x軸正方形的順時針偏移角度為："+realAngle);
return realDegree;
}
/**
* 獲取當前下方箭頭位置相對於startDegree的角度值
* 注意，下方箭頭相對於x軸正方向是90度
* @return
*/
protected int getTargetDegree(){
int targetDegree = -1;
int tmpStart = startDegree;
/**
* 如果當前startAngle為負數，則直接+360，轉換為正值
*/
if(tmpStart < 0){
tmpStart += 360;
}
if(tmpStart < 90){
/**
* 如果startAngle小於90度（可能為負數）
*/
targetDegree = 90 - tmpStart;
}else{
/**
* 如果startAngle大於90，由於在每次計算startAngle的時候，限定了其最大為360度，所以
* 直接可以按照如下公式計算
*/
targetDegree = 360 + 90 - tmpStart;
部分代碼 網路知道限制字數 下載附件查看

java">{

	ImageViewiv;
	@Override
	protectedvoidonCreate(BundlesavedInstanceState){
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_two);
		iv=(ImageView)findViewById(R.id.image);
		RotateAnimationanimation=newRotateAnimation(0,360);
		animation.setDuration(100000);//設定轉一圈的時間
		animation.setRepeatCount(Animation.INFINITE);//設定無限循環
		animation.setRepeatMode(Animation.RESTART);
		iv.startAnimation(animation);
	}
}

{

	privatefloatmCurDegree=0;//當前旋轉角度
	publicRotateView(Contextcontext,AttributeSetattrs){
		super(context,attrs);
		newThread(this).start();
	}

	@Override
	protectedvoidonLayout(booleanchanged,intleft,inttop,intright,
			intbottom){
		super.onLayout(changed,left,top,right,bottom);
		//設定旋轉中心
		setPivotX(getMeasuredWidth()/2);
		setPivotY(getMeasuredHeight()/2);
	}
	
	@Override
	publicvoidrun(){
		while(true){
			setRotation(mCurDegree);
			mCurDegree+=5;
			postInvalidate();
			SystemClock.sleep(16);
		}
	}
}