自定义view实现打勾动画

最近一直在整自定义view接下来要做的是青芒杂志上的一个打勾的动画
做的不太完整不过基本效果基本思路是有了
首先在初始化代码中实现画笔 的初始化

 Paint circlePaint;//圆环的paint
 Paint fillPaint;//向内不断延伸的圆
 Paint arcPaint;//向外不断延伸并收缩的圆
private void init() {
        circlePaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        circlePaint.setColor(Color.RED);
        circlePaint.setStyle(Paint.Style.STROKE);
        circlePaint.setStrokeWidth(2);

        fillPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        fillPaint.setColor(Color.RED);
        fillPaint.setStyle(Paint.Style.FILL);

        arcPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        arcPaint.setColor(Color.RED);
        arcPaint.setStyle(Paint.Style.STROKE);
        arcPaint.setStrokeWidth(2);
    }

然后在onMeasure中画出外接矩形确定远的外切矩形

@Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        int maxLength = Math.max(getMeasureDate(widthMeasureSpec, 450), getMeasureDate(heightMeasureSpec, 450));
        setMeasuredDimension(maxLength, maxLength);
        centerX = maxLength / 2;
        centerY = maxLength / 2;
        rectF.set(centerX - radius, centerY - radius, centerX + radius, centerY + radius);//设置圆的外切矩形
    }

最后就是我们的绘制过程了
1.先画出外圆

 if (swapAngle < 360) {//画外圆
            swapAngle += 1;
            circlePaint.setStyle(Paint.Style.STROKE);
            canvas.drawArc(rectF, 90, swapAngle, false, circlePaint);
            invalidate();
            return;
        }

2.再画出不断向内延伸的矩形

if (swapRadios <= radius) {//画内圆
            fillPaint.setColor(Color.RED);
            canvas.drawCircle(centerX, centerY, radius, fillPaint);
            fillPaint.setColor(Color.WHITE);
            swapRadios++;
            canvas.drawCircle(centerX, centerY, radius - swapRadios, fillPaint);
            fillPaint.setColor(Color.RED);
            invalidate();
            return;
        }

3.最后画向外延伸又收回的矩形

canvas.drawCircle(centerX, centerY, radius, fillPaint);//先画上内圆
        arcStrockWidth++;
        int width = 0;
        if (maxStrockWidth >= arcStrockWidth) {//扩张
            width = arcStrockWidth;
        } else if (arcStrockWidth < 2 * maxStrockWidth) {//缩小
            width = 2 * maxStrockWidth - arcStrockWidth;
        } else {//固定
            width = 0;
        }

        if (width != 0) {
            arcPaint.setStrokeWidth(width);
            canvas.drawArc(rectF, 90, 360, false, arcPaint);
            invalidate();
        }

完整代码如下

public class TickViewNew extends View {
    Paint circlePaint;//圆环的paint
    Paint fillPaint;//向内不断延伸的圆
    Paint arcPaint;//向外不断延伸并收缩的圆

    RectF rectF = new RectF();//圆环外切矩形
    int radius = 200;//半径
    int swapAngle = 0;//每次增加滑动角度
    int swapRadios = 1;//每次减小的半径
    int centerX, centerY;//圆心坐标

    int arcStrockWidth = 1;//扩张宽度
    int maxStrockWidth = 30;//最大扩张距离

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

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

    public TickViewNew(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

    private void init() {
        circlePaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        circlePaint.setColor(Color.RED);
        circlePaint.setStyle(Paint.Style.STROKE);
        circlePaint.setStrokeWidth(2);

        fillPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        fillPaint.setColor(Color.RED);
        fillPaint.setStyle(Paint.Style.FILL);

        arcPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        arcPaint.setColor(Color.RED);
        arcPaint.setStyle(Paint.Style.STROKE);
        arcPaint.setStrokeWidth(2);
    }


    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        int maxLength = Math.max(getMeasureDate(widthMeasureSpec, 450), getMeasureDate(heightMeasureSpec, 450));
        setMeasuredDimension(maxLength, maxLength);
        centerX = maxLength / 2;
        centerY = maxLength / 2;
        rectF.set(centerX - radius, centerY - radius, centerX + radius, centerY + radius);//设置圆的外切矩形
    }


    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        if (swapAngle < 360) {//画外圆
            swapAngle += 1;
            circlePaint.setStyle(Paint.Style.STROKE);
            canvas.drawArc(rectF, 90, swapAngle, false, circlePaint);
            invalidate();
            return;
        }

        if (swapRadios <= radius) {//画内圆
            fillPaint.setColor(Color.RED);
            canvas.drawCircle(centerX, centerY, radius, fillPaint);
            fillPaint.setColor(Color.WHITE);
            swapRadios++;
            canvas.drawCircle(centerX, centerY, radius - swapRadios, fillPaint);
            fillPaint.setColor(Color.RED);
            invalidate();
            return;
        }

        canvas.drawCircle(centerX, centerY, radius, fillPaint);//先画上内圆
        arcStrockWidth++;
        int width = 0;
        if (maxStrockWidth >= arcStrockWidth) {//扩张
            width = arcStrockWidth;
        } else if (arcStrockWidth < 2 * maxStrockWidth) {//缩小
            width = 2 * maxStrockWidth - arcStrockWidth;
        } else {//固定
            width = 0;
        }

        if (width != 0) {
            arcPaint.setStrokeWidth(width);
            canvas.drawArc(rectF, 90, 360, false, arcPaint);
            invalidate();
        }
    }

    private int getMeasureDate(int measureSpec, int defaultValue) {
        switch (MeasureSpec.getMode(measureSpec)) {
            case MeasureSpec.EXACTLY:
                return MeasureSpec.getSize(measureSpec);
            case MeasureSpec.AT_MOST:
            case MeasureSpec.UNSPECIFIED:
            default:
                return defaultValue;
        }
    }
}

如有疑问欢迎大家提问
参考自 Android自定义View：一个精致的打钩小动画