public class CircleCountDownView extends View {
 private CountDownListener countDownListener;

 private int width;
 private int height;
 private int padding;
 private int borderWidth;
 // 根據(jù)動(dòng)畫執(zhí)行進(jìn)度計(jì)算出來(lái)的插值，用來(lái)控制動(dòng)畫效果，建議取值范圍為0到1
 private float currentAnimationInterpolation;
 private boolean showProgress;
 private float totalTimeProgress;
 private int processColorStart;
 private int processColorEnd;
 private int processBlurMaskRadius;

 private int initialCountDownValue;
 private int currentCountDownValue;

 private Paint circleBorderPaint;
 private Paint circleProcessPaint;
 private RectF circleProgressRectF;

 private Paint circleImgPaint;
 private Matrix circleImgMatrix;
 private Bitmap circleImgBitmap;
 private int circleImgRadius;
 private AnimationInterpolator animationInterpolator;
 private BitmapShader circleImgBitmapShader;
 private float circleImgTranslationX;
 private float circleImgTranslationY;
 private Paint valueTextPaint;

 private ValueAnimator countDownAnimator;

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

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

 public CircleCountDownView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
 super(context, attrs, defStyleAttr);
 setLayerType(View.LAYER_TYPE_SOFTWARE, null);
 init(attrs);
 }

 private void init(AttributeSet attrs) {
 circleImgPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
 circleImgPaint.setStyle(Paint.Style.FILL);
 circleImgMatrix = new Matrix();
 valueTextPaint = new Paint(Paint.ANTI_ALIAS_FLAG);

 TypedArray typedArray = getContext().obtainStyledAttributes(attrs, R.styleable.CircleCountDownView);
 // 控制外層進(jìn)度條的邊距
 padding = typedArray.getDimensionPixelSize(R.styleable.CircleCountDownView_padding, DisplayUtil.dp2px(5));
 // 進(jìn)度條邊線寬度
 borderWidth = typedArray.getDimensionPixelSize(R.styleable.CircleCountDownView_circleBorderWidth, 0);
 if (borderWidth > 0) {
  circleBorderPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
  circleBorderPaint.setStyle(Paint.Style.STROKE);
  circleBorderPaint.setStrokeWidth(borderWidth);
  circleBorderPaint.setColor(typedArray.getColor(R.styleable.CircleCountDownView_circleBorderColor, Color.WHITE));

  showProgress = typedArray.getBoolean(R.styleable.CircleCountDownView_showProgress, false);
  if (showProgress) {
  circleProcessPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
  circleProcessPaint.setStyle(Paint.Style.STROKE);
  circleProcessPaint.setStrokeWidth(borderWidth);
  // 進(jìn)度條漸變色值
  processColorStart = typedArray.getColor(R.styleable.CircleCountDownView_processColorStart, Color.parseColor("#00ffff"));
  processColorEnd = typedArray.getColor(R.styleable.CircleCountDownView_processColorEnd, Color.parseColor("#35adc6"));
  // 進(jìn)度條高斯模糊半徑
  processBlurMaskRadius = typedArray.getDimensionPixelSize(R.styleable.CircleCountDownView_processBlurMaskRadius, DisplayUtil.dp2px(5));
  }
 }


 int circleImgSrc = typedArray.getResourceId(R.styleable.CircleCountDownView_circleImgSrc, R.mipmap.ic_radar);
 // 圖片剪裁成正方形
 circleImgBitmap = ImageUtil.cropSquareBitmap(BitmapFactory.decodeResource(getResources(), circleImgSrc));

 valueTextPaint.setColor(typedArray.getColor(R.styleable.CircleCountDownView_valueTextColor, Color.WHITE));
 valueTextPaint.setTextSize(typedArray.getDimensionPixelSize(R.styleable.CircleCountDownView_valueTextSize, DisplayUtil.dp2px(13)));

 typedArray.recycle();

 // 初始化屬性動(dòng)畫，周期為1秒
 countDownAnimator = ValueAnimator.ofFloat(0, 1).setDuration(1000);
 countDownAnimator.setInterpolator(new LinearInterpolator());
 countDownAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
  @Override
  public void onAnimationUpdate(ValueAnimator animation) {
  if (countDownListener != null) {
   // 監(jiān)聽剩余時(shí)間
   long restTime = (long) ((currentCountDownValue - animation.getAnimatedFraction()) * 1000);
   countDownListener.restTime(restTime);
  }
  // 整體倒計(jì)時(shí)進(jìn)度
  totalTimeProgress = (initialCountDownValue - currentCountDownValue + animation.getAnimatedFraction()) / initialCountDownValue;
  if (animationInterpolator != null) {
   currentAnimationInterpolation = animationInterpolator.getInterpolation(animation.getAnimatedFraction());
  } else {
   currentAnimationInterpolation = animation.getAnimatedFraction();
   currentAnimationInterpolation *= currentAnimationInterpolation;
  }
  invalidate();
  }
 });
 countDownAnimator.addListener(new AnimatorListenerAdapter() {
  @Override
  public void onAnimationRepeat(Animator animation) {
  currentCountDownValue--;
  }

  @Override
  public void onAnimationEnd(Animator animation) {
  if (countDownListener != null) {
   countDownListener.onCountDownFinish();
  }
  }
 });
 }

 // 設(shè)置倒計(jì)時(shí)初始時(shí)間
 public void setStartCountValue(int initialCountDownValue) {
 this.initialCountDownValue = initialCountDownValue;
 this.currentCountDownValue = initialCountDownValue;
 // 設(shè)置重復(fù)執(zhí)行次數(shù)，共執(zhí)行initialCountDownValue次，恰好為倒計(jì)時(shí)總數(shù)
 countDownAnimator.setRepeatCount(currentCountDownValue - 1);
 invalidate();
 }

 public void setAnimationInterpolator(AnimationInterpolator animationInterpolator) {
 if (!countDownAnimator.isRunning()) {
  this.animationInterpolator = animationInterpolator;
 }
 }

 // 重置
 public void reset() {
 countDownAnimator.cancel();
 lastAnimationInterpolation = 0;
 totalTimeProgress = 0;
 currentAnimationInterpolation = 0;
 currentCountDownValue = initialCountDownValue;
 circleImgMatrix.setTranslate(circleImgTranslationX, circleImgTranslationY);
 circleImgMatrix.postRotate(0, width / 2, height / 2);
 invalidate();
 }

 public void restart() {
 reset();
 startCountDown();
 }

 public void pause() {
 countDownAnimator.pause();
 }

 public void setCountDownListener(CountDownListener countDownListener) {
 this.countDownListener = countDownListener;
 }

 // 啟動(dòng)倒計(jì)時(shí)
 public void startCountDown() {
 if (countDownAnimator.isPaused()) {
  countDownAnimator.resume();
  return;
 }
 if (currentCountDownValue > 0) {
  countDownAnimator.start();
 } else if (countDownListener != null) {
  countDownListener.onCountDownFinish();
 }
 }

 @Override
 protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
 super.onMeasure(widthMeasureSpec, heightMeasureSpec);
 width = getMeasuredWidth();
 height = getMeasuredHeight();
 if (width > 0 && height > 0) {
  doCalculate();
 }
 }

 private void doCalculate() {
 circleImgMatrix.reset();
 // 圓形圖片繪制區(qū)域半徑
 circleImgRadius = (Math.min(width, height) - 2 * borderWidth - 2 * padding) / 2;
 float actualCircleImgBitmapWH = circleImgBitmap.getWidth();
 float circleDrawingScale = circleImgRadius * 2 / actualCircleImgBitmapWH;
 // bitmap縮放處理
 Matrix matrix = new Matrix();
 matrix.setScale(circleDrawingScale, circleDrawingScale, actualCircleImgBitmapWH / 2, actualCircleImgBitmapWH / 2);
 circleImgBitmap = Bitmap.createBitmap(circleImgBitmap, 0, 0, circleImgBitmap.getWidth(), circleImgBitmap.getHeight(), matrix, true);
 // 繪制圓形圖片使用
 circleImgBitmapShader = new BitmapShader(circleImgBitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
 // 平移至中心
 circleImgTranslationX = (width - circleImgRadius * 2) / 2;
 circleImgTranslationY = (height - circleImgRadius * 2) / 2;
 circleImgMatrix.setTranslate(circleImgTranslationX, circleImgTranslationY);

 if (borderWidth > 0) {
  // 外層進(jìn)度條寬度（注意：需要減掉畫筆寬度）
  float circleProgressWH = Math.min(width, height) - borderWidth - 2 * padding;
  float left = (width > height ? (width - height) / 2 : 0) + borderWidth / 2 + padding;
  float top = (height > width ? (height - width) / 2 : 0) + borderWidth / 2 + padding;
  float right = left + circleProgressWH;
  float bottom = top + circleProgressWH;
  circleProgressRectF = new RectF(left, top, right, bottom);
  if (showProgress) {
  // 進(jìn)度條漸變及邊緣高斯模糊處理
  circleProcessPaint.setShader(new LinearGradient(left, top, left + circleImgRadius * 2, top + circleImgRadius * 2, processColorStart, processColorEnd, Shader.TileMode.MIRROR));
  circleProcessPaint.setMaskFilter(new BlurMaskFilter(processBlurMaskRadius, BlurMaskFilter.Blur.SOLID)); // 設(shè)置進(jìn)度條陰影效果
  }
 }
 }

 private float lastAnimationInterpolation;

 @Override
 protected void onDraw(Canvas canvas) {
 if (width == 0 || height == 0) {
  return;
 }
 int centerX = width / 2;
 int centerY = height / 2;
 if (borderWidth > 0) { 
  // 繪制外層圓環(huán)
  canvas.drawCircle(centerX, centerY, Math.min(width, height) / 2 - borderWidth / 2 - padding, circleBorderPaint);
  if (showProgress) {
  // 繪制整體進(jìn)度
  canvas.drawArc(circleProgressRectF, 0, 360 * totalTimeProgress, false, circleProcessPaint);
  }

 }
 // 設(shè)置圖片旋轉(zhuǎn)角度增量
 circleImgMatrix.postRotate((currentAnimationInterpolation - lastAnimationInterpolation) * 360, centerX, centerY);
 circleImgBitmapShader.setLocalMatrix(circleImgMatrix);
 circleImgPaint.setShader(circleImgBitmapShader);
 canvas.drawCircle(centerX, centerY, circleImgRadius, circleImgPaint);
 lastAnimationInterpolation = currentAnimationInterpolation;

 // 繪制倒計(jì)時(shí)時(shí)間
 // current
 String currentTimePoint = currentCountDownValue + "s";
 float textWidth = valueTextPaint.measureText(currentTimePoint);
 float x = centerX - textWidth / 2;
 Paint.FontMetrics fontMetrics = valueTextPaint.getFontMetrics();
 // 文字繪制基準(zhǔn)線(圓形區(qū)域正中央)
 float verticalBaseline = (height - fontMetrics.bottom - fontMetrics.top) / 2;
 // 隨動(dòng)畫執(zhí)行進(jìn)度而更新的y軸位置
 float y = verticalBaseline - currentAnimationInterpolation * (Math.min(width, height) / 2);
 valueTextPaint.setAlpha((int) (255 - currentAnimationInterpolation * 255));
 canvas.drawText(currentTimePoint, x, y, valueTextPaint);

 // next
 String nextTimePoint = (currentCountDownValue - 1) + "s";
 textWidth = valueTextPaint.measureText(nextTimePoint);
 x = centerX - textWidth / 2;
 y = y + (Math.min(width, height)) / 2;
 valueTextPaint.setAlpha((int) (currentAnimationInterpolation * 255));
 canvas.drawText(nextTimePoint, x, y, valueTextPaint);
 }

 public interface CountDownListener {
 /**
  * 倒計(jì)時(shí)結(jié)束
  */
 void onCountDownFinish();

 /**
  * 倒計(jì)時(shí)剩余時(shí)間
  *
  * @param restTime 剩余時(shí)間，單位毫秒
  */
 void restTime(long restTime);
 }

 public interface AnimationInterpolator {
 /**
  * @param inputFraction 動(dòng)畫執(zhí)行時(shí)間因子，取值范圍0到1
  */
 float getInterpolation(float inputFraction);
 }
}

<declare-styleable name="CircleCountDownView">
 <!--控件中間圖片資源-->
 <attr name="circleImgSrc" format="reference" />
 <attr name="circleBorderColor" format="color" />
 <attr name="circleBorderWidth" format="dimension" />
 <attr name="valueTextSize" format="dimension" />
 <attr name="valueTextColor" format="color" />
 <attr name="padding" format="dimension" />
 <attr name="showProgress" format="boolean" />
 <attr name="processColorStart" format="color" />
 <attr name="processColorEnd" format="color" />
 <attr name="processBlurMaskRadius" format="dimension" />
 </declare-styleable>