Android Imitation Archie loading animation instance _android

This article introduces the Android imitation Archie loading animation example, the specific code is as follows:

Effect Chart:

The knowledge points to use:

1. Path
2. Valueanimator

If the path and valueanimator are not yet familiar with the recommendation to see some of the great God's Blog custom view currently speak the most suitable for my article, custom view detailed tutorials and practice, this is also a tutorial and practice, thank them for their pay! (I hope you can read it carefully, you can get a lot of inspiration).

Disassemble animation

1. A circle is drawn clockwise and slowly (the circle is not a closed circle).
2. This step is a combination of animation, the circle slowly disappear, while the triangle clockwise rotation
   

The main difficulty here is the calculation of the coordinates, then I will say in detail:

1. Here we take the center of the circle as the starting point for the x,y axis, the downward direction is the x-axis forward, and the right direction is the y-axis forward. If you set the view size is equal width, this time you can set the radius of the circle to a wide or high half, if not the equal width of the width or height of the minimum value of half, as the radius of the circle.
2. Next is the triangle, is also the difficulty of determining the coordinates, this triangle is a equilateral, we hope that the triangle rotation is also around the center of rotation. So the distance between the vertices of the center to the triangle is equal, and what I set here is that the edges of the triangle is the radius of the circle.

Believe that this picture is taken out, combined with sine, cosine function, P1,P2,P3 coordinates also came out.

p1.x =-(int) ((RADIUS/2 * Math.tan (math.pi/180)));
P1.y =-RADIUS/2;
p2.x = p1.x;
P2.y = RADIUS/2;
p3.x = (int) (RADIUS/2/Math.sin (math.pi/180));
P3.Y = 0;

Define some properties

 private static final String Default_color = "#00ba9b"; private static final int default_  SIZE = 50; Default size private static final int draw_circle = 10001; Status markers draw circles and triangles perform a circle animation private static final int rotate_triangle = 10002;
The status Mark performs the rotation triangle and reclaims the circular animation private context mcontext;  Private Paint Trianglepaint;  The brush of the triangle is private Paint circlepaint; Circular brush Private float paintstrokewidth = 1; Sets the width of the circle private long duration = 800; Execution time private int mwidth;
View of the wide-high private int mheight; Private Path Trianglepath;  The path of the triangle private path circlepath; Rounded path private path DST; Path private point P1, p2, p3, computed by pathmeasure; Three points of the triangle private valueanimator animator;  Property animation is mainly to get 0-1 of the value to perform animation private float manimatorvalue = 0;  Store the value of the acquired 0-1 private int mcurrentstate = 0; Current state private int radius = 0; The radius of the circle private float startsegment; The length of the circle begins to draw private pathmeasure mmeasure;
Measure path Private int trianglecolor =-1;
private int circlecolor =-1; 

Set path

1. Because the triangle is always there, first draw the triangle, with the path to draw, we already know the triangle of the coordinates of the three vertices, it becomes easy to draw a triangle.

Trianglepath = new Path ();
P1 = new Point ();
P2 = new Point ();
P3 = new Point ();
Trianglepath.moveto (p1.x, p1.y);
Trianglepath.lineto (p2.x, p2.y);
Trianglepath.lineto (p3.x, p3.y);
Trianglepath.close ();

The path of the triangle is set up so that the triangle can be drawn to the canvas as long as the Canvans.drawpath () is invoked.

2. Then is to draw a circle, said before the circle is a gap, we also add the circle to the path inside, the reason is not directly to the canvas above, because we also have to calculate the circumference of the circle, these operations path will help us operate,

Circlepath = new Path ();
RECTF circlerect = new RECTF (-radius,-radius, radius, radius);
Circlepath.addarc (Circlerect, 268, 358); This is from the round of the 268° start painting, draw 258° two degrees empty a gap

Set Property Animation

Because the animation requires a group of 0-1 of data
Here we use the attribute animation to provide our values to achieve animation.

private void Initanimation () {timeinterpolator timeinterpolator = new Acceleratedecelerateinterpolator ();
    Animator = valueanimator.offloat (0, 1). setduration (duration);
    Animator.setinterpolator (Timeinterpolator);
    Animator.setrepeatmode (Valueanimator.restart);
    Animator.setrepeatcount (Valueanimator.infinite); Animator.addupdatelistener (New Valueanimator.animatorupdatelistener () {@Override public void Onanimationupdat E (valueanimator animation) {Manimatorvalue = (float) animation.getanimatedvalue ()//Here we're going to get a value of 0-1 Inva Lidate ();
    Here to Redraw}}); Animator.addlistener (New Animator.animatorlistener () {@Override public void Onanimationstart (animator Animati ON) {} @Override the public void Onanimationend (animator animation) {} @Override Publ IC void Onanimationcancel (animator animation) {} @Override public void Onanimationrepeat (animator Anim 
      ation) { State transitions are performed and different animation switch (mcurrentstate) {Case draw_circle:mcurrentstate = Rotate_triang
            LE;
          Break
            Case rotate_triangle:mcurrentstate = draw_circle;
          Break
        Default:break;
  }
      }
    });

 }

OnDraw

Analysis OnDraw method

protected void OnDraw (Canvas Canvas) {Super.ondraw (Canvas);
    Move the origin point to the center position canvas.translate (MWIDTH/2, MHEIGHT/2);
    Reset path DST Dst.reset (); To determine the current status switch (mcurrentstate) {//This is the first state we're talking about. Draw_circle://This line is the starting position for the path (DST) that needs to be intercepted, and we carefully
        Watching the animation can be seen, the beginning of the circle from a position to//at both ends of the painting, this position is about 1/5 of the circle, when the beginning of the circle is drawn from the beginning of the circle to draw, I put the execution of this animation//time roughly set to 0-1 of the 0.3 position. Startsegment = (float) (Mmeasure.getlength ()/5 * (0.3-manimatorvalue) > 0?
        (0.3-manimatorvalue): 0);
        Nothing here is to draw a triangular trianglepaint.setstyle (Paint.Style.FILL_AND_STROKE);
        Canvas.drawpath (Trianglepath, trianglepaint); The method is to get the fragments you want to intercept, the first parameter is the starting position, the second parameter is the end position, the third parameter//number is the path after the Intercept, add to Path (DST), note that the addition is not replaced so the front to reset, the fourth parameter is, yes/no
        Moving the starting point to the beginning of the current path keeps the path in DST unchanged (for example, if you have path in DST before, here//Set FALSE, this will guarantee the continuity of the DST and move the start of the path after DST to the end of the previous path, thereby maintaining continuity.
 Mmeasure.getsegment (Startsegment, Mmeasure.getlength () * Manimatorvalue, DST, true);       Canvas.drawpath (DST, circlepaint);
         Break
        The second animation case Rotate_triangle://Save the canvas, because to perform two animations, save the original state of the canvas Canvas.save ();
        Then the triangle rotation trianglepaint.setstyle (Paint.Style.FILL_AND_STROKE) is executed first;
        Canvas.rotate (360 * manimatorvalue);
        Canvas.drawpath (Trianglepath, trianglepaint);
        Restore Canvas canvas.restore (); Then the outside circle disappears, disappears in fact and draw round the truth is the same, here we have a group of 0-1 of the change of value, we only need//to intercept the fragment when the beginning of the constant to the total length of the close, there will be vanishing effect mmeasure.getsegment (mmeas
        Ure.getlength () * Manimatorvalue, Mmeasure.getlength (), DST, true);
        Canvas.drawpath (DST, circlepaint);
      Break
    Default:break;

 }

  }

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.