gradle 引用
implementation 'com.maxcion:multwaveviewlib:1.0.0'
- 第一种效果是多重水波纹的效果, 三层水波纹,每层水播放可以设置不同的颜色、波高与波宽
- 第二种效果是 单层水波纹,并且支持从底部慢慢上涨的效果。 这里也可以设置为多层水波纹上涨效果,颜色、波高、波宽以及背景图都是可以定制
- 第三种效果就是模仿京东语音评价动画,最底部的seekbar 是用来模拟语音输出的声音大小,声音越大波高越大,并且每条水波纹的粗细以及速度都不同
第一种和第二种效果的背景图是这样的, 如果设置了背景图,那么整个控件的大小就是背景图大小与xml中设置的大小无关
List<Wave> waves = new ArrayList<>();
Wave wave1 = new Wave(0, 150, 1, Color.parseColor("#00FFFF"), 3);
Wave wave2 = new Wave(1f / 8, 150, 1, Color.parseColor("#6600FFFF"), 3);
Wave wave3 = new Wave(1f / 4, 150, 1, Color.parseColor("#4400FFFF"), 3);
waves.add(wave1);
waves.add(wave2);
waves.add(wave3);
waveView.start(WaveArg.build()
.setWaveList(waves)
.setAutoRise(false)
.setIsStroke(false)
.setTransformBitmap(BitmapFactory.decodeResource(getResources(), R.drawable.batman_logo))
设置完水波纹数据后,就可以开始动画了
waveView.start(WaveArg.build()
.setWaveList(waves)//设置水波纹数据
.setAutoRise(false)//设置水波纹是否自动上升
.setIsStroke(false)//设置水波纹是实心的还是线条模式
.setTransformBitmap(BitmapFactory.decodeResource(getResources(), R.drawable.batman_logo))
//设置背景图
);
List<Wave> waves = new ArrayList<>();
Wave wave1 = new Wave(0, 150, 1, Color.parseColor("#00FFFF"), 3);
waves.add(wave1);
waveView2.start(WaveArg.build()
.setWaveList(waves)
.setAutoRise(true)//设置自动上涨
.setIsStroke(false)
.setTransformBitmap(BitmapFactory.decodeResource(getResources(), R.drawable.batman_logo))
);
List<Wave> waves = new ArrayList<>();
Wave wave1 = new Wave(0, 150, 1, Color.parseColor("#000000"), 3);
Wave wave2 = new Wave(0, 150, 3, Color.parseColor("#000000"), 3);
Wave wave3 = new Wave(0, 150, 2, Color.parseColor("#000000"), 3);
waves.add(wave1);
waves.add(wave2);
waves.add(wave3);
waveView3.start(WaveArg.build()
.setWaveList(waves)
.setAutoRise(false)
.setIsStroke(true)
);
这样写我们的三条粗细、速度都不同的水波纹动画就出来了,接下来就是根据声音大小来调整波高,通过 waveView.setWaveHeightMultiple(mult), 因为语音一直输入,声音大小也是一直变化的,科大讯飞的语音转写SDK中就有声音大小的回调,然后将回调出来的声音大小通过setWaveHeightMultiple,就可以实现波高动态改变了