自定义控件，

大神勿喷，菜鸟互相学习！！

首先上效果图：

这里你要清楚这个自定义控件的步骤：

1、首先画上静态的圆环和未选中的购。

2、当点击控件不画之前的静态图，其次启动一个画粉色圆弧的动画。圆弧画满后设置FILL充满颜色。

3、圆弧画满后启动一个花白色的圆。圆的半径逐渐变成0、

4、白色圆变成0后，粉色启动一个半径变大再缩小，形成一个放大效果

5、然后画路径，这里我调皮了下，其实是画选择的沟。

好了思路清晰了，上代码：

/**
 * Created by lihang on 2017/11/22.
 */

public class TickView extends View {

    private AnimatorSet animatorSet = new AnimatorSet();

    private Paint paint;//画圆弧的画笔
    private Paint oKpaint;//画勾的画笔

    private Paint circlePaint;//白色的圆
    private int radius = 80;


    private RectF mRectF = new RectF();
    //控件中心的X,Y坐标
    private int centerX;
    private int centerY;

    //绘制勾的路径
    private Path path = new Path();

    //绘制李字路径
    private Path pathLeo = new Path();

    private PathMeasure pathMeasure;
    private DashPathEffect effect;



    /**
     * 设置画圆动画
     */
    private ValueAnimator animator_circle;
    private int currentProgress;

    private boolean isStart;
    private int whiteRadius = -1;
    private ValueAnimator animator_white;

    private int scaceRadius = 100;
    private ValueAnimator animator_scace;


    private ValueAnimator animator_line;
    private boolean startLine;


    private ClickAndAnim listener;

    public ClickAndAnim getListener() {
        return listener;
    }

    public void setListener(ClickAndAnim listener) {
        this.listener = listener;
    }



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

    public TickView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public TickView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);

        initPaint();
        initAnim();
        this.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View view) {
                if (listener != null) {
                    listener.onClickListener();
                }
            }
        });



        animatorSet.addListener(new Animator.AnimatorListener() {
            @Override
            public void onAnimationStart(Animator animation) {

            }

            @Override
            public void onAnimationEnd(Animator animation) {
                if (listener != null) {
                    listener.onAnimFish();
                }
            }

            @Override
            public void onAnimationCancel(Animator animation) {

            }

            @Override
            public void onAnimationRepeat(Animator animation) {

            }
        });


    }


    //初始化动画
    private void initAnim() {

        animator_circle = ValueAnimator.ofInt(0, 360);
        animator_circle.setDuration(600);
        animator_circle.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator valueAnimator) {
                isStart = true;
                paint.setColor(getResources().getColor(R.color.pink));
                currentProgress = (int) valueAnimator.getAnimatedValue();
                postInvalidate();
            }
        });


        animator_white = ValueAnimator.ofInt(radius - 5, 0);
        animator_white.setDuration(400);
        animator_white.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator valueAnimator) {
                whiteRadius = (int) valueAnimator.getAnimatedValue();
                postInvalidate();
            }
        });




        animator_scace = ValueAnimator.ofInt(radius,radius+50,radius);
        animator_scace.setDuration(600);
        animator_scace.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator valueAnimator) {
                scaceRadius = (int) valueAnimator.getAnimatedValue();
                postInvalidate();
            }
        });


        animator_line = ValueAnimator.ofFloat(1, 0);
        animator_line.setDuration(1000);
        animator_line.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                startLine = true;
                float value = (Float) animation.getAnimatedValue();

                effect = new DashPathEffect(new float[]{pathMeasure.getLength(), pathMeasure.getLength()}, value * pathMeasure.getLength());
                oKpaint.setPathEffect(effect);
                postInvalidate();

            }
        });

    }

    private void initPaint() {
        paint = new Paint();
        paint.setAntiAlias(true);
        paint.setStyle(Paint.Style.STROKE);
        paint.setStrokeWidth(dp2px(2));
        paint.setColor(getResources().getColor(R.color.grey));


        oKpaint = new Paint();
        oKpaint.setAntiAlias(true);
        oKpaint.setStyle(Paint.Style.STROKE);
        oKpaint.setStrokeWidth(dp2px(2));
        oKpaint.setColor(getResources().getColor(R.color.grey));


        circlePaint = new Paint();
        circlePaint.setAntiAlias(true);
        circlePaint.setStyle(Paint.Style.FILL);
        circlePaint.setStrokeWidth(dp2px(2));
        circlePaint.setColor(Color.WHITE);
    }


    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        //设置圆圈的外切矩形

        centerX = getMeasuredWidth() / 2;
        centerY = getMeasuredHeight() / 2;
        mRectF.set(centerX - radius, centerY - radius, centerX + radius, centerY + radius);

        path.moveTo(getMeasuredHeight() / 8 * 3, getMeasuredHeight() / 2);
        path.lineTo(getMeasuredHeight() / 2, getMeasuredHeight() / 5 * 3);
        path.lineTo(getMeasuredHeight() / 3 * 2, getMeasuredHeight() / 5 * 2);


        pathLeo.moveTo(getMeasuredWidth()/2-55,getMeasuredHeight()/2-50);
        pathLeo.lineTo(getMeasuredWidth()/2+55,getMeasuredHeight()/2-50);

        pathLeo.moveTo(getMeasuredWidth()/2,getMeasuredHeight()/2-80);
        pathLeo.lineTo(getMeasuredWidth()/2,getMeasuredHeight()/2-10);


        pathLeo.moveTo(getMeasuredWidth()/2,getMeasuredHeight()/2-50);
        pathLeo.lineTo(getMeasuredWidth()/2-70,getMeasuredHeight()/2);

        pathLeo.moveTo(getMeasuredWidth()/2,getMeasuredHeight()/2-50);
        pathLeo.lineTo(getMeasuredWidth()/2+70,getMeasuredHeight()/2);


        pathLeo.moveTo(getMeasuredWidth()/2-35 ,getMeasuredHeight()/2-10);
        pathLeo.lineTo(getMeasuredWidth()/2+35 ,getMeasuredHeight()/2-10);
        pathLeo.lineTo(getMeasuredWidth()/2,getMeasuredHeight()/2+20);
        pathLeo.lineTo(getMeasuredWidth()/2,getMeasuredHeight()/2+70);
        pathLeo.lineTo( getMeasuredWidth()/2-25,getMeasuredHeight()/2+60);

        pathLeo.moveTo(getMeasuredWidth()/2-50 ,getMeasuredHeight()/2+30);
        pathLeo.lineTo(getMeasuredWidth()/2+50 ,getMeasuredHeight()/2+30);





        pathMeasure = new PathMeasure(pathLeo, true);
    }


    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        if (!isStart) {
            canvas.drawArc(mRectF, 90, 360, false, paint);
            canvas.drawPath(path, oKpaint);
            return;
        }

        canvas.drawArc(mRectF, 90, currentProgress, false, paint);

        if (currentProgress == 360) {
            paint.setStyle(Paint.Style.FILL_AND_STROKE);
        }

        canvas.drawCircle(centerX, centerY, whiteRadius, circlePaint);
        if (whiteRadius==0){
            Log.e("应该走了的啊",scaceRadius+"");
            circlePaint.setColor(getResources().getColor(R.color.pink));
            canvas.drawCircle(centerX, centerY, scaceRadius, circlePaint);
        }

        if (startLine){
            oKpaint.setColor(Color.BLACK);
            canvas.drawPath(pathLeo,oKpaint);
        }


    }

    //dp值转换成px值
    private int dp2px(float dpValue) {
        return DisplayUtil.dp2px(getContext(), dpValue);
    }


    public void start() {
//        animatorSet.play(animator_circle).before(animator_white).before(animator_scace);
        animatorSet.play(animator_white).after(animator_circle).before(animator_scace).before(animator_line);
        animatorSet.start();
    }


    public interface ClickAndAnim {

        void onClickListener();

        void onAnimFish();
    }




}

Main里的代码则是：

public class MainActivity extends AppCompatActivity {
    private TickView tickView;
    private ImageView image;

    private static final int ANIM_TIME = 2000;
    private static final float SCALE_END = 1.2F;


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        tickView = (TickView) findViewById(R.id.tickView);
        image = (ImageView) findViewById(R.id.image);
        tickView.setListener(new TickView.ClickAndAnim() {
            @Override
            public void onClickListener() {
                tickView.start();
            }

            @Override
            public void onAnimFish() {
                startAnim();
            }
        });

    }


    private void startAnim() {

        ObjectAnimator animatorX = ObjectAnimator.ofFloat(image, "scaleX", 1f, SCALE_END);
        ObjectAnimator animatorY = ObjectAnimator.ofFloat(image, "scaleY", 1f, SCALE_END);

        AnimatorSet set = new AnimatorSet();
        set.setDuration(ANIM_TIME).play(animatorX).with(animatorY);
        set.start();

        set.addListener(new AnimatorListenerAdapter()
        {

            @Override
            public void onAnimationEnd(Animator animation)
            {


            }
        });
    }
}