Android 流量球效果的WaveView

本文介绍了如何在Android中实现类似水波纹的流量球效果,包括使用正弦曲线、自定义视图类和动画处理,详细展示了代码实现步骤。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

Android 流量球效果的WaveView
先看效果图:
实现上面效果的思路是使用正弦或者余弦曲线,代码如下:
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
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
packagecom.nero.waveview;
 
importandroid.content.Context;
importandroid.graphics.Canvas;
importandroid.graphics.Color;
importandroid.graphics.Paint;
importandroid.graphics.Path;
importandroid.graphics.RectF;
importandroid.os.Handler;
importandroid.os.Parcel;
importandroid.os.Parcelable;
importandroid.util.AttributeSet;
importandroid.view.View;
importandroid.widget.ProgressBar;
 
/**
* @category View必须是正方形
*
*/
publicclass WaterWaveView extendsView {
 
     privateContext mContext;
 
     privateint mScreenWidth;
     privateint mScreenHeight;
 
     privatePaint mRingPaint;
     privatePaint mCirclePaint;
     privatePaint mWavePaint;
     privatePaint linePaint;
     privatePaint flowPaint;
     privatePaint leftPaint;
 
     privateint mRingSTROKEWidth = 15;
     privateint mCircleSTROKEWidth = 2;
     privateint mLineSTROKEWidth = 1;
 
// 细圆
     privateint mCircleColor = Color.WHITE;
// 文字颜色
privateintmTextColor = Color.WHITE;
// 粗圆
     privateint mRingColor = Color.GREEN;
// 波浪颜色
     privateint mWaveColor = Color.GREEN;
// 背景颜色
   privateint mBackgroundColor = Color.LTGRAY;

 
     privateHandler mHandler;
     privatelong c = 0L;
     privateboolean mStarted = false;
     privatefinal float f = 0.033F;
     privateint mAlpha = 100;// 透明度,可酌情设置,设置太小和背景颜色衬托下,显得波浪效果不好
     privatefloat mAmplitude = 6.0F;// 振幅越大,波浪效果越明显,但是10%的时候,显得效果不好,建议不要超过10,可酌情设置
     privatefloat mWateLevel = 0.5F;// 水位线(0~1),初始水位线
     privatePath mPath;
 
     privateString flowNum = "1024M";
     privateString flowLeft = "还剩余";
 
     /**
     * @param context
     */
     publicWaterWaveView(Context context) {
          super(context);
          // TODO Auto-generated constructor stub
          mContext = context;
          init(mContext);
     }
 
     /**
     * @param context
     * @param attrs
     */
     publicWaterWaveView(Context context, AttributeSet attrs) {
          super(context, attrs);
          // TODO Auto-generated constructor stub
          mContext = context;
          init(mContext);
     }
 
     /**
     * @param context
     * @param attrs
     * @param defStyleAttr
     */
     publicWaterWaveView(Context context, AttributeSet attrs, intdefStyleAttr) {
          super(context, attrs, defStyleAttr);
          // TODO Auto-generated constructor stub
          mContext = context;
          init(mContext);
     }

   /**
* 设置水位线,0-1
   *
   */
   public setmWateLevel(float mWateLevel) {
        this.mWateLevel = mWateLevel ;
   }


 /**
* 设置振幅
 *
 */
 public setmAmplitude(float mAmplitude) {
      this.mAmplitude=mAmplitude;
 }

 /**
* 设置中间文字
 *
 */
 public setWaveViewText(String floLeft, String flowNum) 
      this.floLeft=floLeft;
      this.flowNum=flowNum;
 }

 
     privatevoid init(Context context) {
// 粗圆
          mRingPaint = newPaint();
          mRingPaint.setColor(mRingColor);
          mRingPaint.setAlpha(50);
          mRingPaint.setStyle(Paint.Style.STROKE);
          mRingPaint.setAntiAlias(true);
          mRingPaint.setStrokeWidth(mRingSTROKEWidth);
 
// 细圆
          mCirclePaint = newPaint();
          mCirclePaint.setColor(mCircleColor);
          mCirclePaint.setStyle(Paint.Style.STROKE);
          mCirclePaint.setAntiAlias(true);
          mCirclePaint.setStrokeWidth(mCircleSTROKEWidth);
 
// 横线(可不画)
//          linePaint = newPaint();
//          linePaint.setColor(mCircleColor);
//          linePaint.setStyle(Paint.Style.STROKE);
//          linePaint.setAntiAlias(true);
//          linePaint.setStrokeWidth(mLineSTROKEWidth);
 
// 1024M
          flowPaint = newPaint();
          flowPaint.setColor(mCircleColor);
          flowPaint.setStyle(Paint.Style.FILL);
          flowPaint.setAntiAlias(true);
          flowPaint.setTextSize(36);
 
// 还剩余
          leftPaint = newPaint();
          leftPaint.setColor(mCircleColor);
          leftPaint.setStyle(Paint.Style.FILL);
          leftPaint.setAntiAlias(true);
          leftPaint.setTextSize(18);
 
// 波浪
          mWavePaint = newPaint();
          mWavePaint.setStrokeWidth(1.0F);
          mWavePaint.setColor(mWaveColor);
//          mWavePaint.setAlpha(mAlpha); // 酌情设置透明度
          mPath = newPath();
 
          mHandler = newHandler() {
               @Override
               publicvoid handleMessage(android.os.Message msg) {
                    if(msg.what == 0) {
                         invalidate();
                         if(mStarted) {
                              // 不断发消息给自己,使自己不断被重绘
                              mHandler.sendEmptyMessageDelayed(0, 60L);
                         }
                    }
               }
          };
     }
 
     @Override
     protectedvoid onMeasure(intwidthMeasureSpec, intheightMeasureSpec) {
          intwidth = measure(widthMeasureSpec, true);
          intheight = measure(heightMeasureSpec, false);
          if(width < height) {
               setMeasuredDimension(width, width);
          }else{
               setMeasuredDimension(height, height);
          }
 
     }
 
     /**
     * @category 测量
     * @param measureSpec
     * @param isWidth
     * @return
     */
     privateint measure(intmeasureSpec, booleanisWidth) {
          intresult;
          intmode = MeasureSpec.getMode(measureSpec);
          intsize = MeasureSpec.getSize(measureSpec);
          intpadding = isWidth ? getPaddingLeft() + getPaddingRight()
                    : getPaddingTop() + getPaddingBottom();
          if(mode == MeasureSpec.EXACTLY) {
               result = size;
          }else{
               result = isWidth ? getSuggestedMinimumWidth()
                         : getSuggestedMinimumHeight();
               result += padding;
               if(mode == MeasureSpec.AT_MOST) {
                    if(isWidth) {
                         result = Math.max(result, size);
                    }else{
                         result = Math.min(result, size);
                    }
               }
          }
          returnresult;
     }
 
     @Override
     protectedvoid onSizeChanged(intw, inth, intoldw, intoldh) {
          // TODO Auto-generated method stub
          super.onSizeChanged(w, h, oldw, oldh);
          mScreenWidth = w;
          mScreenHeight = h;
     }
 
     @Override
     protectedvoid onDraw(Canvas canvas) {
          // TODO Auto-generated method stub
          super.onDraw(canvas);
          // 得到控件的宽高
          intwidth = getWidth();
          intheight = getHeight();
          setBackgroundColor(mBackgroundColor);
 
// 计算当前水位线与水平中线的距离
float centerOffset = Math.abs(mScreenWidth /2 *mWateLevel -mScreenWidth /4);

// 计算当前水位线与水平中线的角度
float horiAngle= (float)(Math.asin(centerOffset/(mScreenWidth /4) * 180 / Math.PI);

// 扇形的其实角度和扫过角度
float startAngle, sweepAngle;

if(mWateLevel > 0.5F){
  startAngle = 360F - horiAngle;
sweepAngle = 180F + 2 * horiAngle;
}else{
  startAngle = horiAngle;
sweepAngle = 180F - 2 * horiAngle;
}
          
// 中间横线可以不画
//canvas.drawLine(mScreenWidth * 3/8, mScreenHeight * 5/8
//                    mScreenWidth * 5/8, mScreenHeight * 5/8, linePaint);

// 画 1024M
        floatnum = flowPaint.measureText(flowNum);
        canvas.drawText(flowNum, mScreenWidth * 4/ 8- num / 2, mScreenHeight * 4/ 8, flowPaint);

// 画 还剩余
        floatleft = leftPaint.measureText(flowLeft);
        canvas.drawText(flowLeft, mScreenWidth * 4/ 8- left / 2,  mScreenHeight * 3/ 8, leftPaint);
 
        // 如果未开始(未调用startWave方法),绘制一个扇形,水平静止的水位线
        if((!mStarted) || (mScreenWidth == 0) || (mScreenHeight == 0)) {
             RectF oval = newRectF(mScreenWidth / 4, mScreenHeight / 4, mScreenWidth * 3/4, mScreenHeight * 3/4);// 设置个新的长方形,扫描测量
             canvas.drawArc(oval,startAngle,sweepAngle,false, mWavePaint);
             return;
        }

        // 绘制,即水面静止时的高度
        RectF oval = newRectF(mScreenWidth / 4, mScreenHeight/ 4,  mScreenWidth * 3/ 4, mScreenHeight * 3/4);// 设置个新的长方形,扫描测量
        canvas.drawArc(oval,startAngle,sweepAngle,false, mWavePaint);
 
        if(this.c >= 8388607L) {
             this.c = 0L;
        }
        // 每次onDraw时c都会自增
        c = (1L + c);
        float f1 = mScreenHeight * (1.0F - (0.25F + mWateLevel / 2 )) - mAmplitude ;

// 当前水平线长度
float waveWidth = (float)Math.sqrt(mScreenWidth *mScreenWidth /16 - centerOffset * centerOffset );

// 与圆半径的偏移量
float offsetWidth = mScreenWidth * 4 - waveWidth ;

        int top = (int) (f1 + mAmplitude);
        mPath.reset();

// 起始振动X坐标
        int startX ,endX;
if(mWateLevel > 0.5F){
startX = (int)(mScreenWidth / 4 + offsetWidth);
endX= (int)(mScreenWidth / 2 +mScreenWidth / 4 - offsetWidth);
}else{
startX = (int)(mScreenWidth / 4 + offsetWidth - mAmplitude );
endX= (int)(mScreenWidth / 2 +mScreenWidth / 4 - offsetWidth + mAmplitude );
}
        // 波浪效果
        while(startX < endX) {
            intstartY = (int) (f1 - mAmplitude  * Math.sin(Math.PI  * (2.0F * (startX + this.c * width * this.f)) / width));
            canvas.drawLine(startX, startY, startX, top, mWavePaint);
            startX++;
        }
canvas.drawCircle(mScreenWidth / 2, mScreenHeight / 2,mScreenWidth / 4 + mRingSTROKEWidth / 2, mRingPaint);
 
      canvas.drawCircle(mScreenWidth / 2, mScreenHeight / 2, mScreenWidth / 4, mCirclePaint);
          

        canvas.restore();
     }
 
     @Override
     publicParcelable onSaveInstanceState() {
          // Force our ancestor class to save its state
          Parcelable superState = super.onSaveInstanceState();
          SavedState ss = newSavedState(superState);
          ss.progress = (int) c;
          returnss;
     }
 
     @Override
     publicvoid onRestoreInstanceState(Parcelable state) {
          SavedState ss = (SavedState) state;
          super.onRestoreInstanceState(ss.getSuperState());
          c = ss.progress;
     }
 
     @Override
     protectedvoid onAttachedToWindow() {
          super.onAttachedToWindow();
          // 关闭硬件加速,防止异常unsupported operation exception
          this.setLayerType(View.LAYER_TYPE_SOFTWARE,null);
     }
 
     @Override
     protectedvoid onDetachedFromWindow() {
          super.onDetachedFromWindow();
     }
 
     /**
     * @category 开始波动
     */
     publicvoid startWave() {
          if(!mStarted) {
               this.c = 0L;
               mStarted = true;
               this.mHandler.sendEmptyMessage(0);
          }
     }
 
     /**
     * @category 停止波动
     */
     publicvoid stopWave() {
          if(mStarted) {
               this.c = 0L;
               mStarted = false;
               this.mHandler.removeMessages(0);
          }
     }
 
     /**
     * @category 保存状态
     */
     staticclass SavedState extendsBaseSavedState {
          intprogress;
 
          /**
          * Constructor called from {@link ProgressBar#onSaveInstanceState()}
          */
          SavedState(Parcelable superState) {
               super(superState);
          }
 
          /**
          * Constructor called from {@link #CREATOR}
          */
          privateSavedState(Parcel in) {
               super(in);
               progress = in.readInt();
          }
 
          @Override
          publicvoid writeToParcel(Parcel out, intflags) {
               super.writeToParcel(out, flags);
               out.writeInt(progress);
          }
 
          publicstatic final Parcelable.Creator<Savedstate> CREATOR = newParcelable.Creator<Savedstate>() {
               publicSavedState createFromParcel(Parcel in) {
                    returnnew SavedState(in);
               }
 
               publicSavedState[] newArray(intsize) {
                    returnnew SavedState[size];
               }
          };
     }
 
}

java 代码调用:
  waterWaveView.setmWateLevel(progress);
waterWaveView.setmAmplitude(2);
waterWaveView.startWave();
waterWaveView.stopWave();
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值