public class CircleCountDownView extends View { private CountDownListener countDownListener; private int width; private int height; private int padding; private int borderWidth; // 根據(jù)動(dòng)畫(huà)執(zhí)行進(jìn)度計(jì)算出來(lái)的插值，用來(lái)控制動(dòng)畫(huà)效果，建議取值范圍為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)畫(huà)，周期為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)聽(tīng)剩余時(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)度條寬度（注意：需要減掉畫(huà)筆寬度）  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)畫(huà)執(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)畫(huà)執(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>