前言#

最近看框架和源碼比較多，很久沒有寫動畫了，相信很多的朋友都對動畫感興趣，我也不例外，畢竟做前端還是要靠動畫特效吃飯的，并且比寫功能模塊更有成就感。

今天我們就來個稍微簡單一點的CircleProgressBar熱個身。

首先需要對ValueAnimator動畫，還有Canvas，Paint畫圖的相關的類和API都有一定的了解，所以這部分還比較薄弱的朋友可以先去學習一下基礎知識，否則可能會有些吃力。

正文#

先看一下效果圖，我不會錄屏，就百度了一張圖片：

這里寫圖片描述

大概是這樣的效果，首先我們不考慮效果，先畫出這個圓形的進度條，新建文件CircleProgressBar：

/**

* 進度

*/

private float mProgress = 50;

/**

* 最大進度

*/

private int mMaxProgress = 100;

/**

* 繪制進度條

*/

private void drawProgress(Canvas canvas) {

// 開始畫進度條

// 首先畫出背景圓

mPaint.setColor(mBackgroundColor);

mPaint.setStyle(Paint.Style.FILL);

// 這里減去了邊框的寬度

canvas.drawCircle(mWidth / 2, mHeight / 2, mRadius - mBorderWidth, mPaint);

// 畫出進度條

mPaint.setColor(mProgressBorderColor);

mPaint.setStyle(Paint.Style.STROKE);

mPaint.setStrokeWidth(mBorderWidth);

// 計算圓弧劃過的角度

float angle = CIRCULAR / mMaxProgress * mProgress;

// 這里要畫圓弧

canvas.drawArc(mContentRectF, -90, angle, false, mPaint);

// 畫出補全部分的進度條

mPaint.setColor(mBorderColor);

mPaint.setStrokeWidth(mBorderWidth);

// 這里要畫圓弧

canvas.drawArc(mContentRectF, -90 + angle, CIRCULAR - angle, false, mPaint);

}

先話出背景色的圓，然后畫出進度條的顏色的邊框，再畫出進度條以外的部分，為了顯示的明顯，我分別用了三個顏色，最終的效果：

這里寫圖片描述

最初的樣子已經出來了，但是有一個小細節要注意：

這里貼出mMaxProgress = 100，為什么不是1000，10000呢？當然也可以，但是我不推薦這個數字過大，大家可以去看看系統自帶的ProgressBar，他的注釋有提醒開發者，不要使用過大的max，最好是100，感興趣的可以去看一看。

現在就差動畫了，接下來我們來分析一下動畫：

1、首先進度會飛快的上漲，以順時針為方向，伸長的部分是頭部。

2、然后進度會飛速的下降，以順時針為方向，縮短的部分是尾部。

首先我們來完成第一部分：

/**

* 開始過度動畫

*/

private void startIntermediateAnim() {

if (valueAnimator == null) {

valueAnimator = new ValueAnimator().ofFloat(0, mMaxProgress);

valueAnimator.setDuration(DURATION);

valueAnimator.setInterpolator(new AccelerateDecelerateInterpolator());

valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {

@Override

public void onAnimationUpdate(ValueAnimator valueAnimator) {

// 設置進度

float value = (float) valueAnimator.getAnimatedValue();

setProgress(value);

}

});

valueAnimator.setRepeatCount(-1);

valueAnimator.start();

}

也是沒什么太多的技術含量，但是有幾點需要說明一下：

我們使用ValueAnimator().ofFloat，是為了動畫的流暢性，如果你使用了int，你會發現動畫會有一些細微的卡頓，因為int型舍棄了小數部分，這樣就會出現誤差，視覺上就會出現卡頓。

伸長的動畫已經成型了，那縮短的動畫不就簡單了，直接動畫reverse不就好了？我激動得設置了：

valueAnimator = new ValueAnimator().ofFloat(0, mMaxProgress，0);

或者是

valueAnimator.setRepeatMode(ValueAnimator.REVERSE);

我迫不及待的運行了代碼，臥草草，竟然不行？仔細觀察效果，我們發現了問題：

如果是縮短，還是從順時針的頭部縮短，而不是從尾部，這是為什么呢？其實從api也可以理解，因為我們是從起始位置開始畫弧，只要起始位置不變，尾部肯定不會發生變化。

雖然明白了這個道理，但是心情非常的壓抑，難道就要放棄了？突然靈光一閃，我發現了一個神奇的辦法，不知道機智的小伙伴是不是也想到了：

還記得我之前的繪圖步驟嗎？

先繪制進度部分，然后剩余部分不全。

既然進度部分只能頭部伸長，尾部也是一樣，那我讓補全部分伸長，那進度部分的尾部不就是縮短了嗎？

那如何讓補全部分伸長呢？

1、把progress在伸長結束時，開始讓補全部分使用progress，從而讓他伸長，但是這樣會改變原有的功能邏輯，非常危險，工作量也大。

2、最簡單的辦法，把進度的顏色不補全部分的顏色交換，然后把位置也互換，不就OK了？

經過簡單的修改之后：

if (valueAnimator == null) {

valueAnimator = new ValueAnimator().ofFloat(0, mMaxProgress);

valueAnimator.setDuration(DURATION);

valueAnimator.setInterpolator(new AccelerateDecelerateInterpolator());

valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {

@Override

public void onAnimationUpdate(ValueAnimator valueAnimator) {

float value = (float) valueAnimator.getAnimatedValue();

setProgress(value);

}

});

valueAnimator.addListener(new Animator.AnimatorListener() {

@Override

public void onAnimationStart(Animator animator) {

}

@Override

public void onAnimationEnd(Animator animator) {

// 因為是循環動畫，所以這里不會回調

}

@Override

public void onAnimationCancel(Animator animator) {

}

@Override

public void onAnimationRepeat(Animator animator) {

// 互換兩者的顏色

int color = getProgressBackgroundColor();

setProgressBackgroundColor(getProgressColor());

setProgressColor(color);

}

});

}

valueAnimator.setRepeatCount(-1);

valueAnimator.start();

ok，還有誰？最關鍵的部分已經全部完成了，還差最后一點點，仔細的觀察效果圖，發現進度條是有最小進度的，沒有完全消失，所以我們再設置一個最小進度，并且每次設置進度的時候，我們都稍微旋轉一下角度，這樣就會一邊伸長縮短一邊旋轉了：

/**

* 開始過度動畫

*/

private void startIntermediateAnim() {

if (valueAnimator == null) {

valueAnimator = new ValueAnimator().ofFloat(mMinProgress, mMaxProgress - mMinProgress);

valueAnimator.setDuration(DURATION);

valueAnimator.setInterpolator(new AccelerateDecelerateInterpolator());

valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {

@Override

public void onAnimationUpdate(ValueAnimator valueAnimator) {

float value = (float) valueAnimator.getAnimatedValue();

setProgress(value);

// 每次旋轉2度

mStartAngle += 2;

}

});

valueAnimator.addListener(new Animator.AnimatorListener() {

@Override

public void onAnimationStart(Animator animator) {

}

@Override

public void onAnimationEnd(Animator animator) {

}

@Override

public void onAnimationCancel(Animator animator) {

}

@Override

public void onAnimationRepeat(Animator animator) {

// 因為有了最小進度，所以每次都要位置設置到補全部分的位置

mStartAngle = mStartAngle - CIRCULAR / mMaxProgress * mMinProgress;

// 互換兩者的顏色

int color = getProgressBackgroundColor();

setProgressBackgroundColor(getProgressColor());

setProgressColor(color);

}

});

}

valueAnimator.setRepeatCount(-1);

valueAnimator.start();

}

最終的效果，就想一開始的效果圖一樣，這里不貼了。

總結#

看上去稍微有點復雜的動畫，經過我們的分析拆解，就變得很簡單了。如果是利用Translation, Rotate 這樣的動畫，那實現起來真是太難了，ValueAnimator就是從他們中分離出來的專門用來計算差值的強大武器，有了它我們開發一些高級的效果，就簡單多了。

我對demo進行了一些修改，即可以是普通的圓形進度條，也可以是loading的動畫，就想progressBar一樣，大家可以下載下來，參考一下。

ok，今天就到這里了，明天就是周末了，祝大家浪起來~

總結

以上是生活随笔為你收集整理的android刷新时的圆形动画_Android动画篇（一）：圆形进度条CircleProgressBar的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。