Titanic (TextView with ripple effect) source code Analysis

some time ago with lineargradient ( linear gradient) write a color change flashing text control and text progress bar http://blog.csdn.net/huweigoodboy/article/details/43088953 ,

I recently saw an open source control on GitHub, Titanic, to analyze the effects such as:

one, the realization principleyou need to use Bitmapshader to render the image with a picture.
the picture above is a translucent half-white picture, and with the x-coordinate fluctuation, can form a ripple shape. So how do you get the effect on just one image above? set the shader in the X, y direction, respectively: Repeat,clamp. Repeats in the x direction and is filled with the edge color in the y direction.

1, create shader

    private void Createshader () {        if (wave = = null) {            wave = Getresources (). getdrawable (R.drawable.wave)        ;}        int wavew = Wave.getintrinsicwidth ();        int waveh = Wave.getintrinsicheight ();        Bitmap B = Bitmap.createbitmap (Wavew, Waveh, Bitmap.Config.ARGB_8888);        Canvas c = new canvas (b);        C.drawcolor (Getcurrenttextcolor ());        Wave.setbounds (0, 0, wavew, Waveh);        Wave.draw (c);        Shader = new Bitmapshader (b, Shader.TileMode.REPEAT, Shader.TileMode.CLAMP);    Sets the shader's Tilemode        getpaint (). Setshader (shader);        OffsetY = (getheight ()-Waveh)/2;    Calculate offset y   is placed by default in the middle of TextView    }

OffsetY is the position of the middle white line in the figure.
2, drawing

    @Override    protected void OnDraw (canvas canvas) {        //Modify text paint shader according to sinking state        if (SI Nking && Shader! = null) {//First call after            sinking, assign it to our paint            if (getpaint (). Getshader () = = null) {                getpaint (). Setshader (shader);            }            Translate shader accordingly to maskx Masky positions            //Masky are affected by the offset to vertically center the Wave            shadermatrix.settranslate (maskx, Masky + OffsetY);  Pan transform, set the coordinates of the shaded picture, maskx,masky the coordinate transformation value of shader            //assign matrix to invalidate the shader            Shader.setlocalmatrix ( Shadermatrix);        } else {            getpaint (). Setshader (null);        }        Super.ondraw (canvas);    }

3, Property animation

Horizontal animation. Wave.png width//x change in direction, transform range is from 0-wavew objectanimator maskxanimator = objectanimator.o                   Ffloat (TextView, "Maskx", 0, 200);   Maskxanimator.setrepeatcount (Valueanimator.infinite);                The number of transformations is set to not limit maskxanimator.setduration (1000);                Maskxanimator.setstartdelay (0);                int h = textview.getheight (); Vertical animation//Masky = 0 wave vertically centered//repeat mode REVERSE to                Go back and forth//y direction is H/2--H/2, offset, that is, from the bottom of the TextView to the top.                Objectanimator maskyanimator = objectanimator.offloat (TextView, "Masky", H/2,-H/2);                Maskyanimator.setrepeatcount (Valueanimator.infinite);                Maskyanimator.setrepeatmode (Valueanimator.reverse);                Maskyanimator.setduration (10000); Maskyanimator.setstartdelay (0);

Maskx,masky offset coordinates for shader. The maskx transforms from 0 to Wavew to form a ripple effect.in the y direction, from H (textview height)/2 to-H/2 transform, because Tilemode is clamp, it forms the above is transparent, the following is the white effect.

Two, expandhere is a moving ripple effect in the Y direction, so how do you do an X-direction? ideas are as follows:Wave. PNG rotates 90 degrees clockwise. Then the changes in the X, Y direction are reversed. I'm not going to make it here.

Add a full code for a small number of comments

Titanic (TextView with ripple effect) source code Analysis