自定义控件，

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

首先上效果图：

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

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)            {            }        });    }}