android属性动画作用范围,Android利用属性动画自定义倒计时控件

原标题：Android利用属性动画自定义倒计时控件

本文介绍一下利用属性动画(未使用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

三.绘制倒计时时间：

通过每次动画执行进度，控制文本位置

下面上示例代码：

publicclassCircleCountDownViewextendsView{

privateCountDownListener countDownListener;

privateintwidth;

privateintheight;

privateintpadding;

privateintborderWidth;

// 根据动画执行进度计算出来的插值，用来控制动画效果，建议取值范围为0到1

privatefloatcurrentAnimationInterpolation;

privatebooleanshowProgress;

privatefloattotalTimeProgress;

privateintprocessColorStart;

privateintprocessColorEnd;

privateintprocessBlurMaskRadius;

privateintinitialCountDownValue;

privateintcurrentCountDownValue;

privatePaint circleBorderPaint;

privatePaint circleProcessPaint;

privateRectF circleProgressRectF;

privatePaint circleImgPaint;

privateMatrix circleImgMatrix;

privateBitmap circleImgBitmap;

privateintcircleImgRadius;

privateAnimationInterpolator animationInterpolator;

privateBitmapShader circleImgBitmapShader;

privatefloatcircleImgTranslationX;

privatefloatcircleImgTranslationY;

privatePaint valueTextPaint;

privateValueAnimator countDownAnimator;

publicCircleCountDownView(Context context){

this(context, null);

}

publicCircleCountDownView(Context context, @Nullable AttributeSet attrs){

this(context, attrs, 0);

}

publicCircleCountDownView(Context context, @Nullable AttributeSet attrs, intdefStyleAttr){

super(context, attrs, defStyleAttr);

setLayerType(View.LAYER_TYPE_SOFTWARE, null);

init(attrs);

}

privatevoidinit(AttributeSet attrs){

circleImgPaint = newPaint(Paint.ANTI_ALIAS_FLAG);

circleImgPaint.setStyle(Paint.Style.FILL);

circleImgMatrix = newMatrix();

valueTextPaint = newPaint(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 = newPaint(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 = newPaint(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));

}

}

intcircleImgSrc = 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( newLinearInterpolator());

countDownAnimator.addUpdateListener( newValueAnimator.AnimatorUpdateListener() {

@Override

publicvoidonAnimationUpdate(ValueAnimator animation){

if(countDownListener != null) {

// 监听剩余时间

longrestTime = ( 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( newAnimatorListenerAdapter() {

@Override

publicvoidonAnimationRepeat(Animator animation){

currentCountDownValue--;

}

@Override

publicvoidonAnimationEnd(Animator animation){

if(countDownListener != null) {

countDownListener.onCountDownFinish();

}

}

});

}

// 设置倒计时初始时间

publicvoidsetStartCountValue(intinitialCountDownValue){

this.initialCountDownValue = initialCountDownValue;

this.currentCountDownValue = initialCountDownValue;

// 设置重复执行次数，共执行initialCountDownValue次，恰好为倒计时总数

countDownAnimator.setRepeatCount(currentCountDownValue - 1);

invalidate();

}

publicvoidsetAnimationInterpolator(AnimationInterpolator animationInterpolator){

if(!countDownAnimator.isRunning()) {

this.animationInterpolator = animationInterpolator;

}

}

// 重置

publicvoidreset(){

countDownAnimator.cancel();

lastAnimationInterpolation = 0;

totalTimeProgress = 0;

currentAnimationInterpolation = 0;

currentCountDownValue = initialCountDownValue;

circleImgMatrix.setTranslate(circleImgTranslationX, circleImgTranslationY);

circleImgMatrix.postRotate( 0, width / 2, height / 2);

invalidate();

}

publicvoidrestart(){

reset();

startCountDown();

}

publicvoidpause(){

countDownAnimator.pause();

}

publicvoidsetCountDownListener(CountDownListener countDownListener){

this.countDownListener = countDownListener;

}

// 启动倒计时

publicvoidstartCountDown(){

if(countDownAnimator.isPaused()) {

countDownAnimator.resume();

return;

}

if(currentCountDownValue > 0) {

countDownAnimator.start();

} elseif(countDownListener != null) {

countDownListener.onCountDownFinish();

}

}

@Override

protectedvoidonMeasure(intwidthMeasureSpec, intheightMeasureSpec){

super.onMeasure(widthMeasureSpec, heightMeasureSpec);

width = getMeasuredWidth();

height = getMeasuredHeight();

if(width > 0&& height > 0) {

doCalculate();

}

}

privatevoiddoCalculate(){

circleImgMatrix.reset();

// 圆形图片绘制区域半径

circleImgRadius = (Math.min(width, height) - 2* borderWidth - 2* padding) / 2;

floatactualCircleImgBitmapWH = circleImgBitmap.getWidth();

floatcircleDrawingScale = circleImgRadius * 2/ actualCircleImgBitmapWH;

// bitmap缩放处理

Matrix matrix = newMatrix();

matrix.setScale(circleDrawingScale, circleDrawingScale, actualCircleImgBitmapWH / 2, actualCircleImgBitmapWH / 2);

circleImgBitmap = Bitmap.createBitmap(circleImgBitmap, 0, 0, circleImgBitmap.getWidth(), circleImgBitmap.getHeight(), matrix, true);

// 绘制圆形图片使用

circleImgBitmapShader = newBitmapShader(circleImgBitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);

// 平移至中心

circleImgTranslationX = (width - circleImgRadius * 2) / 2;

circleImgTranslationY = (height - circleImgRadius * 2) / 2;

circleImgMatrix.setTranslate(circleImgTranslationX, circleImgTranslationY);

if(borderWidth > 0) {

// 外层进度条宽度(注意：需要减掉画笔宽度)

floatcircleProgressWH = Math.min(width, height) - borderWidth - 2* padding;

floatleft = (width > height ? (width - height) / 2: 0) + borderWidth / 2+ padding;

floattop = (height > width ? (height - width) / 2: 0) + borderWidth / 2+ padding;

floatright = left + circleProgressWH;

floatbottom = top + circleProgressWH;

circleProgressRectF = newRectF(left, top, right, bottom);

if(showProgress) {

// 进度条渐变及边缘高斯模糊处理

circleProcessPaint.setShader( newLinearGradient(left, top, left + circleImgRadius * 2, top + circleImgRadius * 2, processColorStart, processColorEnd, Shader.TileMode.MIRROR));

circleProcessPaint.setMaskFilter( newBlurMaskFilter(processBlurMaskRadius, BlurMaskFilter.Blur.SOLID)); // 设置进度条阴影效果

}

}

}

privatefloatlastAnimationInterpolation;

@Override

protectedvoidonDraw(Canvas canvas){

if(width == 0|| height == 0) {

return;

}

intcenterX = width / 2;

intcenterY = 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";

floattextWidth = valueTextPaint.measureText(currentTimePoint);

floatx = centerX - textWidth / 2;

Paint.FontMetrics fontMetrics = valueTextPaint.getFontMetrics();

// 文字绘制基准线(圆形区域正中央)

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

// 随动画执行进度而更新的y轴位置

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

}

publicinterfaceCountDownListener{

/**

* 倒计时结束

*/

voidonCountDownFinish();

/**

* 倒计时剩余时间

*

* @paramrestTime 剩余时间，单位毫秒

*/

voidrestTime(longrestTime);

}

publicinterfaceAnimationInterpolator{

/**

* @paraminputFraction 动画执行时间因子，取值范围0到1

*/

floatgetInterpolation(floatinputFraction);

}

}

自定义属性如下

代码比较简单，如有疑问欢迎留言

完整代码：https://github.com/670832188/TestApp

静态示例图片

责任编辑：