自定义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：一个精致的打钩小动画