Android animation Icon---Am not a GIF maker,i am a developer

First found a cool animated icon effect on git:

Https://github.com/xuyisheng/tickplusdrawable

I have to say, foreign programmers in the details of the consideration, it is really much better than us, OK, today we will imitate this:

Now to see our effect, do not spray me, wrote for a couple of hours, a lot of details have not been considered full, the code has not been reconstructed, I hope you can propose amendments to the views, thx~

GIF effect is not necessarily good, you can refer to the GitHub gif.

The code is as follows:

First we need to understand the following principle:

1, we first determine the coordinates of some key points, that is, we want to display all the appearing vertices of the graph

2, the movement of the line effect, we use the property animation to control, unfamiliar friends can see http://blog.csdn.net/eclipsexys/article/details/38401641, through this example, we should have a deeper understanding of the property animation

3. For properties that do not provide a get, set method, we can help this property to add a get, set method by overriding the properties

Knowing the above, we can look at the specific code:

Package Com.example.yishengxu.canvas;import Android.animation.objectanimator;import Android.animation.typeevaluator;import Android.animation.valueanimator;import Android.content.Context;import Android.graphics.canvas;import Android.graphics.color;import Android.graphics.paint;import Android.graphics.pointf;import Android.util.attributeset;import Android.util.property;import Android.view.motionevent;import android.view.view;import java.util.arraylist;import java.util.List;/** * Created by Yisheng.xu on 10/30/14.    */public class Canvasview extends View {private float Mpaddingw;    private float Mpaddingh;    private float mrotation;    Private list<pointf> mallpoints = new arraylist<pointf> ();    Private PointF mPoint0;    Private PointF mPoint1;    Private PointF MPoint2;    Private PointF MPoint3;    Private PointF mPoint4;    Private PointF mPoint5;    Private PointF mPoint6;    Private PointF mPoint7;    Private Paint Mpaint = new paint (Paint.anti_alias_flag); Private int touchflag = 0;    Public Canvasview (Context context) {super (context);    } public Canvasview (context context, AttributeSet Attrs) {Super (context, attrs); } public Canvasview (context context, AttributeSet attrs, int defstyleattr) {Super (context, attrs, defstyleattr)    ;        } @Override protected void onsizechanged (int w, int h, int oldw, int oldh) {mpaddingw = W/4;        Mpaddingh = H/4;        Mallpoints.add (New PointF (Mpaddingw, Mpaddingh));        Mallpoints.add (New PointF (MPADDINGW * 3, Mpaddingh));        Mallpoints.add (New PointF (MPADDINGW, Mpaddingh * 2));        Mallpoints.add (New PointF (MPADDINGW * 3, Mpaddingh * 2));        Mallpoints.add (New PointF (Mpaddingw, Mpaddingh * 3));        Mallpoints.add (New PointF (MPADDINGW * 3, Mpaddingh * 3));        Mallpoints.add (New PointF (MPADDINGW * 2, Mpaddingh));        Mallpoints.add (New PointF (MPADDINGW * 2, Mpaddingh * 3));        Initpoints ();   Mpaint.setcolor (Color.Blue);     Mpaint.setstrokewidth (20);        Mpaint.setstrokecap (Paint.Cap.ROUND);    Super.onsizechanged (W, H, OLDW, OLDH);        } private void Initpoints () {mPoint0 = new PointF (mallpoints.get (0). x, Mallpoints.get (0). Y);        MPoint1 = new PointF (Mallpoints.get (1). x, Mallpoints.get (1). Y);        MPoint2 = new PointF (Mallpoints.get (2). x, Mallpoints.get (2). Y);        MPoint3 = new PointF (Mallpoints.get (3). x, Mallpoints.get (3). Y);        MPoint4 = new PointF (Mallpoints.get (4). x, Mallpoints.get (4). Y);        MPOINT5 = new PointF (Mallpoints.get (5). x, Mallpoints.get (5). Y);        MPOINT6 = new PointF ();    mPoint7 = new PointF ();        } @Override protected void OnDraw (canvas canvas) {super.ondraw (canvas);        Canvas.save ();        Canvas.rotate (Mrotation, Mpaddingw * 2, Mpaddingh * 2);        DrawLine (Canvas, mPoint0, mPoint1);        DrawLine (Canvas, MPoint2, MPOINT3);        DrawLine (Canvas, MPoint4, MPOINT5);  DrawLine (Canvas, MPoint6, mPoint7);      Canvas.restore ();            } private void DrawLine (Canvas canvas,pointf start,pointf end) {if (start.x!=0 && end.x!=0) {        Canvas.drawline (Start.x, Start.y, End.X, End.y, Mpaint); }} @Override public boolean ontouchevent (Motionevent event) {if (Touchflag = = 0) {animpoints            (MPoint0, Mallpoints.get (2));            Animpoints (MPoint4, Mallpoints.get (2));            Animpoints (MPoint1, Mallpoints.get (6));            Animpoints (MPOINT5, Mallpoints.get (7));        Touchflag + = 1;            }else if (Touchflag = = 1) {resetpoints ();        Touchflag + = 1;            }else if (Touchflag = = 2) {animpoints (MPoint0, Mallpoints.get (4));            Animpoints (mPoint4, Mallpoints.get (0));            MPoint2 = new PointF (0, 0);            MPoint3 = new PointF (0, 0);            Invalidate ();        Touchflag + = 1;            } else if (Touchflag = = 3) {resetpoints ();        Touchflag + = 1; } else {animpoints (mPoint0, Mallpoints.get (6));            Animpoints (MPoint1, Mallpoints.get (3));            Animpoints (MPOINT5, Mallpoints.get (6));            MPoint2 = new PointF (0, 0);            MPoint3 = new PointF (0, 0);            Invalidate ();        Touchflag = 1;    } return Super.ontouchevent (event);        } private void Resetpoints () {animpoints (mPoint0, Mallpoints.get (0));        Animpoints (MPoint1, Mallpoints.get (1));        Animpoints (MPoint2, Mallpoints.get (2));        Animpoints (MPoint3, Mallpoints.get (3));        Animpoints (MPoint4, Mallpoints.get (4));    Animpoints (MPOINT5, Mallpoints.get (5)); private void Animpoints (final PointF start, final PointF end) {Valueanimator animator = Valueanimator.ofobjec  T (new typeevaluator<pointf> () {@Override public PointF evaluate (float V, PointF o, PointF O2)                {start.x = Start.x + (end.x-start.x) * v; Start.y = Start.y+ (END.Y-START.Y) * v;                Invalidate ();            return null;        }}, start, end);        Animator.setduration (1000);        Animator.start ();        Objectanimator Animator1 = Objectanimator.offloat (this, mrotationproperty, 0, 1F);        Animator1.setduration (500);    Animator1.start (); } private Property<canvasview, float> mrotationproperty = new Property<canvasview, float> (Float.class, "rot        ation ") {@Override public Float get (Canvasview object) {return object.mrotation;        } @Override public void Set (Canvasview object, Float value) {object.mrotation = value; }    };}

layout files and master files are simple:

<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:paddingleft= "50DP"    android:paddingright= "50DP"    android:paddingtop= "150DP"    android: Paddingbottom= "150DP"    tools:context= ". Mainactivity ">    <view        android:layout_width=" wrap_content "        android:layout_height=" Wrap_ Content "        class=" Com.example.yishengxu.canvas.CanvasView "        android:id=" @+id/view "        android:layout_ Alignparentstart= "true"/></relativelayout>

Package Com.example.yishengxu.canvas;import Android.app.activity;import Android.os.bundle;import android.view.Menu Import Android.view.menuitem;public class Mainactivity extends Activity {    @Override    protected void OnCreate ( Bundle savedinstancestate) {        super.oncreate (savedinstancestate);        Setcontentview (R.layout.activity_main);    }}

OK, the key is to have brains, have idea, on the basis of existing knowledge, processing, creation.

Now, 5.0来, with the addition of Vector drawable and support for SVG, gives us a much more powerful tool for animating more complex path trajectories.

Finally, make an advertisement--friendship link hztalk~ very good, say technology, talk movie, game, really independent, non-objective, third party.

Above.

Android animation Icon---Am not a GIF maker,i am a developer