Download control 1 of custom control (downloadview1)

Some time ago, I saw two cool download buttons in the dry goods concentration camp ：

     

Unfortunately, it's next door iOS The children of , What do I do , I like it too ,emmm, Some , I can only imitate and realize it myself . Let's start with the first one （ The second wave effect is not yet available ）.

1 Get ready

After writing the custom control several times , I also master the basic posture , First, we dismember the first control , I roughly divide it into five steps , First step , Open the refrigerator door , The second step , Put the elephant ... Go to , What kind of bike do you want . First step ： First draw a circle , The color of the ring is a bit like light cyan , Filled with dark cyan , There is a common download arrow in the middle of the circle ; The second step ： The vertical line of the download arrow shrinks to a point ; The third step ; The lower half of the download arrow turns up into a horizontal line , At the same time, the point just contracted by the vertical line moves up to the top of the ring ; Step four ; The horizontal line of the download arrow shrinks to a point , At the same time, move to the point directly above the circle to draw a semicircle from both sides of the circle until you draw a complete circle ; Step five ： The dot that the horizontal line shrinks becomes a green check mark .

OK, After understanding the decomposition action , Let's create a new control DownloadView1, Then initialize the background color and brush , Determine a radius ：

public class DownloadView1 extends View {
    private Paint mPaint;
    private float radius = 150; // Circle radius 

    public DownloadView1(Context context) {
        this(context, null);
    }

    public DownloadView1(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public DownloadView1(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        mPaint = new Paint();
        mPaint.setStrokeWidth(radius / 10);
        mPaint.setStrokeCap(Paint.Cap.ROUND);
    }
    
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        setBackgroundColor(Color.rgb(10, 39, 46));
    }
}

2 Draw circles and arrows

The vertical line of the download arrow can be used directly drawLine() How to draw , Arrows can be used drawPath() How to draw , Create a new... In the constructor Path object , Then define a lineLength Is half the radius .

public class DownloadView1 extends View {
    private Paint mPaint;
    private Path mPath;
    private float radius = 150; // Circle radius 
    private float lineLength = radius / 2;  // The length of the vertical line in the middle of the downloaded logo 
    private float arrowTurningPointY = radius / 2;   // Download the logo below the turning point of the arrow  Y  Axis coordinates 
    private float arrowLength = radius / 2;  // The length of the downloaded logo after the arrow becomes a horizontal line 

    public DownloadView1(Context context) {
        this(context, null);
    }

    public DownloadView1(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public DownloadView1(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        mPaint = new Paint();
        mPaint.setStrokeWidth(radius / 10);
        mPaint.setStrokeCap(Paint.Cap.ROUND);

        mPath = new Path();
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        setBackgroundColor(Color.rgb(10, 39, 46));
    }

    @Override
    protected void onDraw(Canvas canvas) {
        mPaint.setColor(Color.rgb(10, 39, 46));
        mPaint.setStyle(Paint.Style.FILL);
        mPaint.setAntiAlias(true);
        canvas.drawCircle(getMeasuredWidth() / 2, getMeasuredHeight() / 2, radius, mPaint);

        mPaint.setColor(Color.rgb(37, 66, 73));
        mPaint.setStyle(Paint.Style.STROKE);
        canvas.drawCircle(getMeasuredWidth() / 2, getMeasuredHeight() / 2, radius, mPaint);

        mPaint.setColor(Color.rgb(255, 255, 255));
        mPaint.setStyle(Paint.Style.STROKE);
        canvas.drawLine(getMeasuredWidth() / 2, getMeasuredHeight() / 2 - lineLength
                , getMeasuredWidth() / 2, getMeasuredHeight() / 2 + lineLength
                , mPaint);

        mPaint.setColor(Color.rgb(255, 255, 255));
        mPaint.setStyle(Paint.Style.STROKE);
        mPath.reset();
        mPath.moveTo(getMeasuredWidth() / 2 - arrowLength, getMeasuredHeight() / 2);
        mPath.lineTo(getMeasuredWidth() / 2, getMeasuredHeight() / 2 + arrowTurningPointY);
        mPath.lineTo(getMeasuredWidth() / 2 + arrowLength, getMeasuredHeight() / 2);
        canvas.drawPath(mPath, mPaint);
    }
}

Now it is ：

Then we can realize animation on this basis , In order to save space , Just paste the key code , It mainly depends on the train of thought , The final complete code is posted at the end .

3 The download arrow vertical line shrinks to a point

We need a variable to control the length of this vertical line , Just make the length shorter and shorter through attribute animation ：

            // Draw the download arrow 
            mPaint.setColor(Color.rgb(255, 255, 255));
            mPaint.setStyle(Paint.Style.STROKE);
            if (lineLength == 0) {
                // When the vertical line of the download arrow shrinks to a dot, you should draw a dot 
                canvas.drawPoint(getMeasuredWidth() / 2, linePointY, mPaint);
            } else {
                // Otherwise you should draw a line 
                canvas.drawLine(getMeasuredWidth() / 2, getMeasuredHeight() / 2 - lineLength
                        , getMeasuredWidth() / 2, getMeasuredHeight() / 2 + lineLength
                        , mPaint);
            }

And then write a startAnimation() Method , Call this method after clicking ：

private void startAnimation() {
        // Each animation has a different duration 
        lineLengthAnimator.setDuration(500);

        // Add animation monitor , In fact, it is always redrawn 
        lineLengthAnimator.addUpdateListener(mAnimatorUpdateListener);

        // Set the playback order of the animation 
        AnimatorSet mAnimatorSet = new AnimatorSet();
        mAnimatorSet.play(lineLengthAnimator);
	mAnimatorSet.start();
｝

This is the listener for animation updates ：

    private ValueAnimator.AnimatorUpdateListener mAnimatorUpdateListener = new ValueAnimator.AnimatorUpdateListener() {
        @Override
        public void onAnimationUpdate(ValueAnimator animation) {
            invalidate();
        }
    };

4 The arrow part of the download arrow becomes a horizontal line , At the same time, the dot of the vertical line moves up

The arrow below becomes a horizontal line , We need to modify path A turning point in the middle path , What I define is arrowTurningPointY, Let it move to the center of the circle first , Then move down a bit and back again to form a shaking effect , At the same time, the arrow vertical line becomes a point in Y The coordinates of the axes also change , Move from the center of the circle to just above the circle , Defined linePointY To control , So add a few animations , To modify a startAnimation() Method ：

    private void startAnimation() {
        // Download the animation that the arrow vertical line shrinks to a point 
        ObjectAnimator lineLengthAnimator = ObjectAnimator.ofFloat(this, "lineLength", radius / 2, 0);
        // Download the animation after the arrow vertical line shrinks into a dot 1（ The arrow of the download arrow becomes a horizontal line ）
        ObjectAnimator arrowTurningPointYAnimator1 = ObjectAnimator.ofFloat(this, "arrowTurningPointY", radius / 2, 0);
        // Download the animation after the arrow vertical line shrinks into a dot 2（ Download the arrow shaking effect of the arrow ）
        ObjectAnimator arrowTurningPointYAnimator2 = ObjectAnimator.ofFloat(this, "arrowTurningPointY", 0, radius / 4, 0);
        // Download the arrow vertical line after shrinking into a dot  Y  Animation of axis coordinate change 
        ObjectAnimator linePointYAnimator = ObjectAnimator.ofFloat(this, "linePointY", getMeasuredHeight() / 2, getMeasuredHeight() / 2 - radius);

        // Each animation has a different duration 
        lineLengthAnimator.setDuration(500);
        arrowTurningPointYAnimator1.setDuration(500);
        arrowTurningPointYAnimator2.setDuration(500);
        linePointYAnimator.setDuration(500);

        // Add animation monitor , In fact, it is always redrawn 
        lineLengthAnimator.addUpdateListener(mAnimatorUpdateListener);
        arrowTurningPointYAnimator1.addUpdateListener(mAnimatorUpdateListener);
        arrowTurningPointYAnimator2.addUpdateListener(mAnimatorUpdateListener);
        linePointYAnimator.addUpdateListener(mAnimatorUpdateListener);

        // Set the playback order of the animation 
        AnimatorSet mAnimatorSet = new AnimatorSet();
        mAnimatorSet.play(arrowTurningPointYAnimator1).after(lineLengthAnimator);
        mAnimatorSet.play(arrowTurningPointYAnimator2).after(arrowTurningPointYAnimator1);
        mAnimatorSet.play(linePointYAnimator).after(arrowTurningPointYAnimator1);

        mAnimatorSet.start();
    }

5 Draw two semicircles , The horizontal line that the download arrow becomes shrinks into a dot

This animation is also relatively simple , To draw two arcs , The scanning angle of the arc increases , Until two semicircles are formed , That is, to form a ring at last , Define a sweepAngle To control , There is also the download arrow. The arrow part shrinks to a dot , Definition arrowLength To control the length ：

Draw a semicircle ：

        // Draw two semicircles 
        mPaint.setColor(Color.rgb(255, 255, 255));
        mPaint.setStyle(Paint.Style.STROKE);
        canvas.drawArc(mRectF, -90, sweepAngle, false, mPaint);
        canvas.drawArc(mRectF, -90, 0 - sweepAngle, false, mPaint);

Arrow part ：

            mPaint.setColor(Color.rgb(255, 255, 255));
            mPaint.setStyle(Paint.Style.STROKE);
            if (arrowLength == 0) {
                // When the arrow part of the download arrow shrinks to a dot, you should draw a dot 
                canvas.drawPoint(getMeasuredWidth() / 2, tickTurningPointY, mPaint);
                drawOk = true;
            } else {
                // Otherwise, you should draw arrows 
                mPath.reset();
                mPath.moveTo(getMeasuredWidth() / 2 - arrowLength, getMeasuredHeight() / 2);
                mPath.lineTo(getMeasuredWidth() / 2, getMeasuredHeight() / 2 + arrowTurningPointY);
                mPath.lineTo(getMeasuredWidth() / 2 + arrowLength, getMeasuredHeight() / 2);
                canvas.drawPath(mPath, mPaint);
            }

modify startAnimation() Method ：

    private void startAnimation() {
        // Download the animation that the arrow vertical line shrinks to a point 
        ObjectAnimator lineLengthAnimator = ObjectAnimator.ofFloat(this, "lineLength", radius / 2, 0);
        // Download the animation after the arrow vertical line shrinks into a dot 1（ The arrow of the download arrow becomes a horizontal line ）
        ObjectAnimator arrowTurningPointYAnimator1 = ObjectAnimator.ofFloat(this, "arrowTurningPointY", radius / 2, 0);
        // Download the animation after the arrow vertical line shrinks into a dot 2（ Download the arrow shaking effect of the arrow ）
        ObjectAnimator arrowTurningPointYAnimator2 = ObjectAnimator.ofFloat(this, "arrowTurningPointY", 0, radius / 4, 0);
        // Download the arrow vertical line after shrinking into a dot  Y  Animation of axis coordinate change 
        ObjectAnimator linePointYAnimator = ObjectAnimator.ofFloat(this, "linePointY", getMeasuredHeight() / 2, getMeasuredHeight() / 2 - radius);
        // Animation of drawing a semicircle 
        ObjectAnimator sweepAngleAnimator = ObjectAnimator.ofFloat(this, "sweepAngle", 0, 180);
        // Download the animation of the arrow shrinking into points after the arrow becomes a horizontal line 
        ObjectAnimator arrowLengthAnimator = ObjectAnimator.ofFloat(this, "arrowLength", radius / 2, 0);

        // Each animation has a different duration 
        lineLengthAnimator.setDuration(500);
        arrowTurningPointYAnimator1.setDuration(500);
        arrowTurningPointYAnimator2.setDuration(500);
        linePointYAnimator.setDuration(500);
        sweepAngleAnimator.setDuration(3000);
        arrowLengthAnimator.setDuration(3000);

        // Add animation monitor , In fact, it is always redrawn 
        lineLengthAnimator.addUpdateListener(mAnimatorUpdateListener);
        arrowTurningPointYAnimator1.addUpdateListener(mAnimatorUpdateListener);
        arrowTurningPointYAnimator2.addUpdateListener(mAnimatorUpdateListener);
        linePointYAnimator.addUpdateListener(mAnimatorUpdateListener);
        sweepAngleAnimator.addUpdateListener(mAnimatorUpdateListener);
        arrowLengthAnimator.addUpdateListener(mAnimatorUpdateListener);

        // Set the playback order of the animation 
        AnimatorSet mAnimatorSet = new AnimatorSet();
        mAnimatorSet.play(arrowTurningPointYAnimator1).after(lineLengthAnimator);
        mAnimatorSet.play(arrowTurningPointYAnimator2).after(arrowTurningPointYAnimator1);
        mAnimatorSet.play(linePointYAnimator).after(arrowTurningPointYAnimator1);
        mAnimatorSet.play(arrowLengthAnimator).after(arrowTurningPointYAnimator2);
        mAnimatorSet.play(sweepAngleAnimator).after(arrowTurningPointYAnimator2);

        mAnimatorSet.start();
    }

6 Cross check

Here's the thing , We don't draw the download arrow when we check it , So there is a in the code just now boolean Type of drawOk The mark of a , Use it to determine whether to check or download the arrow , After the arrow part of the download arrow also shrinks to a point, set it to true, namely arrowLength = 0 when , To draw a checkmark, we need to dynamically calculate the position of its turning point and the total length of the checkmark

Look at this picture ：

thus ,point1 Of x The coordinates are the center of the circle x Coordinates minus hypotenuse 1 Times the length of sin45°,point2 Of x The coordinates are the center of the circle x coordinate ,point3 Of x The coordinates are the center of the circle x Coordinates plus beveled edges 2 Times the length of sin45°.point2 Of y Coordinates are changes we know , So pass point2 Of y The coordinates can be calculated point1 and point3 Of y coordinate ,point1 Of y The coordinates are equal to point2 Of y Coordinates minus hypotenuse 1 multiply cos45°,point3 Of y The coordinates are equal to point2 Of y Coordinates minus hypotenuse 2 multiply cos45°. Although in theory , But the actual effect is not good-looking .

            mPath.moveTo((float) (getMeasuredWidth() / 2 - (Math.sin(45) * tickLength / 3))
                    , (float) (tickTurningPointY - (Math.cos(45) * tickLength / 3)));
            mPath.lineTo(getMeasuredWidth() / 2, tickTurningPointY);
            mPath.lineTo((float) (getMeasuredWidth() / 2 + (Math.sin(45) * tickLength / 3*2))
                    , (float) (tickTurningPointY - (Math.cos(45) * tickLength / 3*2)));

So add a fixed value and modify it , It seems that such a fixed algorithm is not good , When you have a good idea, you can optimize it ：

            mPath.moveTo((float) (getMeasuredWidth() / 2 - (Math.sin(45) * tickLength / 3))
                    , (float) (tickTurningPointY - (Math.cos(45) * tickLength / 3)-radius/4));
            mPath.lineTo(getMeasuredWidth() / 2, tickTurningPointY-radius/4);
            mPath.lineTo((float) (getMeasuredWidth() / 2 + (Math.sin(45) * tickLength / 3))
                    , (float) (tickTurningPointY - (Math.cos(45) * tickLength / 3*2)-radius/4));

Then add animation , The code is not posted , Look at the final overall code . The final overall effect is as follows ：

7 summary

This time, the animation of this custom control is more complicated , There are a lot of steps , It also involves some omissions in my previous study of attribute animation , Make it up this time . And especially in the last step , I don't think it's a good thing to realize , Sure enough, there is a big gap between mathematics and algorithm . But this time it made me understand more , Even the most complicated animation , As long as it is decomposed , Step by step , There is no difficulty .

8 Source code

/**
 * Description:
 * Created by  Mr. beast 
 * Created on 2017/9/4
 */

public class DownloadView1 extends View {
    private Paint mPaint;
    private Path mPath;
    private float radius = 150; // Circle radius 
    private float lineLength = radius / 2;  // The length of the vertical line in the middle of the downloaded logo 
    private float arrowTurningPointY = radius / 2;   // Download the logo below the turning point of the arrow  Y  Axis coordinates 
    private float linePointY;   // The vertical line in the middle of the downloaded logo shrinks to the point after the point  Y  coordinate ,onMeasured()  method 
    private RectF mRectF;
    private float sweepAngle = 0;   // The angle of the arc on both sides 
    private float arrowLength = radius / 2;  // The length of the downloaded logo after the arrow becomes a horizontal line 
    private float tickTurningPointY;  // Couplet  Y  coordinate ,onMeasured()  method 
    private float tickLength = 0;  // The total length of the hook ;
    private boolean drawOk; // Whether the mark position of the last hook should be drawn 

    public DownloadView1(Context context) {
        this(context, null);
    }

    public DownloadView1(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public DownloadView1(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        mPaint = new Paint();
        mPaint.setStrokeWidth(radius / 10);
        mPaint.setStrokeCap(Paint.Cap.ROUND);

        mPath = new Path();

        setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                startAnimation();
            }
        });
    }

    public void setLineLength(float lineLength) {
        this.lineLength = lineLength;
    }

    public void setArrowTurningPointY(float arrowTurningPointY) {
        this.arrowTurningPointY = arrowTurningPointY;
    }

    public void setLinePointY(float linePointY) {
        this.linePointY = linePointY;
    }

    public void setSweepAngle(float sweepAngle) {
        this.sweepAngle = sweepAngle;
    }

    public void setArrowLength(float arrowLength) {
        this.arrowLength = arrowLength;
    }

    public void setTickTurningPointY(float tickTurningPointY) {
        this.tickTurningPointY = tickTurningPointY;
    }

    public void setTickLength(float tickLength) {
        this.tickLength = tickLength;
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        setBackgroundColor(Color.rgb(10, 39, 46));
        linePointY = getMeasuredHeight() / 2;
        tickTurningPointY = getMeasuredHeight() / 2;
        mRectF = new RectF(getMeasuredWidth() / 2 - radius
                , getMeasuredHeight() / 2 - radius
                , getMeasuredWidth() / 2 + radius
                , getMeasuredHeight() / 2 + radius);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        // Draw the whole circle 
        mPaint.setColor(Color.rgb(10, 39, 46));
        mPaint.setStyle(Paint.Style.FILL);
        mPaint.setAntiAlias(true);
        canvas.drawCircle(getMeasuredWidth() / 2, getMeasuredHeight() / 2, radius, mPaint);

        // Draw a circle 
        mPaint.setColor(Color.rgb(37, 66, 73));
        mPaint.setStyle(Paint.Style.STROKE);
        canvas.drawCircle(getMeasuredWidth() / 2, getMeasuredHeight() / 2, radius, mPaint);

        // Draw two semicircles 
        mPaint.setColor(Color.rgb(255, 255, 255));
        mPaint.setStyle(Paint.Style.STROKE);
        canvas.drawArc(mRectF, -90, sweepAngle, false, mPaint);
        canvas.drawArc(mRectF, -90, 0 - sweepAngle, false, mPaint);

        // Decide what to draw according to whether it should be checked 
        if (drawOk) {
            // Cross check 
            mPaint.setColor(Color.rgb(98, 178, 117));
            mPaint.setStyle(Paint.Style.STROKE);
            mPath.reset();
            mPath.moveTo((float) (getMeasuredWidth() / 2 - (Math.sin(45) * tickLength / 3))
                    , (float) (tickTurningPointY - (Math.cos(45) * tickLength / 3)-radius/4));
            mPath.lineTo(getMeasuredWidth() / 2, tickTurningPointY-radius/4);
            mPath.lineTo((float) (getMeasuredWidth() / 2 + (Math.sin(45) * tickLength / 3))
                    , (float) (tickTurningPointY - (Math.cos(45) * tickLength / 3*2)-radius/4));
            canvas.drawPath(mPath, mPaint);
        } else {
            // Draw the download arrow 
            mPaint.setColor(Color.rgb(255, 255, 255));
            mPaint.setStyle(Paint.Style.STROKE);
            if (lineLength == 0) {
                // When the vertical line of the download arrow shrinks to a dot, you should draw a dot 
                canvas.drawPoint(getMeasuredWidth() / 2, linePointY, mPaint);
            } else {
                // Otherwise you should draw a line 
                canvas.drawLine(getMeasuredWidth() / 2, getMeasuredHeight() / 2 - lineLength
                        , getMeasuredWidth() / 2, getMeasuredHeight() / 2 + lineLength
                        , mPaint);
            }

            mPaint.setColor(Color.rgb(255, 255, 255));
            mPaint.setStyle(Paint.Style.STROKE);
            if (arrowLength == 0) {
                // When the arrow part of the download arrow shrinks to a dot, you should draw a dot 
                canvas.drawPoint(getMeasuredWidth() / 2, tickTurningPointY, mPaint);
                drawOk = true;
            } else {
                // Otherwise, you should draw arrows 
                mPath.reset();
                mPath.moveTo(getMeasuredWidth() / 2 - arrowLength, getMeasuredHeight() / 2);
                mPath.lineTo(getMeasuredWidth() / 2, getMeasuredHeight() / 2 + arrowTurningPointY);
                mPath.lineTo(getMeasuredWidth() / 2 + arrowLength, getMeasuredHeight() / 2);
                canvas.drawPath(mPath, mPaint);
            }
        }
    }

    private void startAnimation() {
        // Download the animation that the arrow vertical line shrinks to a point 
        ObjectAnimator lineLengthAnimator = ObjectAnimator.ofFloat(this, "lineLength", radius / 2, 0);
        // Download the animation after the arrow vertical line shrinks into a dot 1（ The arrow of the download arrow becomes a horizontal line ）
        ObjectAnimator arrowTurningPointYAnimator1 = ObjectAnimator.ofFloat(this, "arrowTurningPointY", radius / 2, 0);
        // Download the animation after the arrow vertical line shrinks into a dot 2（ Download the arrow shaking effect of the arrow ）
        ObjectAnimator arrowTurningPointYAnimator2 = ObjectAnimator.ofFloat(this, "arrowTurningPointY", 0, radius / 4, 0);
        // Download the arrow vertical line after shrinking into a dot  Y  Animation of axis coordinate change 
        ObjectAnimator linePointYAnimator = ObjectAnimator.ofFloat(this, "linePointY", getMeasuredHeight() / 2, getMeasuredHeight() / 2 - radius);
        // Animation of drawing a semicircle 
        ObjectAnimator sweepAngleAnimator = ObjectAnimator.ofFloat(this, "sweepAngle", 0, 180);
        // Download the animation of the arrow shrinking into points after the arrow becomes a horizontal line 
        ObjectAnimator arrowLengthAnimator = ObjectAnimator.ofFloat(this, "arrowLength", radius / 2, 0);
        // The turning point of the checkmark is  Y  Animation of axis coordinate change 
        ObjectAnimator tickTurningPointYAnimator = ObjectAnimator.ofFloat(this, "tickTurningPointY", getMeasuredHeight() / 2, getMeasuredHeight() / 2 + radius / 2);
        // Animation of the change in the total length of the tick 
        ObjectAnimator tickLengthAnimator = ObjectAnimator.ofFloat(this, "tickLength", 0, radius);

        // Each animation has a different duration 
        lineLengthAnimator.setDuration(500);
        arrowTurningPointYAnimator1.setDuration(500);
        arrowTurningPointYAnimator2.setDuration(500);
        linePointYAnimator.setDuration(500);
        sweepAngleAnimator.setDuration(3000);
        arrowLengthAnimator.setDuration(3000);
        tickTurningPointYAnimator.setDuration(1000);
        tickLengthAnimator.setDuration(1000);

        // Add animation monitor , In fact, it is always redrawn 
        lineLengthAnimator.addUpdateListener(mAnimatorUpdateListener);
        arrowTurningPointYAnimator1.addUpdateListener(mAnimatorUpdateListener);
        arrowTurningPointYAnimator2.addUpdateListener(mAnimatorUpdateListener);
        linePointYAnimator.addUpdateListener(mAnimatorUpdateListener);
        sweepAngleAnimator.addUpdateListener(mAnimatorUpdateListener);
        arrowLengthAnimator.addUpdateListener(mAnimatorUpdateListener);
        tickTurningPointYAnimator.addUpdateListener(mAnimatorUpdateListener);
        tickLengthAnimator.addUpdateListener(mAnimatorUpdateListener);

        // Set the playback order of the animation 
        AnimatorSet mAnimatorSet = new AnimatorSet();
        mAnimatorSet.play(arrowTurningPointYAnimator1).after(lineLengthAnimator);
        mAnimatorSet.play(arrowTurningPointYAnimator2).after(arrowTurningPointYAnimator1);
        mAnimatorSet.play(linePointYAnimator).after(arrowTurningPointYAnimator1);
        mAnimatorSet.play(arrowLengthAnimator).after(arrowTurningPointYAnimator2);
        mAnimatorSet.play(sweepAngleAnimator).after(arrowTurningPointYAnimator2);
        mAnimatorSet.play(tickTurningPointYAnimator).after(sweepAngleAnimator);
        mAnimatorSet.play(tickLengthAnimator).after(sweepAngleAnimator);

        // Add animation set monitor , Reset each variable after completion 
        mAnimatorSet.addListener(new Animator.AnimatorListener() {
            @Override
            public void onAnimationStart(Animator animation) {

            }

            @Override
            public void onAnimationEnd(Animator animation) {
//                lineLength = radius / 2;
//                arrowTurningPointY = radius / 2;
//                linePointY = getMeasuredHeight() / 2;
//                sweepAngle = 0;
//                arrowLength = radius / 2;
//                tickTurningPointY = getMeasuredHeight() / 2;
//                tickLength = 0;
//                drawOk = false;
//                invalidate();
            }

            @Override
            public void onAnimationCancel(Animator animation) {

            }

            @Override
            public void onAnimationRepeat(Animator animation) {

            }
        });
        mAnimatorSet.start();
    }

    private ValueAnimator.AnimatorUpdateListener mAnimatorUpdateListener = new ValueAnimator.AnimatorUpdateListener() {
        @Override
        public void onAnimationUpdate(ValueAnimator animation) {
            invalidate();
        }
    };
}