Android中怎么實(shí)現(xiàn)一個圓弧刷新動畫，相信很多沒有經(jīng)驗(yàn)的人對此束手無策，為此本文總結(jié)了問題出現(xiàn)的原因和解決方法，通過這篇文章希望你能解決這個問題。

10年積累的網(wǎng)站設(shè)計(jì)、成都網(wǎng)站設(shè)計(jì)經(jīng)驗(yàn)，可以快速應(yīng)對客戶對網(wǎng)站的新想法和需求。提供各種問題對應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識你，你也不認(rèn)識我。但先制作網(wǎng)站后付款的網(wǎng)站建設(shè)流程，更有宿城免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

之前刷動畫的效果是三段圓弧進(jìn)行旋轉(zhuǎn)，同時弧度也在逐漸增大縮小，這里采用的是在onDraw中繪制三段圓弧。

// 繪制圓弧
mPaint.setColor(mTopColor);
canvas.drawArc(left, top, right, bottom, startAngle, sweepAngle, false, mPaint);
mPaint.setColor(mLeftColor);
canvas.drawArc(left, top, right, bottom, startAngle - 120, sweepAngle, false, mPaint);
mPaint.setColor(mRightColor);
canvas.drawArc(left, top, right, bottom, startAngle + 120, sweepAngle, false, mPaint);

動畫的基礎(chǔ)是在onDraw中，依次繪制三種不同顏色的圓弧。三段圓弧每每相隔120度，這樣就可以剛好平分整個圓，比較美觀。

注意這里的startAngle的初始值是 -90 ，剛好是圓的最上面一點(diǎn)。這里需要注意的是canvas的drawArc方法中，前四個參數(shù)是決定圓弧的位置的矩形的坐標(biāo)，startAngle指的是圓弧開始的角度，0度是圓的最右側(cè)的點(diǎn)，以順時針為正、逆時針為負(fù)。所以-90度剛好是圓的最上面的點(diǎn)。

sweepAngle是指圓弧掃過的角度，同樣順時針為正，逆時針為負(fù)。這里sweepAngle的大小初始值是-1，這樣在動畫未開始之前也能夠繪制出一個圓點(diǎn)(實(shí)際上是角度為1的圓弧，近似圓點(diǎn))。
后面一個參數(shù)是useCenter，指的是是否使用圓心，為true時就會將圓弧的兩個端點(diǎn)連向圓心構(gòu)成一個扇形，為false時則不會連接圓心。

另外要注意paint的style要設(shè)置為stroke，默認(rèn)情況下是fill模式，也就是會直接填充。對于這里的圓弧，會直接連接圓弧的兩個端點(diǎn)構(gòu)成閉合圖形然后進(jìn)行填充。

從上面也可以看出，要繪制圓弧必須要有四個坐標(biāo)，這里的坐標(biāo)是以這種方式得到的：以View的長寬中最短的一邊作為組成圓的正方形的邊長，然后居中顯示。

int width = getMeasuredWidth();
int height = getMeasuredHeight();
int side = Math.min(width - getPaddingStart() - getPaddingEnd(), height - getPaddingTop() - getPaddingBottom()) - (int) (mStrokeWidth + 0.5F);

// 確定動畫位置
float left = (width - side) / 2F;
float top = (height - side) / 2F;
float right = left + side;
float bottom = top + side;

上面的一段代碼就是定位圓弧的正方形坐標(biāo)的實(shí)現(xiàn)，這里可以看到在計(jì)算邊長side的時候，去掉了view的padding和mStrokenWidth。其中mStrokenWidth是圓弧的弧線的寬度，由于圓弧的線較寬的時候(此時相當(dāng)于圓環(huán))會向內(nèi)外均勻延伸，也就是內(nèi)邊距和外邊距的中間到圓心的距離才是半徑。因此在確定圓弧的位置時，要去除線寬，以防止在交界處圓弧無法完全繪制。

另外，我們自定義View時，默認(rèn)的wrap_content模式下會與match_parent的效果一樣，因此需要在onMeasure中進(jìn)行處理。這里就簡單的設(shè)置wrap_content模式下為20dp。

@Override
 protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
  super.onMeasure(widthMeasureSpec, heightMeasureSpec);
  int widthMode = MeasureSpec.getMode(widthMeasureSpec);
  int heightMode = MeasureSpec.getMode(heightMeasureSpec);

  int width = MeasureSpec.getSize(widthMeasureSpec);
  int height = MeasureSpec.getSize(heightMeasureSpec);

  // 對于wrap_content ，設(shè)置其為20dp。默認(rèn)情況下wrap_content和match_parent是一樣的效果
  if (widthMode == MeasureSpec.AT_MOST) {
   width = (int) (TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 20, getContext().getResources().getDisplayMetrics()) + 0.5F);
  }
  if (heightMode == MeasureSpec.AT_MOST) {
   height = (int) (TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 20, getContext().getResources().getDisplayMetrics()) + 0.5F);
  }
  setMeasuredDimension(width, height);
 }

以上的操作就是動畫的整個基礎(chǔ)，而讓View動起來的操作就是不斷地修改圓弧的startAngle和sweepAngle，然后觸發(fā)View的重繪。這個過程使用ValueAnimator來生成一系列數(shù)字，然后根據(jù)這個來計(jì)算圓弧的開始角度和掃描角度。

// 最小角度為1度，是為了顯示小圓點(diǎn)
sweepAngle = -1;
startAngle = -90;
curStartAngle = startAngle;

// 擴(kuò)展動畫
mValueAnimator = ValueAnimator.ofFloat(0, 1).setDuration(mDuration);
mValueAnimator.setRepeatMode(ValueAnimator.REVERSE);
mValueAnimator.setRepeatCount(ValueAnimator.INFINITE);
mValueAnimator.addUpdateListener(animation -> {
float fraction = animation.getAnimatedFraction();
float value = (float) animation.getAnimatedValue();
   if (mReverse)
    fraction = 1 - fraction;
   startAngle = curStartAngle + fraction * 120;
   sweepAngle = -1 - mMaxSweepAngle * value;
   postInvalidate();
  });
  mValueAnimator.addListener(new AnimatorListenerAdapter() {
   @Override
   public void onAnimationRepeat(Animator animation) {
    curStartAngle = startAngle;
    mReverse = !mReverse;
   }
  });

上面就是計(jì)算的過程，該動畫采用的是value值從0到1再到0，對應(yīng)著其中一段圓弧從原點(diǎn)伸展到最大再縮小回原點(diǎn)。其中sweepAngle的計(jì)算是 sweepAngle = -1 - mMaxSweepAngle * value ，也就是在整個過程中，圓弧的角度逐漸增大到maxSweepAngle。這里采用的是負(fù)值，也就是從startAngle按逆時針方向進(jìn)行繪制。-1是基礎(chǔ)值，以防止縮小到最小時也能夠顯示出一個圓點(diǎn)。

startAngle的計(jì)算則是根據(jù)動畫過程的fraction，而不是動畫值，也就是從0到1，在整個動畫過程中逐漸增加120度。由于整個View是由三段相同的圓弧形成的，也就是說每段圓弧最大只能占據(jù)120度，否則就會重疊。那么在0到1這個過程中，弧度增大到120度，startAngle則必須移動120度給圓弧騰出位置，這就是120度的由來。并且監(jiān)聽Reverse狀態(tài)，因?yàn)樵赗everse狀態(tài)下，fraction是從1到0的，而我們需要的是startAngle一直逐漸增大，因此在Reverse下通過1-fraction使之與原動畫一致。 并且每次reverse監(jiān)聽下，記錄startAngle作為新的當(dāng)前位置和記錄reverse狀態(tài)。

以上就是整個圓弧動畫的實(shí)現(xiàn)細(xì)節(jié)了，整體比較簡單，就是通過對弧度的startAngle和sweepAngle進(jìn)行改變?nèi)缓笸ㄖ猇iew重繪。 下面是實(shí)現(xiàn)的完整代碼 ，這里抽取了一些基礎(chǔ)變量放到屬性中，用于簡便控制動畫的顯示：

values/attrs.xml

RefreshView.java

package com.pgaofeng.mytest.other;

import android.animation.Animator;
import android.animation.AnimatorListenerAdapter;
import android.animation.ValueAnimator;
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.support.annotation.Nullable;
import android.util.AttributeSet;
import android.util.TypedValue;
import android.view.View;

import com.pgaofeng.mytest.R;

/**
 * @author gaofengpeng
 * @date 2019/9/16
 * @description :
 */
public class RefreshView extends View {

 /**
  * 動畫的三種顏色
  */
 private int mTopColor;
 private int mLeftColor;
 private int mRightColor;

 private Paint mPaint;

 /**
  * 掃描角度，用于控制圓弧的長度
  */
 private float sweepAngle;
 /**
  * 開始角度，用于控制圓弧的顯示位置
  */
 private float startAngle;
 /**
  * 當(dāng)前角度，記錄圓弧旋轉(zhuǎn)的角度
  */
 private float curStartAngle;

 /**
  * 用動畫控制圓弧顯示
  */
 private ValueAnimator mValueAnimator;

 /**
  * 每個周期的時長
  */
 private int mDuration;
 /**
  * 圓弧線寬
  */
 private float mStrokeWidth;

 /**
  * 動畫過程中最大的圓弧角度
  */
 private int mMaxSweepAngle;

 /**
  * 是否自動開啟動畫
  */
 private boolean mAutoStart;

 /**
  * 用于判斷當(dāng)前動畫是否處于Reverse狀態(tài)
  */
 private boolean mReverse = false;


 public RefreshView(Context context) {
  this(context, null);
 }

 public RefreshView(Context context, @Nullable AttributeSet attrs) {
  this(context, attrs, 0);
 }

 public RefreshView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
  super(context, attrs, defStyleAttr);
  initAttr(context, attrs);
  init();
 }

 private void initAttr(Context context, AttributeSet attrs) {
  TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.RefreshView);
  mTopColor = array.getColor(R.styleable.RefreshView_top_color, Color.BLUE);
  mLeftColor = array.getColor(R.styleable.RefreshView_left_color, Color.YELLOW);
  mRightColor = array.getColor(R.styleable.RefreshView_right_color, Color.RED);
  mDuration = array.getInt(R.styleable.RefreshView_duration, 600);
  if (mDuration <= 0) {
   mDuration = 600;
  }
  mStrokeWidth = array.getDimension(R.styleable.RefreshView_border_width, 8F);
  mMaxSweepAngle = array.getInt(R.styleable.RefreshView_max_sweep_angle, 90);
  if (mMaxSweepAngle <= 0 || mMaxSweepAngle > 120) {
   // 對于不規(guī)范值直接采用默認(rèn)值
   mMaxSweepAngle = 90;
  }
  mAutoStart = array.getBoolean(R.styleable.RefreshView_auto_start, true);

  array.recycle();
 }

 private void init() {

  mPaint = new Paint();
  mPaint.setAntiAlias(true);
  mPaint.setStyle(Paint.Style.STROKE);
  mPaint.setStrokeWidth(mStrokeWidth);
  mPaint.setStrokeCap(Paint.Cap.ROUND);

  // 最小角度為1度，是為了顯示小圓點(diǎn)
  sweepAngle = -1;
  startAngle = -90;
  curStartAngle = startAngle;

  // 擴(kuò)展動畫
  mValueAnimator = ValueAnimator.ofFloat(0, 1).setDuration(mDuration);
  mValueAnimator.setRepeatMode(ValueAnimator.REVERSE);
  mValueAnimator.setRepeatCount(ValueAnimator.INFINITE);
  mValueAnimator.addUpdateListener(animation -> {
   float fraction = animation.getAnimatedFraction();
   float value = (float) animation.getAnimatedValue();

   if (mReverse)
    fraction = 1 - fraction;

   startAngle = curStartAngle + fraction * 120;
   sweepAngle = -1 - mMaxSweepAngle * value;
   postInvalidate();
  });
  mValueAnimator.addListener(new AnimatorListenerAdapter() {
   @Override
   public void onAnimationRepeat(Animator animation) {
    curStartAngle = startAngle;
    mReverse = !mReverse;
   }
  });

 }

 @Override
 protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
  super.onMeasure(widthMeasureSpec, heightMeasureSpec);
  int widthMode = MeasureSpec.getMode(widthMeasureSpec);
  int heightMode = MeasureSpec.getMode(heightMeasureSpec);

  int width = MeasureSpec.getSize(widthMeasureSpec);
  int height = MeasureSpec.getSize(heightMeasureSpec);

  // 對于wrap_content ，設(shè)置其為20dp。默認(rèn)情況下wrap_content和match_parent是一樣的效果
  if (widthMode == MeasureSpec.AT_MOST) {
   width = (int) (TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 20, getContext().getResources().getDisplayMetrics()) + 0.5F);
  }
  if (heightMode == MeasureSpec.AT_MOST) {
   height = (int) (TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 20, getContext().getResources().getDisplayMetrics()) + 0.5F);
  }
  setMeasuredDimension(width, height);
 }

 @Override
 protected void onDraw(Canvas canvas) {
  super.onDraw(canvas);

  int width = getMeasuredWidth();
  int height = getMeasuredHeight();

  int side = Math.min(width - getPaddingStart() - getPaddingEnd(), height - getPaddingTop() - getPaddingBottom()) - (int) (mStrokeWidth + 0.5F);

  // 確定動畫位置
  float left = (width - side) / 2F;
  float top = (height - side) / 2F;
  float right = left + side;
  float bottom = top + side;

  // 繪制圓弧
  mPaint.setColor(mTopColor);
  canvas.drawArc(left, top, right, bottom, startAngle, sweepAngle, false, mPaint);
  mPaint.setColor(mLeftColor);
  canvas.drawArc(left, top, right, bottom, startAngle - 120, sweepAngle, false, mPaint);
  mPaint.setColor(mRightColor);
  canvas.drawArc(left, top, right, bottom, startAngle + 120, sweepAngle, false, mPaint);
 }


 @Override
 protected void onDetachedFromWindow() {
  if (mAutoStart && mValueAnimator.isRunning()) {
   mValueAnimator.cancel();
  }
  super.onDetachedFromWindow();
 }

 @Override
 protected void onAttachedToWindow() {
  if (mAutoStart && !mValueAnimator.isRunning()) {
   mValueAnimator.start();
  }
  super.onAttachedToWindow();
 }

 /**
  * 開始動畫
  */
 public void start() {
  if (!mValueAnimator.isStarted()) {
   mValueAnimator.start();
  }
 }

 /**
  * 暫停動畫
  */
 public void pause() {
  if (mValueAnimator.isRunning()) {
   mValueAnimator.pause();
  }
 }

 /**
  * 繼續(xù)動畫
  */
 public void resume() {
  if (mValueAnimator.isPaused()) {
   mValueAnimator.resume();
  }
 }

 /**
  * 停止動畫
  */
 public void stop() {
  if (mValueAnimator.isStarted()) {
   mReverse = false;
   mValueAnimator.end();
  }
 }

}

看完上述內(nèi)容，你們掌握Android中怎么實(shí)現(xiàn)一個圓弧刷新動畫的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！