实现波浪效果view，可以自定义view，也可以自定义drawable，我个人比较喜欢重写drawable，因此这里是自定义drawable实现效果，费话少说，先看效果。
这里用了两种方式实现波浪效果，一种是通过正弦函数去画路径，一种是通过三阶贝塞尔曲线画出类似正弦曲线的效果
先看看实现波浪效果需要用到的一些参数，看注释大概就能了解
/** * 画布的宽 */ int mwidth; /** * 画布的高 */ int mheight; /** * 初始偏移量 */ float offset = 0; /** * 线的宽度，当linewidth>0时，是画线模式，否则是填充模式 */ float linewidth = 0; /** * 显示的周期数 */ float period = 1; /** * 移动速度，每秒钟移动的周期数 */ float speedperiod = 0.5f; /** * 波浪的振幅，单位px */ float mswing = 20;
再来看看正弦函数的实现方式
我要评论private class wavesin extends wave {
/**
* 初始偏移量
*/
float offradian = 0;
/**
* 每个像素占的弧度
*/
double perradian;
/**
* 每秒移动的弧度数
*/
float speedradian;
@override
public void ondraw(canvas canvas, boolean isbottom) {
float y = mheight;
mpath.reset();
//计算路径点的初始位置
if (linewidth > 0) {
y = (float) (mswing * math.sin(offradian) + mswing);
mpath.moveto(-linewidth, isbottom ? mheight - y - linewidth / 2 : y + linewidth / 2);
} else {
mpath.moveto(0, isbottom ? 0 : mheight);
}
//步长越小越精细，当然越消耗cpu性能，过大则会有锯齿
int step = mwidth / 100 > 20 ? 20 : mwidth / 100;
//通过正弦函数计算路径点，放入mpath中
for (int x = 0; x <= mwidth + step; x += step) {
y = (float) (mswing * math.sin(perradian * x + offradian) + mswing);
mpath.lineto(x, isbottom ? mheight - y - linewidth / 2 : y + linewidth / 2);
}
//填充模式时，画完完整路径
if (linewidth <= 0) {
mpath.lineto(mwidth, isbottom ? mheight - y : y);
mpath.lineto(mwidth, isbottom ? 0 : mheight);
mpath.lineto(0, isbottom ? 0 : mheight);
mpath.close();
}
canvas.drawpath(mpath, mpaint);
}
@override
void init() {
perradian = (float) (2 * math.pi * period / mwidth);
speedradian = (float) (speedperiod * math.pi * 2);
offradian = (float) (offset * 2 * math.pi);
}
@override
public void move(float delta) {
offradian += speedradian * delta;
}
}
首先`init()`方法中，perradian是计算每弧度所占的宽度，speedradian计算每秒移动的弧度，offradian是当前偏移弧度，在`move(float delta)`中可以看到delta是时间变化量，所以
`下一次的偏移量 = 当前偏移量+每秒移动的弧度*时间的变化量`，即`offradian += speedradian * delta;`
再来看看主要的ondraw方法，canvas是画布，isbottom是指波浪是否在整个画布的底部。
下面是通过贝塞尔曲线实现波浪效果
private class wavebezier extends wave {
/**
* 根据贝塞尔曲线公式计算的一个常量值
*/
private static final double max_y = 0.28867513459481287;
/**
* 一个周期的宽度
*/
float periodwidth;
/**
* 每秒钟移动的宽度
*/
float speedwidth;
/**
* 贝塞尔曲线控制点的y轴坐标
*/
float cony;
/**
* 当前偏移量
*/
float currentoffset = 0;
@override
public void ondraw(canvas canvas, boolean isbottom) {
mpath.reset();
// 移动到第一个周期的起始点
mpath.moveto(-currentoffset, 0);
float conx = periodwidth / 2;
int w = (int) -currentoffset;
for (int i = 0; i <= mwidth + currentoffset; i += periodwidth) {
mpath.rcubicto(conx, cony, conx, -cony, periodwidth, 0);//注意，这里用的是相对坐标
w += periodwidth;
}
// 闭合路径
if (linewidth <= 0) {
mpath.rlineto(0, isbottom ? -mheight : mheight);
mpath.rlineto(-w, 0);
mpath.close();
}
// 对y轴整体偏移
mpath.offset(0, (isbottom ? mheight - mswing - linewidth / 2 : mswing + linewidth / 2));
canvas.drawpath(mpath, mpaint);
}
@override
void init() {
periodwidth = mwidth / period;
speedwidth = speedperiod * periodwidth;
currentoffset = offset * periodwidth;
cony = (float) (mswing / max_y);
isreinit = false;
}
@override
public void move(float delta) {
if (periodwidth <= 0) {
isreinit = true;
return;
}
currentoffset += speedwidth * delta;
if (currentoffset < 0) {
currentoffset += periodwidth;
} else {
if (currentoffset > periodwidth) {
currentoffset -= periodwidth;
}
}
}
}
在 `init()`方法中periodwidth为单个周期宽度，speedwidth为每秒移动的宽度，currentoffset为当前偏移量，cony为控制点的y轴坐标。
最后贴上完整代码
1 package cn.sskbskdrin.wave;
2
3 import android.animation.valueanimator;
4 import android.graphics.canvas;
5 import android.graphics.colorfilter;
6 import android.graphics.paint;
7 import android.graphics.path;
8 import android.graphics.pixelformat;
9 import android.graphics.rect;
10 import android.graphics.drawable.animatable;
11 import android.graphics.drawable.drawable;
12 import android.view.animation.linearinterpolator;
13
14 import java.util.arraylist;
15 import java.util.list;
16 import java.util.map;
17 import java.util.weakhashmap;
18
19 /**
20 * created by sskbskdrin on 2018/4/4.
21 *
22 * @author sskbskdrin
23 */
24 public class wavedrawable extends drawable implements animatable {
25
26 private final list<wave> list;
27
28 private int mwidth;
29 private int mheight;
30
31 private boolean animisstart = false;
32
33 private boolean isbottom = false;
34
35 public wavedrawable() {
36 this(1);
37 }
38
39 public wavedrawable(int count) {
40 this(count, false);
41 }
42
43 public wavedrawable(int count, boolean issin) {
44 if (count <= 0) {
45 throw new illegalargumentexception("illegal count: " + count);
46 }
47 list = new arraylist<>(count);
48 for (int i = 0; i < count; i++) {
49 list.add(issin ? new wavesin() : new wavebezier());
50 }
51 }
52
53 public void setbottom(boolean isbottom) {
54 this.isbottom = isbottom;
55 }
56
57 /**
58 * 设置填充的颜色
59 *
60 * @param color
61 */
62 public void setcolor(int color) {
63 for (wave wave : list) {
64 wave.setcolor(color);
65 }
66 }
67
68 /**
69 * 设置填充的颜色
70 *
71 * @param color
72 */
73 public void setcolor(int color, int index) {
74 if (index < list.size()) {
75 list.get(index).setcolor(color);
76 }
77 }
78
79 public void setoffset(float offset) {
80 for (wave wave : list) {
81 wave.offset(offset);
82 }
83 }
84
85 /**
86 * 设置初始相位
87 *
88 * @param offset
89 * @param index
90 */
91 public void setoffset(float offset, int index) {
92 if (index < list.size()) {
93 list.get(index).offset(offset);
94 }
95 }
96
97 /**
98 * 波浪的大小
99 *
100 * @param swing
101 */
102 public void setswing(int swing) {
103 for (wave wave : list) {
104 wave.setswing(swing);
105 }
106 }
107
108 /**
109 * 波浪的大小
110 *
111 * @param swing
112 * @param index
113 */
114 public void setswing(int swing, int index) {
115 checkindex(index);
116 list.get(index).setswing(swing);
117 }
118
119 /**
120 * 设置波浪流动的速度
121 *
122 * @param speed
123 */
124 public void setspeed(float speed) {
125 for (wave wave : list) {
126 wave.setspeed(speed);
127 }
128 }
129
130 /**
131 * 设置波浪流动的速度
132 *
133 * @param speed
134 */
135 public void setspeed(float speed, int index) {
136 checkindex(index);
137 list.get(index).setspeed(speed);
138 }
139
140 /**
141 * 设置波浪周期数
142 *
143 * @param period (0,--)
144 */
145 public void setperiod(float period) {
146 for (wave wave : list) {
147 wave.setperiod(period);
148 }
149 }
150
151 public void setperiod(float period, int index) {
152 checkindex(index);
153 list.get(index).setperiod(period);
154 }
155
156 private void checkindex(int index) {
157 if (index < 0 || index >= list.size()) {
158 throw new illegalargumentexception("illegal index. list size=" + list.size() + " index=" + index);
159 }
160 }
161
162 public void setlinewidth(float width) {
163 for (wave wave : list) {
164 wave.setlinewidth(width);
165 }
166 }
167
168 public void setlinewidth(float width, int index) {
169 if (index >= 0 && index < list.size()) {
170 list.get(index).setlinewidth(width);
171 }
172 }
173
174 @override
175 protected void onboundschange(rect bounds) {
176 mwidth = bounds.width();
177 mheight = bounds.height();
178 for (wave wave : list) {
179 wave.onsizechange(mwidth, mheight);
180 }
181 }
182
183 @override
184 public void draw(canvas canvas) {
185 for (wave wave : list) {
186 if (wave.isreinit) {
187 wave.init();
188 wave.isreinit = false;
189 }
190 wave.ondraw(canvas, isbottom);
191 }
192 }
193
194 @override
195 public int getintrinsicwidth() {
196 return mwidth;
197 }
198
199 @override
200 public int getintrinsicheight() {
201 return mheight;
202 }
203
204 private void move(float delta) {
205 for (wave wave : list) {
206 wave.move(delta);
207 }
208 }
209
210 @override
211 public void setalpha(int alpha) {
212 for (wave wave : list) {
213 wave.mpaint.setalpha(alpha);
214 }
215 }
216
217 @override
218 public void setcolorfilter(colorfilter cf) {
219 for (wave wave : list) {
220 wave.mpaint.setcolorfilter(cf);
221 }
222 }
223
224 @override
225 public int getopacity() {
226 return pixelformat.translucent;
227 }
228
229 @override
230 public boolean setvisible(boolean visible, boolean restart) {
231 if (visible) {
232 if (animisstart) {
233 animatelistener.start(this);
234 }
235 } else {
236 if (animisstart) {
237 animatelistener.start(this);
238 }
239 }
240 return super.setvisible(visible, restart);
241 }
242
243 @override
244 public void start() {
245 animisstart = true;
246 animatelistener.start(this);
247 }
248
249 @override
250 public void stop() {
251 animatelistener.cancel(this);
252 animisstart = false;
253 }
254
255 @override
256 public boolean isrunning() {
257 return animatelistener.isrunning(this);
258 }
259
260 private static class animatelistener implements valueanimator.animatorupdatelistener {
261 private static weakhashmap<wavedrawable, boolean> map = new weakhashmap<>();
262 private static int lasttime = 0;
263 private static valueanimator valueanimator;
264
265 private static void initanimation() {
266 valueanimator = valueanimator.ofint(0, 1000);
267 valueanimator.setduration(1000);
268 valueanimator.setrepeatcount(valueanimator.infinite);
269 valueanimator.setinterpolator(new linearinterpolator());
270 valueanimator.addupdatelistener(new animatelistener());
271 }
272
273 private static void start(wavedrawable drawable) {
274 if (!map.containskey(drawable)) {
275 map.put(drawable, true);
276 }
277 if (valueanimator == null) {
278 initanimation();
279 }
280 if (!valueanimator.isrunning()) {
281 valueanimator.start();
282 }
283 }
284
285 private static void cancel(wavedrawable drawable) {
286 if (map.containskey(drawable)) {
287 map.put(drawable, false);
288 }
289 }
290
291 private static boolean isrunning(wavedrawable drawable) {
292 return map.containskey(drawable) && map.get(drawable);
293 }
294
295 @override
296 public void onanimationupdate(valueanimator animation) {
297 int current = (int) animation.getanimatedvalue();
298 int delta = current - lasttime;
299 if (delta < 0) {
300 delta = current + 1000 - lasttime;
301 }
302 float deltaf = delta / 1000f;
303 lasttime = current;
304 if (map.size() == 0) {
305 animation.cancel();
306 valueanimator = null;
307 return;
308 }
309 for (map.entry<wavedrawable, boolean> wave : map.entryset()) {
310 if (wave != null && wave.getvalue()) {
311 wavedrawable drawable = wave.getkey();
312 drawable.move(deltaf);
313 drawable.invalidateself();
314 }
315 }
316 }
317 }
318
319 private abstract class wave {
320
321 /**
322 * 画布的宽
323 */
324 int mwidth;
325 /**
326 * 画布的高
327 */
328 int mheight;
329 path mpath = new path();
330 paint mpaint = new paint(paint.anti_alias_flag);
331 /**
332 * 初始偏移量
333 */
334 float offset = 0;
335 /**
336 * 线的宽度，当linewidth>0时，是画线模式，否则是填充模式
337 */
338 float linewidth = 0;
339 /**
340 * 显示的周期数
341 */
342 float period = 1;
343 /**
344 * 移动速度，每秒钟移动的周期数
345 */
346 float speedperiod = 0.5f;
347 /**
348 * 波浪的振幅，单位px
349 */
350 float mswing = 20;
351
352 boolean isreinit = true;
353
354 /**
355 * drawable 大小改变
356 *
357 * @param width
358 * @param height
359 */
360 void onsizechange(int width, int height) {
361 mwidth = width;
362 mheight = height;
363 isreinit = true;
364 }
365
366 abstract void ondraw(canvas canvas, boolean isbottom);
367
368 abstract void init();
369
370 /**
371 * 移动的时间变化量
372 *
373 * @param delta
374 */
375 abstract void move(float delta);
376
377 /**
378 * 设置线的宽度
379 *
380 * @param width
381 */
382 void setlinewidth(float width) {
383 linewidth = width;
384 if (linewidth > 0) {
385 mpaint.setstyle(paint.style.stroke);
386 mpaint.setstrokewidth(linewidth);
387 } else {
388 mpaint.setstyle(paint.style.fill_and_stroke);
389 }
390 isreinit = true;
391 }
392
393 void setcolor(int color) {
394 mpaint.setcolor(color);
395 }
396
397 /**
398 * 每秒移动的像素数
399 *
400 * @param speedperiod
401 */
402 void setspeed(float speedperiod) {
403 this.speedperiod = speedperiod;
404 isreinit = true;
405 }
406
407 /**
408 * 振幅大小
409 *
410 * @param swing
411 */
412 void setswing(float swing) {
413 if (swing <= 0) {
414 throw new illegalargumentexception("illegal swing: " + swing);
415 }
416 mswing = swing;
417 isreinit = true;
418 }
419
420 /**
421 * 显示周期数
422 *
423 * @param period
424 */
425 void setperiod(float period) {
426 if (period <= 0) {
427 throw new illegalargumentexception("illegal period: " + period);
428 }
429 this.period = period;
430 isreinit = true;
431 }
432
433 /**
434 * 起始偏移量
435 *
436 * @param offperiod
437 */
438 void offset(float offperiod) {
439 this.offset = offperiod;
440 isreinit = true;
441 }
442 }
443
444 private class wavesin extends wave {
445
446 /**
447 * 初始偏移量
448 */
449 float offradian = 0;
450 /**
451 * 每个像素占的弧度
452 */
453 double perradian;
454 /**
455 * 每秒移动的弧度数
456 */
457 float speedradian;
458
459 @override
460 public void ondraw(canvas canvas, boolean isbottom) {
461 float y = mheight;
462 mpath.reset();
463 //计算路径点的初始位置
464 if (linewidth > 0) {
465 y = (float) (mswing * math.sin(offradian) + mswing);
466 mpath.moveto(-linewidth, isbottom ? mheight - y - linewidth / 2 : y + linewidth / 2);
467 } else {
468 mpath.moveto(0, isbottom ? 0 : mheight);
469 }
470
471 //步长越小越精细，当然越消耗cpu性能，过大则会有锯齿
472 int step = mwidth / 100 > 20 ? 20 : mwidth / 100;
473
474 //通过正弦函数计算路径点，放入mpath中
475 for (int x = 0; x <= mwidth + step; x += step) {
476 y = (float) (mswing * math.sin(perradian * x + offradian) + mswing);
477 mpath.lineto(x, isbottom ? mheight - y - linewidth / 2 : y + linewidth / 2);
478 }
479
480 //填充模式时，画完完整路径
481 if (linewidth <= 0) {
482 mpath.lineto(mwidth, isbottom ? mheight - y : y);
483 mpath.lineto(mwidth, isbottom ? 0 : mheight);
484 mpath.lineto(0, isbottom ? 0 : mheight);
485 mpath.close();
486 }
487
488 canvas.drawpath(mpath, mpaint);
489 }
490
491 @override
492 void init() {
493 perradian = (float) (2 * math.pi * period / mwidth);
494 speedradian = (float) (speedperiod * math.pi * 2);
495 offradian = (float) (offset * 2 * math.pi);
496 }
497
498 @override
499 public void move(float delta) {
500 offradian += speedradian * delta;
501 }
502 }
503
504 private class wavebezier extends wave {
505 /**
506 * 根据贝塞尔曲线公式计算的一个常量值
507 */
508 private static final double max_y = 0.28867513459481287;
509 /**
510 * 一个周期的宽度
511 */
512 float periodwidth;
513 /**
514 * 每秒钟移动的宽度
515 */
516 float speedwidth;
517 /**
518 * 贝塞尔曲线控制点的y轴坐标
519 */
520 float cony;
521 /**
522 * 当前偏移量
523 */
524 float currentoffset = 0;
525
526 @override
527 public void ondraw(canvas canvas, boolean isbottom) {
528 mpath.reset();
529 // 移动到第一个周期的起始点
530 mpath.moveto(-currentoffset, 0);
531 float conx = periodwidth / 2;
532 int w = (int) -currentoffset;
533 for (int i = 0; i <= mwidth + currentoffset; i += periodwidth) {
534 mpath.rcubicto(conx, cony, conx, -cony, periodwidth, 0);//注意，这里用的是相对坐标
535 w += periodwidth;
536 }
537
538 // 闭合路径
539 if (linewidth <= 0) {
540 mpath.rlineto(0, isbottom ? -mheight : mheight);
541 mpath.rlineto(-w, 0);
542 mpath.close();
543 }
544
545 // 对y轴整体偏移
546 mpath.offset(0, (isbottom ? mheight - mswing - linewidth / 2 : mswing + linewidth / 2));
547
548 canvas.drawpath(mpath, mpaint);
549 }
550
551 @override
552 void init() {
553 periodwidth = mwidth / period;
554 speedwidth = speedperiod * periodwidth;
555 currentoffset = offset * periodwidth;
556 cony = (float) (mswing / max_y);
557 isreinit = false;
558 }
559
560 @override
561 public void move(float delta) {
562 if (periodwidth <= 0) {
563 isreinit = true;
564 return;
565 }
566 currentoffset += speedwidth * delta;
567 if (currentoffset < 0) {
568 currentoffset += periodwidth;
569 } else {
570 if (currentoffset > periodwidth) {
571 currentoffset -= periodwidth;
572 }
573 }
574 }
575 }
576 }
如对本文有疑问， 点击进行留言回复！！
IjkPlayer【1】 Demo Android的最简单实现
一起Talk Android吧（第二百六十回：Android中的BottomNavigationView概述）
网友评论