带动画的圆环进度条

package com.xuan.democoor; import android.animation.Animator; import android.animation.AnimatorSet; import android.animation.ValueAnimator; import android.content.Context; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Paint; import android.graphics.RectF; import android.support.annotation.Nullable; import android.util.AttributeSet; import android.view.MotionEvent; import android.view.View; import android.view.animation.BounceInterpolator; /** * @author: xuan * @Date: 2017-9-10 00:43:51 * @Description: xuan */ public class FlexProgressView extends View { private int mWidth; private int mHeight; private Paint mStrokePaint; private Paint mProPaint; private Paint cPaint; private float startAngle = 90;//圆弧起始角度 private float sweepAngle = 90;//圆弧所占度数 private float progress; private int max; private float mStrokeWidth; private float mProgressWidth; private Paint mTextPaint; private float mTextSize; private OnClickListener mListener; private int mVisibility; public FlexProgressView(Context context) { this(context, null); } public FlexProgressView(Context context, AttributeSet attrs) { this(context, attrs, 0); } public FlexProgressView(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); init(); } @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { mWidth = MeasureSpec.getSize(widthMeasureSpec); // mHeight = MeasureSpec.getSize(heightMeasureSpec); mHeight = mWidth; setMeasuredDimension(mWidth, mWidth); } @Override protected void onSizeChanged(int w, int h, int oldw, int oldh) { super.onSizeChanged(w, h, oldw, oldh); start(); // Log.e("xuan", "onSizeChanged: " ); } private void init() { max = 100; mStrokeWidth = 10; mProgressWidth = 30; mTextSize = 30 ; // 边框 mStrokePaint = new Paint(); mStrokePaint.setColor(Color.RED); mStrokePaint.setStyle(Paint.Style.STROKE); mStrokePaint.setAntiAlias(true); mStrokePaint.setStrokeWidth(mStrokeWidth); // 进度条 mProPaint = new Paint(); mProPaint.setColor(Color.BLUE); mProPaint.setStyle(Paint.Style.STROKE); mProPaint.setAntiAlias(true); mProPaint.setStrokeWidth(mProgressWidth); // 两边的小球 cPaint = new Paint(); cPaint.setColor(Color.BLUE); cPaint.setStyle(Paint.Style.FILL); cPaint.setAntiAlias(true); // 写文字 mTextPaint = new Paint(); mTextPaint.setColor(Color.BLUE); mTextPaint.setStyle(Paint.Style.STROKE); mTextPaint.setAntiAlias(true); mTextPaint.setTextSize(mTextSize); // 给一个默认的进度值 setProgress(30); } public void setProgress(float progress) { if (progress < 0) { progress = 0; } else if (progress > max) { progress = max; } this.progress = progress; startAngle = 270 - (float) (this.progress / max * 180.0); sweepAngle = (270 - startAngle) * 2; postInvalidate(); } /** * 设置边框颜色 * @param color */ public void setStrokeColor(int color) { mStrokePaint.setColor(color); invalidate(); } /** * 设置进度条颜色 * @param color */ public void setProgressColor(int color) { mProPaint.setColor(color); invalidate(); } /** * 设置边框宽度 * @param width */ public void setStrokeWidth(float width) { mStrokeWidth = width; mStrokePaint.setStrokeWidth(width); invalidate(); } /** * 设置进度条的宽度 * @param progressWidth */ public void setProgressWidth(float progressWidth) { mProgressWidth = progressWidth; mProPaint.setStrokeWidth(mProgressWidth); invalidate(); } /** * 设置 文字大小 * @param textSize */ public void setTextSize(int textSize) { mTextSize = textSize; mTextPaint.setTextSize(mTextSize); invalidate(); } /** * 设置 文字颜色 */ public void setTextColor(int textColor) { mTextPaint.setColor(textColor); invalidate(); } /** * 设置文字是否可见 * @param visibility View.VISIBLE 可见 */ public void setTextVisibility(int visibility){ if (mVisibility != visibility){ mVisibility = visibility; invalidate(); } } @Override protected void onDraw(Canvas canvas) { // 如果进度条细一些的话、就应该显示在边框的中间，反之边框应该显示在进度条的中间 float stWidth = mProgressWidth > mStrokeWidth ? mProgressWidth : mStrokeWidth; RectF oval = new RectF(); //RectF对象 oval.left = stWidth / 2; //左边 oval.top = stWidth / 2; //上边 oval.right = mWidth - (stWidth / 2); //右边 oval.bottom = mHeight - (stWidth / 2); //下边 // 画边框 canvas.drawOval(oval, mStrokePaint); // 画进度 canvas.drawArc(oval, startAngle, sweepAngle, false, mProPaint); // 画左边的小球 float radius = (mWidth / 2) - (stWidth / 2); float centerX = mWidth / 2; float centerY = mHeight / 2; double aa = startAngle * Math.PI / 180; float x1 = (float) (centerX + (radius) * Math.cos(aa)); float y1 = (float) (centerY + (radius) * Math.sin(aa)); canvas.drawCircle(x1, y1, mProgressWidth / 2, cPaint); // 画右边的小球 float f = (270 - startAngle + 270); if (f >= 360) f = f - 360; aa = f * Math.PI / 180; x1 = (float) (centerX + (radius) * Math.cos(aa)); y1 = (float) (centerY + (radius) * Math.sin(aa)); canvas.drawCircle(x1, y1, mProgressWidth / 2, cPaint); // 画文字 if (mVisibility == View.VISIBLE){ // 对外暴露控制方法，是否显示 Paint.FontMetricsInt fontMetrics = mTextPaint.getFontMetricsInt(); int baseline = (int) ((oval.bottom + oval.top - fontMetrics.bottom - fontMetrics.top) / 2); mTextPaint.setTextAlign(Paint.Align.CENTER); int pro = (int) progress; canvas.drawText(pro+"", oval.centerX(), baseline, mTextPaint); } } private void start(){ ValueAnimator anim = ValueAnimator.ofFloat(0 , progress); int duration = (int) (progress / 100 * 2000 + 1000); anim.setDuration( 1500); anim.setInterpolator(new BounceInterpolator()); // 弹簧 // anim.setInterpolator(new OvershootInterpolator()); // 向前 向后 然后在回来 // anim.start(); anim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() { @Override public void onAnimationUpdate(ValueAnimator valueAnimator) { float ff = (float) valueAnimator.getAnimatedValue(); setProgress(ff); } }); AnimatorSet mAnimatorSet = new AnimatorSet(); mAnimatorSet.play(anim); mAnimatorSet.addListener(new Animator.AnimatorListener() { @Override public void onAnimationStart(Animator animator) { isRunAnim = true; } @Override public v