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

---

项目在github上的地址：

https://github.com/Hebin320/ArcChart

---

CSDN上的下载地址

http://download.csdn.net/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();
    }

}