This is the 29th day of my participation in the August Wenwen Challenge.More challenges in August

Series of articles

Android custom View lines waiting for animation (inspiration: Golden Shovel Battle)

There is source code at the end of the article

preface

I am about to graduate again. Recently, I am studying face recognition, but I have no inspiration to write a blog about Android. Yesterday, when my classmates handed out the class schedule to the blogger, I invited him to play this game together. Welcome to leave a message.

Effects in the game:

Imitative effect

A, implementation,

1. Measurement, define the minimum measurement length

 @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        mWidth = w;
        mHeight = h;
        useWidth = mWidth;
        if(mWidth > mHeight) { useWidth = mHeight; }}Copy the code

Divide the layout into 10 parts. Take multiples of 1,3,5,7,9 of minwidth as standard points.

 minwidth = useWidth / 10;
Copy the code

2. Draw lines

Initialize a brush:

    private void initPaint(a) {
        mPaint = new Paint();        // Create a brush object
        mPaint.setColor(Color.BLACK);    // Set the brush color
        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setStrokeWidth(4f);     // Set the brush width to 10px
        mPaint.setAntiAlias(true);     // Set anti-aliasing
        mPaint.setAlpha(255);        // Set the brush transparency
    }
Copy the code

Part I Lines:

        canvas.drawLine(minwidth*5,minwidth*5,minwidth*5+mSweep,minwidth*5+mSweep,mPaint);
        canvas.drawLine(minwidth*5,minwidth*5,minwidth*5-mSweep,minwidth*5-mSweep,mPaint);
        canvas.drawLine(minwidth*5,minwidth*5,minwidth*5+mSweep,minwidth*5-mSweep,mPaint);
        canvas.drawLine(minwidth*5,minwidth*5,minwidth*5-mSweep,minwidth*5+mSweep,mPaint);
Copy the code

Effect:

Part II Lines

        canvas.drawLine(minwidth*5+mSweep,minwidth*5+mSweep,minwidth*5+mSweep,minwidth*5+mSweep-mSweep1,mPaint);
        canvas.drawLine(minwidth*5-mSweep,minwidth*5-mSweep,minwidth*5-mSweep,minwidth*5-mSweep+mSweep1,mPaint);
        canvas.drawLine(minwidth*5+mSweep,minwidth*5-mSweep,minwidth*5+mSweep-mSweep1,minwidth*5-mSweep,mPaint);
        canvas.drawLine(minwidth*5-mSweep,minwidth*5+mSweep,minwidth*5-mSweep+mSweep1,minwidth*5+mSweep,mPaint);
Copy the code

Effect:

3. Animation implementation

With four variables

    private boolean viewContinue=true,viewContinue1=true;
    private float mSweep,mSweep1;
Copy the code

The first part animation logic

   if (viewContinue&&viewContinue1){
            mSweep += 2;
            if (mSweep > minwidth*2) {
               viewContinue=false; }}Copy the code

Effect:

The second part animation logic

        if(! viewContinue&&viewContinue1){ mSweep1 +=4;
            if (mSweep1 > 4*minwidth) {
                viewContinue1=false;
                viewContinue=true; }}Copy the code

Effect:

Part 3 Animation Logic (Rollback)

   if(viewContinue&&! viewContinue1){if (mSweep1 <=0) {
               mSweep-=4;
               if (mSweep<0){
                   viewContinue=true;
                   viewContinue1=true; }}else{
                mSweep1 -= 2; }}Copy the code

Effect:

Refresh the view

  invalidate();
Copy the code

Second, the source

public class JCCLoadingView extends View {
    private Paint mPaint;
    private int mWidth;
    private int mHeight;
    private int useWidth, minwidth;
    private boolean viewContinue=true,viewContinue1=true;
    private float mSweep,mSweep1;


    public JCCLoadingView(Context context) {
        super(context);
        init();
    }

    public JCCLoadingView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    public JCCLoadingView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }
    private void init(a) {
        initPaint();
    }


    /** * initialize the brush */
    private void initPaint(a) {
        mPaint = new Paint();        // Create a brush object
        mPaint.setColor(Color.BLACK);    // Set the brush color
        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setStrokeWidth(4f);     // Set the brush width to 10px
        mPaint.setAntiAlias(true);     // Set anti-aliasing
        mPaint.setAlpha(255);        // Set the brush transparency
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        mWidth = w;
        mHeight = h;
        useWidth = mWidth;
        if(mWidth > mHeight) { useWidth = mHeight; }}@Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        minwidth = useWidth / 10;

        canvas.drawLine(minwidth*5,minwidth*5,minwidth*5+mSweep,minwidth*5+mSweep,mPaint);
        canvas.drawLine(minwidth*5,minwidth*5,minwidth*5-mSweep,minwidth*5-mSweep,mPaint);
        canvas.drawLine(minwidth*5,minwidth*5,minwidth*5+mSweep,minwidth*5-mSweep,mPaint);
        canvas.drawLine(minwidth*5,minwidth*5,minwidth*5-mSweep,minwidth*5+mSweep,mPaint);

        canvas.drawLine(minwidth*5+mSweep,minwidth*5+mSweep,minwidth*5+mSweep,minwidth*5+mSweep-mSweep1,mPaint);
        canvas.drawLine(minwidth*5-mSweep,minwidth*5-mSweep,minwidth*5-mSweep,minwidth*5-mSweep+mSweep1,mPaint);
        canvas.drawLine(minwidth*5+mSweep,minwidth*5-mSweep,minwidth*5+mSweep-mSweep1,minwidth*5-mSweep,mPaint);
        canvas.drawLine(minwidth*5-mSweep,minwidth*5+mSweep,minwidth*5-mSweep+mSweep1,minwidth*5+mSweep,mPaint);


        if (viewContinue&&viewContinue1){
            mSweep += 2;
            if (mSweep > minwidth*2) {
               viewContinue=false; }}if(! viewContinue&&viewContinue1){ mSweep1 +=4;
            if (mSweep1 > 4*minwidth) {
                viewContinue1=false;
                viewContinue=true; }}if(viewContinue&&! viewContinue1){if (mSweep1 <=0) {
               mSweep-=4;
               if (mSweep<0){
                   viewContinue=true;
                   viewContinue1=true; }}else{
                mSweep1 -= 2; }}/ / refresh the Viewinvalidate(); }}Copy the code