Android to achieve custom gorgeous water ripple effect _android

Let's see the effect first.

Implementation effect

Simulate the effect of water ripple: Click on the screen there is a ring, the radius from small to large, transparency from large to small (0 transparent)

Realize the idea

1. Custom class inherits view.

2. Define the entity class Wave for each ring and initialize the data for the brush that draws the ring.

3. Rewrite the Ontouchevent method, when down, get the coordinate point, as the Circle Center.

4. Send handler information, modify the data, refresh the page.

5. Rewrite the OnDraw method to draw a circle.

1. Custom Class Inheritance View

New WaterWaveView2 class inheritance view

public class WaterWaveView2 extends View {

  //storage ring set
  private arraylist<wave> mlist;

  Interface Refresh
  private Handler Mhandler = new Handler () {
    @Override public
    void Handlemessage (msg) {
      Invalidate ();//Refresh interface, execute OnDraw method
    }
  };

  Public WaterWaveView2 {This
    (context, NULL);
  }

  Public WaterWaveView2 (context, AttributeSet attrs) {
    Super (context, attrs);
    Mlist = new arraylist<wave> ();
  }

2. Define entity class Wave

/** * Created by Hongjay on 2016/8/30. * Package wave data into an object/public class Wave {public Float x;//Center x coordinates public float y;//Center y coordinate public Paint Paint; Draw a circle of brushes public float width; Line width public int radius; The radius of the circle public int rannum;//random number public int[] Randomcolor={color.blue,color.cyan, Color.green,color.magenta,color.

  Red,color.yellow};
    Public Wave (float x, float y) {this.x = x;
    This.y = y;
  InitData ();
    Tialias (TRUE);/open anti-aliasing rannum= (int) (Math.random () *6);//[0,5] Random number Paint.setcolor (randomcolor[rannum);/Set the color of the brush Paint.setstyle (Paint.Style.STROKE),//Stroke paint.setstrokewidth (width),//Set stroke width paint.setalpha (255);//Transparency Settings (0-255)
  , 0 is initialized width=0 for fully transparent radius=0;//; }
}

3. Rewrite the Ontouchevent method
Gets the center of the circle and deletes a ring with a transparency of 0 in the collection, notifying handler of the calling onDraw() method

public boolean ontouchevent (Motionevent event) {
    super.ontouchevent (event);
    Switch (event.getaction ()) {case
      Motionevent.action_down:

        float x = Event.getx ();
        Float y = event.gety ();
        DeleteItem ();
        Wave wave = New Wave (x, y);
        Mlist.add (wave);

        Refresh Interface
        invalidate ();
        break;

      Case Motionevent.action_move:
        float x1 = event.getx ();
        float y1 = event.gety ();
        DeleteItem ();
        Wave wave1 = New Wave (x1, y1);
        Mlist.add (wave1);

        Invalidate ();
        break;
    Handle event return
    true;
  }
  To delete a ring with transparency already 0,
  private void DeleteItem () {for
    (int i = 0; I <mlist.size (); i++) {
      if Mlist.get (i). Pain T.getalpha () ==0) {
        mlist.remove (i);
      }
    }
  }

4. Rewrite the OnDraw () method to loop the circle drawing

protected void OnDraw (Canvas Canvas) {
    super.ondraw (Canvas);

    Prevent the program from running on the draw
    if (mlist.size () > 0) {

      //Loop object in the collection for
      (Wave wave:mlist) {
        canvas.drawcircle ( Wave.x, Wave.y, Wave.radius, wave.paint);
        Wave.radius + 3;
        Manipulate the brush transparency
        int alpha = Wave.paint.getAlpha ();
        if (Alpha <) {
          alpha = 0;
        } else {
          alpha-= 3;
        }

        Set brush width and transparency
        wave.paint.setStrokeWidth (WAVE.RADIUS/8);
        Wave.paint.setAlpha (Alpha);

        Delay Refresh Interface
        mhandler.sendemptymessagedelayed (1);}}
      }
  

Summarize

That's all that Android does with custom ripple effects. Implementation of the effect is good, interested in the small partners quickly hands-on practice, I hope this article for everyone's study and work can help.