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

最新推荐文章于 2023-04-21 11:57:43 发布

安果移不动

最新推荐文章于 2023-04-21 11:57:43 发布

阅读量703

点赞数

分类专栏： # 动画

独学而无友，则孤陋寡闻。q群582951247

本文链接：https://blog.csdn.net/mp624183768/article/details/71159628

版权

动画专栏收录该内容

50 篇文章 0 订阅

订阅专栏

项目在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" />
 
 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
 
 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

自定义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;
            }
        }
    }
}
 
 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
 
 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264

在Activity中应用：

                   doughnutViewPassenger.removeAllViews();
                   doughnutViewPassenger.addView(new HomeArcView(this, 90));
                   BaseMethod.AnimaText(tvPassengerNum, 90);
                   tvPassengerNum01.setText("");
                   tvPassengerNum02.setText("");
 
 1
2
3
4
5
 
 1
2
3
4
5

AnimaText方法：

   /**
     * 给一个TextView设置一个数字增长动画
     * */
    public static void  AnimaText(RiseNumberTextView tv , int number){
        // 设置数据
        tv.withNumber(number);
        // 设置动画播放时间
        tv.setDuration(1500);
        tv.start();
    }
 
 1
2
3
4
5
6
7
8
9
10
 
 1
2
3
4
5
6
7
8
9
10

数字增长动画，重写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);
}
 
 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
 
 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

/**
 * 自定义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();
    }

}

安果移不动

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
用Canvas画带动画的渐变数字圆环

项目在github上的地址：https://github.com/Hebin320/ArcChartCSDN上的下载地址http://download.csdn.net/detail/hebin320320/9498435先放效果图这是一个自定义view，布局就是一个简单的线性布局而已，通过addview的方式，将自定义view显示出来；
复制链接

扫一扫