Rippleview (ripple button) effect implementation

Android M has been released, but many machines are upgraded to Android L, after upgrading to L we find a lot of button click when there will be a ripple spread out the effect, cool to no friends. But not all versions have this effect, how to do? There is a great God developed a nineoldandroid animation package, we can use the inside of the API to do custom development so that you can use the various versions above.

Portal in this:

http://nineoldandroids.com/

Https://github.com/JakeWharton/NineOldAndroids

I found such a diagram, similar to the following effect, I am just very simple to say how to achieve, if you want to do a little better please own packaging development, only said the key code, Code has reference to the following project.

This diagram and the code of the portal Https://github.com/siriscac/RippleView

public class Rippleview extends Button {private PointF touchPoint = new PointF ();    private int radius = 150;    Private Paint Mpaint;    Private Objectanimator Objectanimator;        Public Rippleview (Context context) {super (context);    Init ();        } public Rippleview (context context, AttributeSet attrs, int defstyle) {Super (context, attrs, Defstyle);    Init ();        } public Rippleview (context context, AttributeSet Attrs) {Super (context, attrs);    Init ();        } private void Init () {mpaint = new Paint ();        Mpaint.setalpha (100);    Mpaint.setcolor (Color.green); } @Override public boolean ontouchevent (Motionevent event) {switch (event.getaction ()) {case Motione Vent.            Action_down:touchpoint.x = Event.getx ();            Touchpoint.y = Event.gety ();            RADIUS = 150;            Setradius (150);        Break  Case motionevent.action_move:touchpoint.x = Event.getx ();          Touchpoint.y = Event.gety ();            Setradius (150);        Break Case MotionEvent.ACTION_UP:objectAnimator = Objectanimator.offloat (This, "radius", (). Setduration (400)            ;            Objectanimator.setinterpolator (New Acceleratedecelerateinterpolator ()); Objectanimator.addlistener (New Animatorlistener () {@Override public void Onanimationstart (A                Nimator arg0) {} @Override public void Onanimationrepeat (Animator arg0) { } @Override public void Onanimationend (Animator arg0) {SETR                Adius (0);            } @Override public void Onanimationcancel (Animator arg0) {}});            Objectanimator.start ();        Break    } return Super.ontouchevent (event); /** gets the given color/public int getColor (int color) based on the given color and alpha values. float aalpha) {int alpha = Math.Round (Color.alpha (Color) * aalpha);        int red = color.red (Color);        int green = Color.green (Color);        int blue = Color.Blue (Color);    Return Color.argb (alpha, red, green, blue); This method is called by/** during the execution of Objectanimator, */public void Setradius (float radius) {System.out.println ("Setradius----        ------"+ radius);        This.radius = (int) radius; if (This.radius > 0) {radialgradient mradialgradient = new Radialgradient (Touchpoint.x, Touchpoint.y, this.            Radius, GetColor (Color.green, 0.1f), Color.green, Shader.TileMode.MIRROR);        Mpaint.setshader (mradialgradient);    } invalidate (); } @Override protected void OnDraw (canvas canvas) {canvas.drawcircle (touchpoint.x, Touchpoint.y, radius, Mpai        NT);    Super.ondraw (canvas); }}

The main idea is this: rewrite OnDraw () and ontouchevent () to draw a circle in OnDraw based on the position of the obtained finger, given the radius and the brush. The coordinates of the center point of the Circle also move as the finger moves. Triggers the animation when the finger is lifted up.

Objectanimator = Objectanimator.offloat (This, "radius", "setduration"); Objectanimator.setinterpolator ( New Acceleratedecelerateinterpolator ()); Objectanimator.start ();

This is the key code for the animation, First we use Objectanimator.offloat this factory method to get a Objectanimator object, and then give the execution time and interpolator, that is, the animation change effect, we do not use the change effect.

After start, the Setredius (Float) method is constantly called in execution, and the value of the latest Redius is constantly passed in, and we need to constantly modify the value of the current Redius and refresh the interface to draw a new circle.

We used the Radialgradient method during the period.

Android.graphics.RadialGradient.RadialGradient (float x, float y, float radius, int color0, int color1, Tilemode tile) Crea Te a shader that draws a radial gradient given the center and radius. Parameters:x the x-coordinate of the center of the RadiusY the y-coordinate of the center of the Radiusradius must be posi tive.  The radius of the circle for this gradientcolor0 the color at the center of the Circle.color1 the color at the edge of the Circle.tile the Shader tiling mode

We can see the information of each parameter. This is basically the case, there is a more interesting is getcolor this method, is based on the given color value and alpha to show the value of the color to be displayed. Some of the static methods of color are more interesting, such as color.red (color)

It says same as (color >>) & 0xFF, and if you look at the source, that's how it's done.

    /**     * Return The red component of a color int. This is the same as saying     * (color >>) & 0xFF */public    static int red (int color) {        return ( Color >>) & 0xFF;    }

If we say we have a color value 0xff00ff00, turn into binary is 11111111000000001111111100000000, Then move right 16 bits is 00000000000000001111111100000000 then need to take with 0xFF, Get 00000000, that is 0x00.

Off the topic, thanks for watching.

Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.

Rippleview (ripple button) effect implementation