android带动画的圆形进度条

偶然发现一个很好的app，圆环进度条，带加速动画，看起来相当不错。尝试着克隆一下。

反编译一看，哇塞，啥3.1415926都干出来了，太高端玩不转啊，算了，想想其它方式吧。

先看效果图：

这个草稿存了小半年.....先发布了再说。实现了预想的效果，具体代码稍后奉上。

代码：

package com.zkbc.finance.widget;

import android.animation.AnimatorSet;
import android.animation.ObjectAnimator;
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.view.View;
import android.view.animation.AccelerateDecelerateInterpolator;

import com.zkbc.finance.R;


/**
 * 自定义进度
 *
 * @author Rock Lee
 * @date 2016年4月18日
 */
public class MyProgessLine extends View {

    //需要执行动画的参数名
    private static final String PROGRESS_PROPERTY = "progress";

    private Paint paint;// 画笔

    RectF rectF;

    private int bmColor;// 底部横线颜色
    private float bmHight;// 底部横线高度
    private int color;// 进度条颜色
    private float hight;// 进度条高度

    protected float progress;

    public void setColor(int color) {
        this.color = color;
    }

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

    public MyProgessLine(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public MyProgessLine(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs);
        paint = new Paint();
        rectF = new RectF();

        TypedArray mTypedArray = context.getTheme().obtainStyledAttributes(
                attrs, R.styleable.MyProgressLine, defStyleAttr, 0);

        bmColor = mTypedArray.getColor(R.styleable.MyProgressLine_myProgressLine_bmColor,
                Color.GRAY);
        bmHight = mTypedArray
                .getDimension(R.styleable.MyProgressLine_myProgressLine_bmHight, 2);
        color = mTypedArray.getColor(R.styleable.MyProgressLine_myProgressLine_color,
                Color.BLUE);
        hight = mTypedArray.getDimension(R.styleable.MyProgressLine_myProgressLine_hight, 2);

    }

    @Override
    protected void onDraw(Canvas canvas) {

        paint.setColor(bmColor);
        paint.setStrokeCap(Paint.Cap.SQUARE);// 圆角
        // paint.setStyle(Paint.Style.FILL); // 设置实心
        paint.setStrokeWidth(bmHight); // 设置笔画的宽度
        paint.setAntiAlias(true); // 消除锯齿

        rectF.set(0, 0, getWidth(), bmHight);
        //canvas.drawRoundRect(rectF, bmHight / 2, bmHight / 2, paint);
        canvas.drawRect(0, 0, getWidth(), bmHight, paint);

        paint.setColor(color);
        paint.setStrokeWidth(hight); // 设置笔画的宽度

        rectF.set(0, 0, progress, bmHight);
        //矩形
//		canvas.drawRoundRect(rectF, hight / 2, hight / 2, paint);
        canvas.drawRect(0, 0, progress, bmHight, paint);

    }

    public float getProgress() {
        return progress;
    }

    public void setProgress(float progress) {
        this.progress = progress * getWidth() / 100;
        invalidate();
    }

    /**
     * 赋值+执行动画
     *
     * @param progressText 进度 float
     */
    public void dodo(float progressText) {
        AnimatorSet animation = new AnimatorSet();

        ObjectAnimator progressAnimation = ObjectAnimator.ofFloat(this, PROGRESS_PROPERTY,
                0f, progressText);
        progressAnimation.setDuration(1000);//动画耗时
        progressAnimation.setInterpolator(new AccelerateDecelerateInterpolator());

        animation.playTogether(progressAnimation);
        animation.start();
    }

}

圆形进度View：

package com.sefford.circularprogressdrawable.sample;

import android.animation.AnimatorSet;
import android.animation.ObjectAnimator;
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.RectF;
import android.graphics.Typeface;
import android.util.AttributeSet;
import android.view.View;
import android.view.animation.AccelerateDecelerateInterpolator;
import android.widget.Scroller;

public class MyCircle extends View {
	/**
	 * 画笔对象的引用
	 */
	private Paint[] paints;
	RectF oval;
	/**
	 * 圆环的颜色
	 */
	private int roundColor;
	/**
	 * 圆环的宽度
	 */
	private float roundWidth;
	/**
	 * 圆环进度的颜色
	 */
	private int roundProgressColor;

	/**
	 * 移动
	 */
	Scroller scroller;

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

	public MyCircle(Context context, AttributeSet attrs) {
		this(context, attrs, 0);
	}

	public MyCircle(Context context, AttributeSet attrs, int defStyleAttr) {
		super(context, attrs);
		paints = new Paint[4];
		for (int i = 0; i < paints.length; i++) {
			paints[i] = new Paint();
		}
		oval = new RectF();

		TypedArray mTypedArray = context.getTheme().obtainStyledAttributes(
				attrs, R.styleable.myRound, defStyleAttr, 0);

		roundColor = mTypedArray.getColor(R.styleable.myRound_myRoundColor,
				Color.GRAY);
		roundWidth = mTypedArray.getDimension(R.styleable.myRound_myRoundWidth,
				3);
		roundProgressColor = mTypedArray.getColor(
				R.styleable.myRound_myRoundProgressColor, Color.RED);
		mTypedArray.recycle();

//		AccelerateInterpolator localAccelerateInterpolator = new AccelerateInterpolator();
//		this.scroller = new Scroller(context, localAccelerateInterpolator);
	}

	@Override
	protected void onDraw(Canvas canvas) {
		// super.onDraw(canvas);
		float centre = getWidth() / 2; // 获取圆心的x坐标
		float radius = (centre - roundWidth / 2); // 圆环的半径

		paints[0].setColor(roundColor); // 设置圆环的颜色
		paints[0].setStyle(Paint.Style.STROKE); // 设置空心
		paints[0].setStrokeWidth(roundWidth); // 设置圆环的宽度
		paints[0].setAntiAlias(true); // 消除锯齿
		paints[0].setStrokeCap(Paint.Cap.ROUND);// 圆角

		canvas.drawCircle(centre, centre, radius, paints[0]); // 画出圆环

		paints[0].setColor(roundProgressColor);
		// 用于定义的圆弧的形状和大小的界限.指定圆弧的外轮廓矩形区域
		// 椭圆的上下左右四个点(View 左上角为0)
		oval.set(centre - radius, centre - radius, centre + radius, centre
				+ radius);

		//画圆弧
		canvas.drawArc(oval, -90, progress, false, paints[0]);

		/**
		 * 画进度百分比的text
		 */
		paints[0].setStrokeWidth(0);
		paints[0].setColor(roundColor);
		paints[0].setTextSize(14);
		paints[0].setTypeface(Typeface.DEFAULT_BOLD); // 设置字体
		float textWidth = paints[0].measureText(progressText + "%");
		canvas.drawText(progressText + "%", centre - textWidth / 2,
				centre + 14 / 2, paints[0]); // 画出进度百分比
	}

	public static final String PROGRESS_PROPERTY = "progress";

	protected float progress;
	protected float progressText;

	public float getProgress() {
		return progress;
	}

	public void setProgress(float progress) {
		this.progress = progress * 360 / 100;
		invalidate();// UI thread
		// postInvalidate();//non-UI thread.
	}

	public void dodo(float progressText, float progress) {
		this.progressText = progressText;
		this.progress = progress;
		
		//也可使用3.0的AnimationSet实现
//		AnimationSet set = new AnimationSet(true);
//		set.setRepeatCount(AnimationSet.INFINITE);
//		set.setInterpolator(new AccelerateDecelerateInterpolator());
//		set.start();
//		this.setAnimation(set);
		 
		//4.0以上，在AnimationSet基础上封装的，遗憾的是没有Repeat
		AnimatorSet animation = new AnimatorSet();

		ObjectAnimator progressAnimation = ObjectAnimator.ofFloat(this,"progress", 0f, progress);
		progressAnimation.setDuration(700);// 动画执行时间

		/*
		 * AccelerateInterpolator　　　　　 					加速，开始时慢中间加速 
		 * DecelerateInterpolator　　　 　　					减速，开始时快然后减速 
		 * AccelerateDecelerateInterolator　 					先加速后减速，开始结束时慢，中间加速
		 * AnticipateInterpolator　　　　　　	 				反向 ，先向相反方向改变一段再加速播放
		 * AnticipateOvershootInterpolator　					反向加超越，先向相反方向改变，再加速播放，会超出目的值然后缓慢移动至目的值 
		 * BounceInterpolator　　　　　　　						跳跃，快到目的值时值会跳跃，如目的值100，后面的值可能依次为85，77，70，80，90，100
		 * CycleIinterpolator　　　　　　　　 					循环，动画循环一定次数，值的改变为一正弦函数：Math.sin(2 *
		 * mCycles * Math.PI * input) LinearInterpolator　　　 线性，线性均匀改变
		 * OvershottInterpolator　　　　　　 					超越，最后超出目的值然后缓慢改变到目的值
		 * TimeInterpolator　　　　　　　　　 						一个接口，允许你自定义interpolator，以上几个都是实现了这个接口
		 */
		progressAnimation.setInterpolator(new AccelerateDecelerateInterpolator());

		animation.playTogether(progressAnimation);//动画同时执行,可以做多个动画
		animation.start();
	}

}

还有属性文件attrs.xml:

<!-- 圆形进度条 -->
<declare-styleable name="myRoundProgress">
    <attr name="myRoundColor" format="color" />
    <attr name="myRoundProgressColor" format="color" />
    <attr name="myRoundWidth" format="dimension" />
    <attr name="myRoundTextSize" format="dimension" />
</declare-styleable>