Android利用屬性動畫自定義倒計時控制元件

Bitmap 安卓開發 · 發表 2018-10-22 14:29:32

摘要：本文介紹一下利用屬性動畫(未使用Timer，通過動畫執行次數控制倒計時)自定義一個圓形倒計時控制元件，比較簡陋，僅做示例使用，如有需要，您可自行修改以滿足您的需求。控制元件中所使用的素材及配色均是筆者隨意選擇，導致效果不佳，先上示例圖片示例圖片示例中進度條底色、漸變色...

本文介紹一下利用屬性動畫(未使用Timer，通過動畫執行次數控制倒計時)自定義一個圓形倒計時控制元件，比較簡陋，僅做示例使用，如有需要，您可自行修改以滿足您的需求。控制元件中所使用的素材及配色均是筆者隨意選擇，導致效果不佳，先上示例圖片

示例圖片

示例中進度條底色、漸變色(僅支援兩個色值)、字型大小、圖片、進度條寬度及是否顯示進度條等可通過xml修改，倒計時時間可通過程式碼設定。如果您感興趣，可修改程式碼設定更豐富的漸變色值及文字變化效果，本文僅僅提供設計思路。

筆者利用屬性動畫多次執行實現倒計時，執行次數即為倒計時初始數值。對上述示例做一下拆解，會發現實現起來還是很容易的，需要處理的主要是以下幾部分

1.繪製外部環形進度條

2.繪製中央旋轉圖片

3.繪製倒計時時間

一.繪製外部環形進度條，分為兩部分：

1. 環形背景 canvas.drawCircle方法繪製

2. 扇形進度 canvas.drawArc方法繪製，弧度通過整體倒計時執行進度控制

二.繪製中央旋轉圖片：

前置描述：外層圓形直徑設為d1；中央旋轉圖片直徑設為d2；進度條寬度設為d3

1. 將設定的圖片進行剪下縮放處理(也可不剪下，筆者有強迫症)，使其寬高等於d1 - 2 * d3，即d2 = d1 - 2 * d3；

2. 利用Matrix將Bitmap平移至中央；

3. 利用Matrix旋轉Bitmap

三.繪製倒計時時間：

通過每次動畫執行進度，控制文字位置

下面上示例程式碼：

public class CircleCountDownView extends View {

private CountDownListener countDownListener;


private int width;

private int height;

private int padding;

private int borderWidth;

// 根據動畫執行進度計算出來的插值，用來控制動畫效果，建議取值範圍為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);

// 控制外層進度條的邊距

padding = typedArray.getDimensionPixelSize(R.styleable.CircleCountDownView_padding, DisplayUtil.dp2px(5));

// 進度條邊線寬度

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);

// 進度條漸變色值

processColorStart = typedArray.getColor(R.styleable.CircleCountDownView_processColorStart, Color.parseColor("#00ffff"));

processColorEnd = typedArray.getColor(R.styleable.CircleCountDownView_processColorEnd, Color.parseColor("#35adc6"));

// 進度條高斯模糊半徑

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();


// 初始化屬性動畫，週期為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) {

// 監聽剩餘時間

long restTime = (long) ((currentCountDownValue - animation.getAnimatedFraction()) * 1000);

countDownListener.restTime(restTime);

}

// 整體倒計時進度

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();

}

}

});

}


// 設定倒計時初始時間

public void setStartCountValue(int initialCountDownValue) {

this.initialCountDownValue = initialCountDownValue;

this.currentCountDownValue = initialCountDownValue;

// 設定重複執行次數，共執行initialCountDownValue次，恰好為倒計時總數

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;

}


//啟動倒計時

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();

// 圓形圖片繪製區域半徑

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) {

// 外層進度條寬度（注意：需要減掉畫筆寬度）

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) {

// 進度條漸變及邊緣高斯模糊處理

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)); // 設定進度條陰影效果

}

}

}


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) {

// 繪製外層圓環

canvas.drawCircle(centerX, centerY, Math.min(width, height) / 2 - borderWidth / 2 - padding, circleBorderPaint);

if (showProgress) {

// 繪製整體進度

canvas.drawArc(circleProgressRectF, 0, 360 * totalTimeProgress, false, circleProcessPaint);

}


}

// 設定圖片旋轉角度增量

circleImgMatrix.postRotate((currentAnimationInterpolation - lastAnimationInterpolation) * 360, centerX, centerY);

circleImgBitmapShader.setLocalMatrix(circleImgMatrix);

circleImgPaint.setShader(circleImgBitmapShader);

canvas.drawCircle(centerX, centerY, circleImgRadius, circleImgPaint);

lastAnimationInterpolation = currentAnimationInterpolation;


// 繪製倒計時時間

// current

String currentTimePoint = currentCountDownValue + "s";

float textWidth = valueTextPaint.measureText(currentTimePoint);

float x = centerX - textWidth / 2;

Paint.FontMetrics fontMetrics = valueTextPaint.getFontMetrics();

// 文字繪製基準線(圓形區域正中央)

float verticalBaseline = (height - fontMetrics.bottom - fontMetrics.top) / 2;

// 隨動畫執行進度而更新的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 {

/**

* 倒計時結束

*/

void onCountDownFinish();


/**

* 倒計時剩餘時間

*

* @param restTime 剩餘時間，單位毫秒

*/

void restTime(long restTime);

}


public interface AnimationInterpolator {

/**

* @param inputFraction 動畫執行時間因子，取值範圍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>

程式碼比較簡單，如有疑問歡迎留言

原文釋出時間為：2018-10-22

本文作者：亂世白衣

本文來自雲棲社群合作伙伴“ ofollow,noindex">安卓巴士Android開發者門戶 ”，瞭解相關資訊可以關注“ 安卓巴士Android開發者門戶 ”。

Android利用屬性動畫自定義倒計時控制元件

一.繪製外部環形進度條，分為兩部分：

二.繪製中央旋轉圖片：

三.繪製倒計時時間：

您可能也會喜歡…