Customizing the view's dynamic lightning

The first two days in the CSDN mobile phone to see seems to have an app with this lightning loading logo, very interested, just now is learning custom view, so I want to realize it, fortunately, it is not difficult ~
：

Because it is the picture of the phone cut, so did not make a dynamic, we understand ha.
Here's the code:
First of all to customize the properties of the view, I first implemented in the form of attributes, if you want to make loading effect, you can do it yourself.

```<resources>    <declare-styleable name="Lightview">        <attr name="Light_color" format="Color"></attr>        <attr name="Bg_color" format="Color"></attr>        <attr name="Speed" format="integer"></attr>        <attr name="lightsize" format="Dimension"> </attr>    </declare-styleable></Resources>

In this I define the Light_color the first lightning of the color, bg_color the second time to draw the color of the lightning, if the subsequent draw, in fact, not the first and next time, because of the need to return to the conversion, speed draw the velocity, lightsize lightning Height
Here's a look at the implementation code:

 Public  class lightview extends View {    Private intMlightcolor, Mbgcolor, mspeed, addspeed =1, Mlightsize;PrivatePaint paint;Private intMwidth, Mheight, measureheight;PrivatePath path;Private BooleanFlag =false;PrivateRECTF rect; Public Lightview(context context, AttributeSet attrs) { This(Context, Attrs,0); } Public Lightview(Context context) { This(Context,NULL); } Public Lightview(context context, AttributeSet attrs,intDEFSTYLEATTR) {Super(Context, attrs, defstyleattr); TypedArray a = Context.obtainstyledattributes (Attrs, R.styleable.lightview, Defstyleattr,0);        Mlightcolor = A.getcolor (R.styleable.lightview_light_color, Color.yellow);        Mbgcolor = A.getcolor (R.styleable.lightview_bg_color, color.red); Mspeed = A.getint (R.styleable.lightview_speed,1); Mlightsize = A.getdimensionpixelsize (R.styleable.lightview_lightsize, (int) Typedvalue.applydimension (Typedvalue.complex_unit_dip, -, Getresources (). Getdisplaymetrics ());        A.recycle (); Paint =NewPaint ();        Paint.setstyle (Paint.Style.FILL); Paint.setantialias (true); Paint.setstrokewidth (1);        Paint.setcolor (Mlightcolor); Rect =NewRECTF ();NewThread (NewRunnable () {@Override             Public void Run() { while(true) {//Height incrementAddspeed + =Ten; Postinvalidate ();Try{Thread.Sleep (mspeed);//Speed of drawing}Catch(Exception e)                    {E.printstacktrace ();    }}}). Start (); }@Override    protected void onmeasure(intWidthmeasurespec,intHEIGHTMEASURESPEC) {intHeightmode = Measurespec.getmode (Heightmeasurespec); Measureheight = Measurespec.getsize (Heightmeasurespec);if(Heightmode = = measurespec.exactly)        {mheight = Math.min (Measureheight, mlightsize); }Else{mheight = mlightsize; } mwidth =2* Mheight/3;//height to determine the width of the view, set width is always the height of two-thirds. I think it's so nice. = =        //Use path to draw lightning shapePath =NewPath (); Path.moveto (Mwidth *2/3,0); Path.lineto (Mwidth/2,4* Mheight/9); Path.lineto (Mwidth *2/3,4* Mheight/9); Path.lineto (Mwidth/3, mheight); Path.lineto (Mwidth/2,5* Mheight/9); Path.lineto (Mwidth/3,5* Mheight/9);        Path.close ();    Setmeasureddimension (Mwidth, mheight); }@Override    protected void OnDraw(Canvas canvas) {rect.top =0; Rect.left =0;        Rect.right = Mwidth;        Rect.bottom = Mheight;        Paint.setcolor (Color.green); Canvas.drawroundrect (rect, mwidth/2, Mheight/2, paint);//By judging the height of the cut canvas, determine if the second drawing is completed, and then change the color of the first drawn lightning        if(Addspeed >= mheight) {addspeed =0;if(!flag) {flag =true; }Else{flag =false; }        }if(!flag)            {Paint.setcolor (Mlightcolor); Canvas.drawpath (path, paint);//Draw complete LightningPaint.setcolor (Mbgcolor); Canvas.cliprect (0,0, Mwidth, addspeed);//By cutting the canvas and redrawing the lightning, it will not have an effect on the drawing already drawnCanvas.drawpath (path, paint); }Else{Paint.setcolor (Mbgcolor);            Canvas.drawpath (path, paint);            Paint.setcolor (Mlightcolor); Canvas.cliprect (0,0, Mwidth, addspeed);        Canvas.drawpath (path, paint); }    }}

In fact, this is primarily the understanding of the underlying path and cliprect.
Find a nice article about Cliprect, pick it up.
Android Clip has the following two-point questions:
Clip (cut) timing
The meaning of the OP parameter in clip.

Usually we understand that clip (clipping) is a clip of an already existing pattern. However, when you clip on the canvas on Android, you want to clip the canvas before drawing, and if you do not clip the canvas after the drawing, it will not affect the already drawn graphics. Be sure to remember that clip is for canvas, not graphics.

Next, the Apidemo clipping example from Android comes up with the meaning of the OP parameter in clip. Android provides APIs for Cliprect, Clippath, and clipregion clipping regions.
OP has a total of Difference,intersect,union,xor, reverse_difference, replace six options.

Example:
Cut the box from (0,0) to (60,60) on the canvas. Blue Area plus purple area.
Cut the box from (40,40) to (100,100) on the canvas. Olive-colored areas with purple areas.
Cut the box from (0,0) to (100,100) on the canvas.

First, add the Op parameter to the second block for example: Canvas.cliprect (+,--), Region.op. difference);
First, you need to figure out which object the OP parameter is for. Then understand what it means.
The OP parameter targets the area that was previously clipped and the area that is currently being clipped.
In this case, the area is a block from (0,0) to (60,60) and a block from (40,40) to (100,100).
What does that mean? Is the relationship between the area that is currently being clipped and the previous cut.

Difference: Cuts the area that is currently being cut (the blue area).
INTERSECT: The area that is currently being clipped is previously cut over the inner part (purple area).
UNION: The area currently being clipped plus the part that was previously clipped (blue area + Purple area + Olive area).
XOR: Different or, the area currently being clipped is different from the previous cut. (blue area + Olive color area).
Reverse_difference: In contrast to difference, the area that is currently being clipped is the reference, and the region that is currently being cut removes the previously cut area (olive color area);
Replace: Replaces the previously clipped area with the area that is currently being clipped. (Olive-colored area + purple area);
No op parameter effect is the same as the Intersect effect, with the intersection of two regions.

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

Customizing the view's dynamic lightning