The first effect

If the picture collapses, please click

Gradle reference

Implementation 'com. Maxcion: multwaveviewlib: 1.0.0'Copy the code

The project address

Github.com/Likeyong/Mu…

  • The first effect is the effect of multiple water waves, three layers of water waves, each layer of water playback can be set to a different color, wave height and wave width
  • The second effect is a single layer of water ripple and supports the effect of rising slowly from the bottom. This can also be set to a multi-layer wave-rise effect. The color, wave height, wave width and background are customizable
  • The third effect is to imitate jingdong voice evaluation animation. Seekbar at the bottom is used to simulate the size of voice output. The bigger the sound, the higher the wave height, and each water ripple has different thickness and speed

The background images for the first and second effects look like this. If the background image is set, the size of the entire control is the background image size independent of the size set in the 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))
Copy the code

The first style has three layers of water ripples, so it generates three Wave objects, as described below

Once the water ripple data is set, you can start animating

Waveview.start (Wavearg.build ().setwavelist (waves)// Set water wave data.setautorise (false)// Set whether the water wave rises automatically SetIsStroke (false) / / set the water ripple is solid or line pattern. The setTransformBitmap (BitmapFactory. DecodeResource (getResources (), R.rawable. Batman_logo)) // Set the background image);Copy the code

The second style: there is only one layer of water ripple but it needs to rise automatically, so only one wave object is generated

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) .setTransformBitmap(BitmapFactory.decodeResource(getResources(), R.drawable.batman_logo)) );Copy the code

The third style is just line mode, and the three water waves are of different thickness and speed. The thickness and speed of the water waves are set using the Wave constructor

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)

        );
Copy the code

Write the thickness, speed of our three different water ripple animation came out, the next step is to adjust according to the volume of sound wave height, through waveView. SetWaveHeightMultiple (mult), because the sound has been input, voice also has been change size, Iflytek voice transfer SDK has the callback of sound size, and then the callback of sound size through setWaveHeightMultiple, you can achieve dynamic change of wave height