Android Imitation Vivo X6 flash-filled animation effect _android

have been looking at the custom view, after one weeks of insistence, basically can write some more practical control effect, today's weather is too hot, just stay at home playing mobile phone, and then the phone is dead, in charge, saw the mobile phone charging animation, feel pretty cool, Then I carefully analyzed the animation content here, I think, this I can write out, so there is this blog. Pure original.

First look at the effect, because the picture of the reason, can only see static.

This is the effect chart. Of course, it looks like it's not good, but with the animation, it's pretty.

Custom control, in fact, do more, the use of more, you will feel the custom view, as in the photo shop inside the painting, we create layers, and then the layer inside to draw their desired effect.

Here is the same, the use of some of the knowledge I said earlier, such as this article:
Android Custom View arc Progress control, the principle of roughly equivalent, combined with this effect, we see that there are four arcs, two circles, there is a similar to the clock scale effect. So knowing that, it's easier to achieve.

First, create a new class named Vivophone, then inherit from view, overload the three constructors, and then go to the topic.

Again, let's take a look at what variables are used

 Define five brushes
 private Paint msmilering, mbigring, Mincrilepaint, Minline, Mtextpaint;
 Control of the high width
 private float mwidth, mheight;
 Rectangular space
 private RECTF MRECTF;
 The beginning angle of the four arcs
 private float startangle = 270, StartAngle2 = 270, StartAngle3 = 270,
  startAngle4 = 270, Sweepangle = ;
 Literal
 private String text = "70%";
 The size of the text
 private float tvsize =;
 The progress of the scale
 private float progress;

Then we start initializing the data.

private void Initview () {
 msmilering = new Paint ();
 Msmilering.setantialias (true);
 Msmilering.setstrokewidth (5);
 Msmilering.setstyle (Style.stroke);
 Msmilering.setcolor (Color.parsecolor ("#12ADFF"));

 mbigring = new Paint ();
 Mbigring.setantialias (true);
 Mbigring.setstrokewidth (a);
 Mbigring.setstyle (Style.stroke);
 Mbigring.setcolor (Color.parsecolor ("#12ADFF"));

 Mincrilepaint = new Paint ();
 Mincrilepaint.setantialias (true);
 Mincrilepaint.setstrokewidth ((float) 0.5);
 Mincrilepaint.setstyle (Style.stroke);
 Mincrilepaint.setcolor (Color.parsecolor ("#eeeeee"));

 Minline = new Paint ();
 Minline.setantialias (true);
 Minline.setstrokewidth (3);
 Minline.setcolor (Color.parsecolor ("#00ff00"));

 Mtextpaint = new Paint ();
 Mtextpaint.setantialias (true);
 Mtextpaint.setstrokewidth (3);
 Mtextpaint.settextsize (tvsize);
 Mtextpaint.setcolor (Color.parsecolor ("#ffffff"));
 }

The main point here is to initialize the brush, including setting size, width, style, color, and so on. This method, in the end, is to be called inside the constructor.

The brush is initialized, and then look at how to assign a value to the variable;

In the same way, we still write assignment operations in the Onsizechange () method. The code is as follows:

 @Override
 protected void onsizechanged (int w, int h, int oldw, int oldh) {
 super.onsizechanged (W, H, OLDW, OLDH); C3/>mwidth = W;
 Mheight = h;

 }

It's very simple to assign values to high heel widths.

Well, finally see how the OnDraw method is written.

 @Override
 protected void OnDraw (Canvas Canvas) {
 super.ondraw (Canvas);
 CanvasOutArc1 (canvas, MRECTF);
 CanvasOutArc2 (canvas, MRECTF);
 CANVASOUTARC3 (canvas, MRECTF);
 CANVASOUTARC4 (canvas, MRECTF);
 Drawcircle (canvas);
 Drawcirclein (canvas);
 Canvasdrawtext (canvas);

 }

Yes, I've got a way to draw every one here, so I can manage and read it better. See a:

 /**
 * Draw the outermost arc *
 * 
 @param canvas *
 *
 private void CanvasOutArc1 (canvas canvas, RECTF MRECTF) {
 MRECTF = new RECTF ((float) (Mwidth * 0.1), (float) (Mwidth * 0.1),
  (float) (mwidth * 0.9), (float) (mwidth * 0.9)); 
   canvas.drawarc (MRECTF, startangle, Sweepangle +, False, msmilering);
 

This is the outermost circle, followed by the second, the third, the fourth, I am all listed.

/**
 * Draws the outer layer of the second
 * 
 * @param canvas
 * @param MRECTF
 /private void CanvasOutArc2 (canvas Canvas, RECTF mrectf) {
 MRECTF = new RECTF ((float) (mwidth * 0.14), (float) (mwidth * 0.14), (
  float) (mwidth * 0 .), (float) (mwidth * 0.85));
 Canvas.drawarc (MRECTF, StartAngle2, Sweepangle +, False, mbigring);
 

The third one:

/**
 * Draw inside the second small
 * 
 * @param canvas
 /private void canvasOutArc3 (canvas canvas, RECTF MRECTF) {
 MRECTF = new RECTF (float) (Mwidth * 0.22), (float) (Mwidth * 0.22),
  (float) (Mwidth * 0.795), (float) (Mwidth * 0.795 ));
 Canvas.drawarc (MRECTF, StartAngle3, Sweepangle, False, msmilering);
 

Fourth one:

 /**
 * Draw inside the second small
 * 
 * @param canvas
 /private void CANVASOUTARC4 (canvas canvas, RECTF MRECTF) {
 MRECTF = new RECTF (float) (Mwidth * 0.255), (float) (Mwidth * 0.255),
  (float) (Mwidth * 0.75), (float) (mwidth * 0.75));
 Canvas.drawarc (MRECTF, StartAngle4, Sweepangle, False, mbigring);
 

And then it's two circles:

The first Circle, which also contains the sawtooth:

Draw incircle and sawtooth
 private void Drawcircle (Canvas Canvas) {
 float radius = (float) (Mheight-(Mheight * 0.3) * 2-(Mwid TH * 0.17));
 float Yuanx = (float) (MHEIGHT/2);
 float Yuany = (float) (MWIDTH/2);

 Canvas.drawcircle (Yuanx, Yuany, radius, mincrilepaint);
 Canvas.save ();

 float nowwidth = (float) (Getmeasuredwidth ());
 float nowheight = Getmeasuredheight ();
 for (int i = 0; i < i++) {
  //Canvas.drawline (NOWWIDTH/2, NOWHEIGHT/2-NOWWIDTH/2,//
  NOWWIDTH/2 , NOWHEIGHT/2-NOWWIDTH/2 +, minline);

  if (I >= progress) {
  Minline.setcolor (Color.parsecolor ("#555555"));
  } else {
  Minline.setcolor ( Color.parsecolor ("#00ff00"));
  }

  Canvas.drawline (NOWWIDTH/2,
   (float) (NOWHEIGHT/2-NOWWIDTH/2 + mwidth/3.7),
   Nowwidth/2, (float) (NOWH EIGHT/2-NOWWIDTH/2
    + mwidth * 0.05 + mwidth/3.7), minline);

  Canvas.rotate (5, GetWidth ()/2, GetHeight ()/2);

 }

 

Second Circle:

Draw innermost circle
 private void Drawcirclein (Canvas Canvas) {
 float radius = (float) (Mheight-(Mheight * 0.3) * 2-(mWi DTH * 0.22));
 float Yuanx = (float) (MHEIGHT/2);
 float Yuany = (float) (MWIDTH/2);

 Canvas.drawcircle (Yuanx, Yuany, radius, mincrilepaint);
 Canvas.save ();

 }

Finally exposed to the outside a method for animation effect:

 public void SetData (int startangle, float d) {
 this.startangle = startangle;
 This.startangle2 = 360-startangle;
 This.startangle3 = startangle;
 This.startangle4 = 360-startangle;
 progress = D/4;
 Postinvalidatedelayed (+);
 }

For the sake of the effect, I let it update the UI at five milliseconds, and here's the whole view, and I'll list all the code here:

Layout file:

<relativelayout xmlns:android= "http://schemas.android.com/apk/res/android"
 xmlns:tools= "http:// Schemas.android.com/tools "
 android:layout_width=" match_parent "
 android:layout_height=" Match_parent "
 android:background= "@drawable/bg"
 tools:context= ". Mainactivity ">

 <com.example.vivoopen.weight.vivoview
 android:id=" @+id/vivo "
 android:layout_ Width= "180dip"
 android:layout_height= "180dip"
 android:layout_centerinparent= "true"/>

</ Relativelayout>

Mainactivity.java:

 public class Mainactivity extends activity {private Vivoview view;

 Private Boolean isrun = true;
 @Override protected void OnCreate (Bundle savedinstancestate) {super.oncreate (savedinstancestate);
 Setcontentview (R.layout.activity_main);

 View = (Vivoview) Findviewbyid (R.id.vivo);
   New Thread (New Runnable () {public void run () {synchronized (view) {while (isrun) {msg;
    for (int i = 0; i < n2 i = i + ten) {msg = new message ();
    Msg.obj = i;
    Systemclock.sleep (100);
    Msg.what = 1;
   Handler.sendmessage (msg);
   msg = new Message ();
   Msg.what = 2;
   Handler.sendmessage (msg);

 }}}). Start ();
 int n2 = 2; Private Handler Handler = new Handler () {public void Handlemessage (android.os.Message msg) {switch (msg.what) {CA
  Se 1:int a = (Integer) msg.obj;
  View.setdata (A, a);
  Break
  Case 2:N2 = 359;
  Break
  Default:break;
 }

 };

}; }

Vivoview.java:

public class Vivoview extends View {//definition five brushes private Paint msmilering, mbigring, Mincrilepaint, Minline, Mtextpaint;
 Control of the high width private float mwidth, mheight;
 Rectangular space private RECTF MRECTF;
 The beginning angle of the four arcs private float startangle = 270, StartAngle2 = 270, StartAngle3 = 270, StartAngle4 = 270, sweepangle = 90;
 Literal private String Text = "70%";
 The size of the text private float tvsize = 80;

 The progress of the scale private float progress;
 Public Vivoview (context, AttributeSet attrs, int defstyle) {Super (context, attrs, Defstyle);

 Initview ();
 Public Vivoview (context, AttributeSet attrs) {Super (context, attrs);
 Initview ();
 Public Vivoview {Super (context);
 Initview ();
 private void Initview () {msmilering = new Paint ();
 Msmilering.setantialias (TRUE);
 Msmilering.setstrokewidth (5);
 Msmilering.setstyle (Style.stroke);

 Msmilering.setcolor (Color.parsecolor ("#12ADFF"));
 mbigring = new Paint ();
 Mbigring.setantialias (TRUE); Mbigring.setstrokewIdth (20);
 Mbigring.setstyle (Style.stroke);

 Mbigring.setcolor (Color.parsecolor ("#12ADFF"));
 Mincrilepaint = new Paint ();
 Mincrilepaint.setantialias (TRUE);
 Mincrilepaint.setstrokewidth ((float) 0.5);
 Mincrilepaint.setstyle (Style.stroke);

 Mincrilepaint.setcolor (Color.parsecolor ("#eeeeee"));
 Minline = new Paint ();
 Minline.setantialias (TRUE);
 Minline.setstrokewidth (3);

 Minline.setcolor (Color.parsecolor ("#00ff00"));
 Mtextpaint = new Paint ();
 Mtextpaint.setantialias (TRUE);
 Mtextpaint.setstrokewidth (3);
 Mtextpaint.settextsize (tvsize);
 Mtextpaint.setcolor (Color.parsecolor ("#ffffff"));
 @Override protected void onsizechanged (int w, int h, int oldw, int oldh) {super.onsizechanged (W, H, OLDW, OLDH);
 Mwidth = W;

 Mheight = h;
 } @Override protected void OnDraw (Canvas Canvas) {Super.ondraw (Canvas);
 CanvasOutArc1 (canvas, MRECTF);
 CanvasOutArc2 (canvas, MRECTF);
 CANVASOUTARC3 (canvas, MRECTF);
 CANVASOUTARC4 (canvas, MRECTF);
 Drawcircle (canvas);
Drawcirclein (canvas); Canvasdrawtext (canvas);
 //Draw Text private void Canvasdrawtext (Canvas Canvas) {Float textsize = mtextpaint.measuretext (text);
 float x = mwidth/2-TEXTSIZE/2;
 Float y = mheight/2 + textsize/5;
 Canvas.drawtext (text, x, y, mtextpaint);  //Draw innermost circle//Draw incircle and sawtooth private void Drawcirclein (Canvas Canvas) {Float radius = (float) (Mheight-(mheight * 0.3)
 * 2-(Mwidth * 0.22));
 float Yuanx = (float) (MHEIGHT/2);

 float Yuany = (float) (MWIDTH/2);
 Canvas.drawcircle (Yuanx, Yuany, radius, mincrilepaint);

 Canvas.save ();  }//Draw incircle and sawtooth private void Drawcircle (Canvas Canvas) {Float radius = (float) (Mheight-(Mheight * 0.3) * 2-(mwidth
 * 0.17));
 float Yuanx = (float) (MHEIGHT/2);

 float Yuany = (float) (MWIDTH/2);
 Canvas.drawcircle (Yuanx, Yuany, radius, mincrilepaint);

 Canvas.save ();
 float nowwidth = (float) (Getmeasuredwidth ());
 float nowheight = Getmeasuredheight (); for (int i = 0; i < i++) {//Canvas.drawline (NOWWIDTH/2, NowheighT/2-NOWWIDTH/2,//NOWWIDTH/2, NOWHEIGHT/2-NOWWIDTH/2 + minline);
  if (I >= progress) {Minline.setcolor (Color.parsecolor ("#555555"));
  else {Minline.setcolor (Color.parsecolor ("#00ff00")); Canvas.drawline (NOWWIDTH/2, (float) (NOWHEIGHT/2-NOWWIDTH/2 + mwidth/3.7), NOWWIDTH/2, (float) (now

  HEIGHT/2-NOWWIDTH/2 + mwidth * 0.05 + mwidth/3.7), minline);

 Canvas.rotate (5, GetWidth ()/2, GetHeight ()/2); }/** * Draw outermost arc * * @param canvas/private void canvasOutArc1 (canvas canvas, RECTF mrectf) {MRECTF = new
 RECTF ((float) (Mwidth * 0.1), (float) (Mwidth * 0.1), (float) (mwidth * 0.9), (float) (mwidth * 0.9));
 Canvas.drawarc (MRECTF, startangle, Sweepangle +, False, msmilering);
 /** * Draws the outer layer's second * * @param canvas * @param mrectf/private void CanvasOutArc2 (canvas canvas, RECTF MRECTF) { MRECTF = new RECTF (float) (mwidth * 0.14), (float) (mwidth * 0.14), (float) (mwidth * 0.85), (float) (Mwidth * 0.85));
 Canvas.drawarc (MRECTF, StartAngle2, Sweepangle +, False, mbigring); /** * Draw inside the second small * * @param canvas * * private void canvasOutArc3 (canvas canvas, RECTF mrectf) {MRECTF = new Rec
 TF ((float) (Mwidth * 0.22), (float) (Mwidth * 0.22), (float) (Mwidth * 0.795), (float) (Mwidth * 0.795));
 Canvas.drawarc (MRECTF, StartAngle3, Sweepangle, False, msmilering); /** * Draw inside the second small * * @param canvas * * private void CANVASOUTARC4 (canvas canvas, RECTF mrectf) {MRECTF = new Rec
 TF ((float) (Mwidth * 0.255), (float) (Mwidth * 0.255), (float) (Mwidth * 0.75), (float) (Mwidth * 0.75));
 Canvas.drawarc (MRECTF, StartAngle4, Sweepangle, False, mbigring);
 } public void SetData (int startangle, float d) {this.startangle = startangle;
 This.startangle2 = 360-startangle;
 This.startangle3 = startangle;
 This.startangle4 = 360-startangle;
 progress = D/4;
 Postinvalidatedelayed (500);

 }

}

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.