用Canvas画带动画的渐变数字圆环

---

项目在github上的地址：

https://github.com/Hebin320/ArcChart

---

优快云上的下载地址

http://download.youkuaiyun.com/detail/hebin320320/9498435

---

先放效果图

这是一个自定义view，布局就是一个简单的线性布局而已，通过addview的方式，将自定义view显示出来；
渐变圆以及外圈圆、外圈小圆是自定义view，其他三个文字是Textview；

布局代码：

         <LinearLayout
            android:id="@+id/doughnutView_passenger"
            android:layout_width="@dimen/margin_180"
            android:layout_height="@dimen/margin_180"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="@dimen/margin_20"
            android:orientation="vertical" />

        <com.zerom.fitting.custom.textview.RiseNumberTextView
            android:id="@+id/tv_passenger_num"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="@dimen/margin_50"
            android:textColor="@color/white"
            android:textSize="@dimen/margin_55" />

        <TextView
            android:id="@+id/tv_passenger_num_01"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/tv_passenger_num"
            android:layout_centerHorizontal="true"
            android:textColor="@color/home_passenger"
            android:textSize="@dimen/text_size_16" />

        <TextView
            android:id="@+id/tv_passenger_num_02"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/tv_passenger_num_01"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="@dimen/margin_2"
            android:textColor="@color/home_passenger"
            android:textSize="@dimen/text_size_14" />

自定义view代码：

public class HomeArcView extends View {
    //圆环颜色 
    private int[] doughnutColors = {Color.parseColor("#42e7e0"), Color.parseColor("#91ffa1"), Color.parseColor("#5ef0c9")}; 
    private int roundColor=ContextCompat.getColor(getContext(),R.color.home_passenger);
    private Paint paint_white;
    private static float currentValue = 0f;
    private Paint paint = new Paint();
    private float arc_y = 0f;
    private float arc_y_1 = 0f;
    private int score, mPage;
    private int pointCount = 2;
    private float tb;
    private float doughnutWidth;
    private RectF rectf;

    public HomeArcView(Context context, int score) {
        super(context);
        setValue(score);
    }

    public HomeArcView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public HomeArcView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }


    private void initPaint() {
        paint.reset();
        paint.setAntiAlias(true);
    }

    public void setValue(int score) {
        this.score = score;
        Resources res = getResources();
        tb = res.getDimension(R.dimen.margin_10);
        doughnutWidth = 0.25f * tb;
        //外圈圆
        rectf = new RectF();
        rectf.set(doughnutWidth * 2, doughnutWidth * 2, 17.5f * tb, 17.5f * tb);

        ValueAnimator valueAnimator = ValueAnimator.ofFloat(currentValue, 360f);
        valueAnimator.setInterpolator(new Interpolator() {
            @Override
            public float getInterpolation(float v) {
                return 1 - (1 - v) * (1 - v) * (1 - v);
            }
        });
        valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator valueAnimator) {
                currentValue = (float) valueAnimator.getAnimatedValue();
                invalidate();
            }
        });
        valueAnimator.start();


        //圆圈带颜色
        paint_white = new Paint();
        paint_white.setAntiAlias(true);
        paint_white.setColor(roundColor);
        paint_white.setStrokeWidth(tb * 0.2f);
        paint_white.setTextAlign(Paint.Align.CENTER);
        paint_white.setStyle(Paint.Style.STROKE);

        //外圈圆第一部分动画，0 至 score-1
        this.getViewTreeObserver().addOnPreDrawListener(
                new ViewTreeObserver.OnPreDrawListener() {
                    public boolean onPreDraw() {
                        new thread();
                        getViewTreeObserver().removeOnPreDrawListener(this);
                        return false;
                    }
                });
        //外圈圆第二部分动画，score+1 至 100
        this.getViewTreeObserver().addOnPreDrawListener(
                new ViewTreeObserver.OnPreDrawListener() {
                    public boolean onPreDraw() {
                        new threadone();
                        getViewTreeObserver().removeOnPreDrawListener(this);
                        return false;
                    }
                });
        //外圈小圆动画，0 到 score
        this.getViewTreeObserver().addOnPreDrawListener(
                new ViewTreeObserver.OnPreDrawListener() {
                    public boolean onPreDraw() {
                        new threadtwo();
                        getViewTreeObserver().removeOnPreDrawListener(this);
                        return false;
                    }
                });

    }

    @Override
    protected void onDraw(Canvas canvas) {

        initPaint();
        //渐变色圆
        drawSq(canvas);
        //外圈小圆
        drawPoint(canvas);
        //外圈圆第一部分
        drawOneSq(canvas);
        //外圈圆第二部分
        drawTwoSq(canvas);


    }

    /**
     * 画内圈渐变圆
     */
    private void drawSq(Canvas canvas) {
        RectF rectF = new RectF(doughnutWidth * 6, doughnutWidth * 6, 16.5f * tb, 16.5f * tb);
        paint.setStrokeWidth(doughnutWidth * 2);
        paint.setStyle(Paint.Style.STROKE);
        if (doughnutColors.length > 1) {
            paint.setShader(new SweepGradient(7.5f * tb, 7.5f * tb, doughnutColors, null));
        } else {
            paint.setColor(doughnutColors[0]);
        }
        canvas.drawArc(rectF, 0, currentValue, false, paint);
    }


    /**
     * 画外圆第一部分
     */
    private void drawOneSq(Canvas canvas) {
        canvas.rotate(0, getWidth() / 2, getHeight() / 2);
        canvas.drawArc(rectf, -90, arc_y, false, paint_white);
    }

    class thread implements Runnable {
        private Thread thread;
        private int statek;
        int count;

        public thread() {
            thread = new Thread(this);
            thread.start();
        }

        public void run() {
            while (true) {
                switch (statek) {
                    case 0:
                        try {
                            Thread.sleep(400);
                            statek = 1;
                        } catch (InterruptedException e) {
                        }
                        break;
                    case 1:
                        try {
                            Thread.sleep(15);
                            arc_y += 3.6f;
                            count++;
                            postInvalidate();
                        } catch (InterruptedException e) {
                            e.printStackTrace();
                        }
                        break;
                }
                if (count >= score - 2)
                    break;
            }
        }
    }

    /**
     * 画外圆第二部分
     */
    private void drawTwoSq(Canvas canvas) {
        canvas.rotate((float) ((score + 2) * 3.6), getWidth() / 2, getHeight() / 2);
        canvas.drawArc(rectf, -90, arc_y_1, false, paint_white);
    }

    class threadone implements Runnable {
        private Thread thread;
        private int statek = 1;
        int count = score + 2;

        public threadone() {
            thread = new Thread(this);
            thread.start();
        }

        public void run() {
            while (true) {
                switch (statek) {
                    case 1:
                        try {
                            Thread.sleep(5);
                            arc_y_1 += 3.6f;
                            count++;
                            postInvalidate();
                        } catch (InterruptedException e) {
                            e.printStackTrace();
                        }
                        break;
                }
                if (count >= 100)
                    break;
            }
        }
    }

    /**
     * 画外圆圆点
     */
    private void drawPoint(Canvas canvas) {

        Paint paint_big_text = new Paint();
        paint_big_text.setAntiAlias(true);
        paint_big_text.setColor(Color.WHITE);
        paint_big_text.setTextAlign(Paint.Align.CENTER);
        paint_big_text.setStyle(Paint.Style.FILL);
        initPaint();
        canvas.drawCircle((float) (9.0f * tb + 8.5f * tb * Math.sin(3.6 * pointCount * Math.PI / 180)),
                (float) (9.0f * tb - 8.5f * tb * Math.cos(3.6 * pointCount * Math.PI / 180)), 10, paint_big_text);

    }

    class threadtwo implements Runnable {
        private Thread thread;
        private int statek = 0;

        public threadtwo() {
            thread = new Thread(this);
            thread.start();
        }

        public void run() {
            while (true) {
                switch (statek) {
                    case 0:
                        try {
                            Thread.sleep(400);
                            statek = 1;
                        } catch (InterruptedException e) {
                        }
                        break;
                    case 1:
                        try {
                            Thread.sleep(15);
                            pointCount++;
                            postInvalidate();
                        } catch (InterruptedException e) {
                            e.printStackTrace();
                        }
                        break;
                }
                if (pointCount >= score)
                    break;
            }
        }
    }
}

在Activity中应用：

                   doughnutViewPassenger.removeAllViews();
                   doughnutViewPassenger.addView(new HomeArcView(this, 90));
                   BaseMethod.AnimaText(tvPassengerNum, 90);
                   tvPassengerNum01.setText("");
                   tvPassengerNum02.setText("");

AnimaText方法：

   /**
     * 给一个TextView设置一个数字增长动画
     * */
    public static void  AnimaText(RiseNumberTextView tv , int number){
        // 设置数据
        tv.withNumber(number);
        // 设置动画播放时间
        tv.setDuration(1500);
        tv.start();
    }

数字增长动画，重写Textview：

/**
 * 增长的数字接口
 *
 */
public interface IRiseNumber {
	/**
	 * 开始播放动画的方法
	 */
	public void start();

	/**
	 * 设置小数
	 *
	 * @param number
	 * @return
	 */
	public void withNumber(float number);

	/**
	 * 设置整数
	 *
	 * @param number
	 * @return
	 */
	public void withNumber(int number);

	/**
	 * 设置动画播放时长
	 *
	 * @param duration
	 * @return
	 */
	public void setDuration(long duration);

	/**
	 * 设置动画结束监听器
	 *
	 * @param callback
	 */
	public void setOnEndListener(RiseNumberTextView.EndListener callback);
}

/**
 * 自定义RiseNumberTextView继承TextView，并实现接口RiseNumberBase
 *
 */
public class RiseNumberTextView extends TextView implements IRiseNumber {

	private static final int STOPPED = 0;

	private static final int RUNNING = 1;

	private int mPlayingState = STOPPED;

	private float number;

	private float fromNumber;

	/**
	 * 动画播放时长
	 */
	private long duration = 1500;
	/**
	 * 1.int 2.float
	 */
	private int numberType = 2;

	private DecimalFormat fnum;

	private EndListener mEndListener = null;

	final static int[] sizeTable = { 9, 99, 999, 9999, 99999, 999999, 9999999,
			99999999, 999999999, Integer.MAX_VALUE };

	/**
	 * 构造方法
	 *
	 * @param context
	 */
	public RiseNumberTextView(Context context) {
		super(context);
	}

	/**
	 * 使用xml布局文件默认的被调用的构造方法
	 *
	 * @param context
	 * @param attr
	 */
	public RiseNumberTextView(Context context, AttributeSet attr) {
		super(context, attr);
//		setTextColor(context.getResources().getColor(R.color.red));
//		setTextSize(30);
	}

	public RiseNumberTextView(Context context, AttributeSet attr, int defStyle) {
		super(context, attr, defStyle);
	}

	/**
	 * 判断动画是否正在播放
	 *
	 * @return
	 */
	public boolean isRunning() {
		return (mPlayingState == RUNNING);
	}

	/**
	 * 跑小数动画
	 */
	private void runFloat() {
		ValueAnimator valueAnimator = ValueAnimator.ofFloat(fromNumber, number);
		valueAnimator.setDuration(duration);

		valueAnimator
				.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
					@Override
					public void onAnimationUpdate(ValueAnimator valueAnimator) {

						setText(fnum.format(Float.parseFloat(valueAnimator
								.getAnimatedValue().toString())));
						if (valueAnimator.getAnimatedFraction() >= 1) {
							mPlayingState = STOPPED;
							if (mEndListener != null)
								mEndListener.onEndFinish();
						}
					}


				});

		valueAnimator.start();
	}

	/**
	 * 跑整数动画
	 */
	private void runInt() {

		ValueAnimator valueAnimator = ValueAnimator.ofInt((int) fromNumber,
				(int) number);
		valueAnimator.setDuration(duration);

		valueAnimator
				.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
					@Override
					public void onAnimationUpdate(ValueAnimator valueAnimator) {
						//设置瞬时的数据值到界面上
						setText(valueAnimator.getAnimatedValue().toString());
						if (valueAnimator.getAnimatedFraction() >= 1) {
							//设置状态为停止
							mPlayingState = STOPPED;
							if (mEndListener != null)
								//通知监听器，动画结束事件
								mEndListener.onEndFinish();
						}
					}
				});
		valueAnimator.start();
	}

	static int sizeOfInt(int x) {
		for (int i = 0;; i++){
			if (x <= sizeTable[i])
				return i + 1;
		}
	}

	@Override
	protected void onFinishInflate() {
		super.onFinishInflate();
		fnum = new DecimalFormat("##0.00");
	}

	/**
	 * 开始播放动画
	 */
	@Override
	public void start() {

		if (!isRunning()) {
			mPlayingState = RUNNING;
			if (numberType == 1)
				runInt();
			else
				runFloat();
		}
	}

	/**
	 * 设置一个小数进来
	 */
	@Override
	public void withNumber(float number) {

		this.number = number;
		numberType = 2;
		if (number > 1000) {
			fromNumber = number
					- (float) Math.pow(10, sizeOfInt((int) number) - 1);
		} else {
			fromNumber = number / 2;
		}

	}

	/**
	 * 设置一个整数进来
	 */
	@Override
	public void withNumber(int number) {
		this.number = number;
		numberType = 1;
		if (number > 1000) {
			fromNumber = number
					- (float) Math.pow(10, sizeOfInt((int) number) - 2);
		} else {
			fromNumber = number / 2;
		}

	}

	/**
	 * 设置动画播放时间
	 */
	@Override
	public void setDuration(long duration) {
		this.duration = duration;
	}

	/**
	 * 设置动画结束监听器
	 */
	@Override
	public void setOnEndListener(EndListener callback) {
		mEndListener = callback;
	}

	/**
	 * 定义动画结束接口
	 *
	 *
	 */
	public interface EndListener {
		/**
		 * 当动画播放结束时的回调方法
		 */
		public void onEndFinish();
	}

}