android带动画的圆形进度条 各种差值器的含义

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

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

先看效果图：

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

代码：

[java]  view plain  copy

1. package com.zkbc.finance.widget;  
2.   
3. import android.animation.AnimatorSet;  
4. import android.animation.ObjectAnimator;  
5. import android.content.Context;  
6. import android.content.res.TypedArray;  
7. import android.graphics.Canvas;  
8. import android.graphics.Color;  
9. import android.graphics.Paint;  
10. import android.graphics.RectF;  
11. import android.util.AttributeSet;  
12. import android.view.View;  
13. import android.view.animation.AccelerateDecelerateInterpolator;  
14.   
15. import com.zkbc.finance.R;  
16.   
17.   
18. /** 
19.  * 自定义进度 
20.  * 
21.  * @author Rock Lee 
22.  * @date 2016年4月18日 
23.  */  
24. public class MyProgessLine extends View {  
25.   
26.     //需要执行动画的参数名  
27.     private static final String PROGRESS_PROPERTY = "progress";  
28.   
29.     private Paint paint;// 画笔  
30.   
31.     RectF rectF;  
32.   
33.     private int bmColor;// 底部横线颜色  
34.     private float bmHight;// 底部横线高度  
35.     private int color;// 进度条颜色  
36.     private float hight;// 进度条高度  
37.   
38.     protected float progress;  
39.   
40.     public void setColor(int color) {  
41.         this.color = color;  
42.     }  
43.   
44.     public MyProgessLine(Context context) {  
45.         this(context, null);  
46.     }  
47.   
48.     public MyProgessLine(Context context, AttributeSet attrs) {  
49.         this(context, attrs, 0);  
50.     }  
51.   
52.     public MyProgessLine(Context context, AttributeSet attrs, int defStyleAttr) {  
53.         super(context, attrs);  
54.         paint = new Paint();  
55.         rectF = new RectF();  
56.   
57.         TypedArray mTypedArray = context.getTheme().obtainStyledAttributes(  
58.                 attrs, R.styleable.MyProgressLine, defStyleAttr, 0);  
59.   
60.         bmColor = mTypedArray.getColor(R.styleable.MyProgressLine_myProgressLine_bmColor,  
61.                 Color.GRAY);  
62.         bmHight = mTypedArray  
63.                 .getDimension(R.styleable.MyProgressLine_myProgressLine_bmHight, 2);  
64.         color = mTypedArray.getColor(R.styleable.MyProgressLine_myProgressLine_color,  
65.                 Color.BLUE);  
66.         hight = mTypedArray.getDimension(R.styleable.MyProgressLine_myProgressLine_hight, 2);  
67.   
68.     }  
69.   
70.     @Override  
71.     protected void onDraw(Canvas canvas) {  
72.   
73.         paint.setColor(bmColor);  
74.         paint.setStrokeCap(Paint.Cap.SQUARE);// 圆角  
75.         // paint.setStyle(Paint.Style.FILL); // 设置实心  
76.         paint.setStrokeWidth(bmHight); // 设置笔画的宽度  
77.         paint.setAntiAlias(true); // 消除锯齿  
78.   
79.         rectF.set(0, 0, getWidth(), bmHight);  
80.         //canvas.drawRoundRect(rectF, bmHight / 2, bmHight / 2, paint);  
81.         canvas.drawRect(0, 0, getWidth(), bmHight, paint);  
82.   
83.         paint.setColor(color);  
84.         paint.setStrokeWidth(hight); // 设置笔画的宽度  
85.   
86.         rectF.set(0, 0, progress, bmHight);  
87.         //矩形  
88. //      canvas.drawRoundRect(rectF, hight / 2, hight / 2, paint);  
89.         canvas.drawRect(0, 0, progress, bmHight, paint);  
90.   
91.     }  
92.   
93.     public float getProgress() {  
94.         return progress;  
95.     }  
96.   
97.     public void setProgress(float progress) {  
98.         this.progress = progress * getWidth() / 100;  
99.         invalidate();  
100.     }  
101.   
102.     /** 
103.      * 赋值+执行动画 
104.      * 
105.      * @param progressText 进度 float 
106.      */  
107.     public void dodo(float progressText) {  
108.         AnimatorSet animation = new AnimatorSet();  
109.   
110.         ObjectAnimator progressAnimation = ObjectAnimator.ofFloat(this, PROGRESS_PROPERTY,  
111.                 0f, progressText);  
112.         progressAnimation.setDuration(1000);//动画耗时  
113.         progressAnimation.setInterpolator(new AccelerateDecelerateInterpolator());  
114.   
115.         animation.playTogether(progressAnimation);  
116.         animation.start();  
117.     }  
118.   
119. }  

圆形进度View：

[java]  view plain  copy

 

1. package com.sefford.circularprogressdrawable.sample;  
2.   
3. import android.animation.AnimatorSet;  
4. import android.animation.ObjectAnimator;  
5. import android.content.Context;  
6. import android.content.res.TypedArray;  
7. import android.graphics.Canvas;  
8. import android.graphics.Color;  
9. import android.graphics.Paint;  
10. import android.graphics.RectF;  
11. import android.graphics.Typeface;  
12. import android.util.AttributeSet;  
13. import android.view.View;  
14. import android.view.animation.AccelerateDecelerateInterpolator;  
15. import android.widget.Scroller;  
16.   
17. public class MyCircle extends View {  
18.     /** 
19.      * 画笔对象的引用 
20.      */  
21.     private Paint[] paints;  
22.     RectF oval;  
23.     /** 
24.      * 圆环的颜色 
25.      */  
26.     private int roundColor;  
27.     /** 
28.      * 圆环的宽度 
29.      */  
30.     private float roundWidth;  
31.     /** 
32.      * 圆环进度的颜色 
33.      */  
34.     private int roundProgressColor;  
35.   
36.     /** 
37.      * 移动 
38.      */  
39.     Scroller scroller;  
40.   
41.     public MyCircle(Context context) {  
42.         this(context, null);  
43.     }  
44.   
45.     public MyCircle(Context context, AttributeSet attrs) {  
46.         this(context, attrs, 0);  
47.     }  
48.   
49.     public MyCircle(Context context, AttributeSet attrs, int defStyleAttr) {  
50.         super(context, attrs);  
51.         paints = new Paint[4];  
52.         for (int i = 0; i < paints.length; i++) {  
53.             paints[i] = new Paint();  
54.         }  
55.         oval = new RectF();  
56.   
57.         TypedArray mTypedArray = context.getTheme().obtainStyledAttributes(  
58.                 attrs, R.styleable.myRound, defStyleAttr, 0);  
59.   
60.         roundColor = mTypedArray.getColor(R.styleable.myRound_myRoundColor,  
61.                 Color.GRAY);  
62.         roundWidth = mTypedArray.getDimension(R.styleable.myRound_myRoundWidth,  
63.                 3);  
64.         roundProgressColor = mTypedArray.getColor(  
65.                 R.styleable.myRound_myRoundProgressColor, Color.RED);  
66.         mTypedArray.recycle();  
67.   
68. //      AccelerateInterpolator localAccelerateInterpolator = new AccelerateInterpolator();  
69. //      this.scroller = new Scroller(context, localAccelerateInterpolator);  
70.     }  
71.   
72.     @Override  
73.     protected void onDraw(Canvas canvas) {  
74.         // super.onDraw(canvas);  
75.         float centre = getWidth() / 2; // 获取圆心的x坐标  
76.         float radius = (centre - roundWidth / 2); // 圆环的半径  
77.   
78.         paints[0].setColor(roundColor); // 设置圆环的颜色  
79.         paints[0].setStyle(Paint.Style.STROKE); // 设置空心  
80.         paints[0].setStrokeWidth(roundWidth); // 设置圆环的宽度  
81.         paints[0].setAntiAlias(true); // 消除锯齿  
82.         paints[0].setStrokeCap(Paint.Cap.ROUND);// 圆角  
83.   
84.         canvas.drawCircle(centre, centre, radius, paints[0]); // 画出圆环  
85.   
86.         paints[0].setColor(roundProgressColor);  
87.         // 用于定义的圆弧的形状和大小的界限.指定圆弧的外轮廓矩形区域  
88.         // 椭圆的上下左右四个点(View 左上角为0)  
89.         oval.set(centre - radius, centre - radius, centre + radius, centre  
90.                 + radius);  
91.   
92.         //画圆弧  
93.         canvas.drawArc(oval, -90, progress, false, paints[0]);  
94.   
95.         /** 
96.          * 画进度百分比的text 
97.          */  
98.         paints[0].setStrokeWidth(0);  
99.         paints[0].setColor(roundColor);  
100.         paints[0].setTextSize(14);  
101.         paints[0].setTypeface(Typeface.DEFAULT_BOLD); // 设置字体  
102.         float textWidth = paints[0].measureText(progressText + "%");  
103.         canvas.drawText(progressText + "%", centre - textWidth / 2,  
104.                 centre + 14 / 2, paints[0]); // 画出进度百分比  
105.     }  
106.   
107.     public static final String PROGRESS_PROPERTY = "progress";  
108.   
109.     protected float progress;  
110.     protected float progressText;  
111.   
112.     public float getProgress() {  
113.         return progress;  
114.     }  
115.   
116.     public void setProgress(float progress) {  
117.         this.progress = progress * 360 / 100;  
118.         invalidate();// UI thread  
119.         // postInvalidate();//non-UI thread.  
120.     }  
121.   
122.     public void dodo(float progressText, float progress) {  
123.         this.progressText = progressText;  
124.         this.progress = progress;  
125.           
126.         //也可使用3.0的AnimationSet实现  
127. //      AnimationSet set = new AnimationSet(true);  
128. //      set.setRepeatCount(AnimationSet.INFINITE);  
129. //      set.setInterpolator(new AccelerateDecelerateInterpolator());  
130. //      set.start();  
131. //      this.setAnimation(set);  
132.            
133.         //4.0以上，在AnimationSet基础上封装的，遗憾的是没有Repeat  
134.         AnimatorSet animation = new AnimatorSet();  
135.   
136.         ObjectAnimator progressAnimation = ObjectAnimator.ofFloat(this,"progress", 0f, progress);  
137.         progressAnimation.setDuration(700);// 动画执行时间  
138.   
139.         /* 
140.          * AccelerateInterpolator　　　　　                  加速，开始时慢中间加速  
141.          * DecelerateInterpolator　　　 　　                 减速，开始时快然后减速  
142.          * AccelerateDecelerateInterolator　                     先加速后减速，开始结束时慢，中间加速 
143.          * AnticipateInterpolator　　　　　　                 反向 ，先向相反方向改变一段再加速播放 
144.          * AnticipateOvershootInterpolator　                 反向加超越，先向相反方向改变，再加速播放，会超出目的值然后缓慢移动至目的值  
145.          * BounceInterpolator　　　　　　　                        跳跃，快到目的值时值会跳跃，如目的值100，后面的值可能依次为85，77，70，80，90，100 
146.          * CycleIinterpolator　　　　　　　　                   循环，动画循环一定次数，值的改变为一正弦函数：Math.sin(2 * 
147.          * mCycles * Math.PI * input) LinearInterpolator　　　 线性，线性均匀改变 
148.          * OvershottInterpolator　　　　　　                  超越，最后超出目的值然后缓慢改变到目的值 
149.          * TimeInterpolator　　　　　　　　　                        一个接口，允许你自定义interpolator，以上几个都是实现了这个接口 
150.          */  
151.         progressAnimation.setInterpolator(new AccelerateDecelerateInterpolator());  
152.   
153.         animation.playTogether(progressAnimation);//动画同时执行,可以做多个动画  
154.         animation.start();  
155.     }  
156.   
157. }