Android自定义view之围棋动画（化繁为简）

计蒙不吃鱼

发布于 2025-06-12 18:38:40

6400

代码可运行

文章被收录于专栏：Android开发Android开发

运行总次数：0

代码可运行

前言

在上一篇文章中实现了简单的动态效果，假设这是一种动画的类型，那么能否像Android中的动画一样多个效果结合显示呢，这篇文章将以两个例子来进行拓展。第二个例子为围棋动画的精简版

上篇文章链接：Android自定义view之利用drawArc方法实现动态效果

一、上篇文章的实现

        mSweep += SWEEP_INC;
        if (mSweep > 360) {
            mSweep -= 360;
        }
        //刷新View
        invalidate();

二、第一个拓展（未优化）

效果：

思路：

1.在简单的实现中，仅借助了一个值来重复的循环得以实现动态的效果。而大多情况下动画是只显示一次的。而只让动效实现一次很简单：如下。

  if (mSweep > 360) {
            //mSweep -= 360;
        }

如上，不将修改后的值复原即可。

这个效果的实现关键是将添加一个实心的样式画笔

 mPaint1.setStyle(Paint.Style.FILL);

2.为了达到动画只执行一次的效果，需要借助一个布尔值。

    private boolean viewContinue=true;

而逻辑代码也就变成了

    if (viewContinue==true){
            mSweep += SWEEP_INC;
            if (mSweep > 360) {
                mSweep1 += SWEEP_INC;
                if (mSweep1>360){
                  viewContinue=false;
                }
            }
            //刷新View
            invalidate();
        }

案例拓展：

可提供给用户一个方法使动画再执行一次，只需将mSweep，mSweep1改为0，并将viewContinue值改为true即可。
可放在数组中，进行多个效果的迭代。

此案例源码

public class MySampleView extends View {
    private int mWidth;
    private int mHeight;
    private int useWidth, minwidth;
    private Paint mPaint,mPaint1;
    private Paint mFramePaint;
    private RectF mBigOval;
    private float mStart;
    private float mSweep ,mSweep1;
    private boolean viewContinue=true;

    private static final float SWEEP_INC = 2;

    public MySampleView(Context context) {
        super(context);
    }

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

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

    @RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
    public MySampleView(Context context, @Nullable AttributeSet attrs, int defStyleAttr, int defStyleRes) {
        super(context, attrs, defStyleAttr, defStyleRes);
    }
    private void init() {
        initPaint();
    }
    private void initPaint() {
        //初始化
        mPaint = new Paint();
        mPaint.setAntiAlias(true);
        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setColor(0x88FF0000);
        mPaint.setStrokeWidth(4);

        mPaint1 = new Paint();
        mPaint1.setAntiAlias(true);
        mPaint1.setStyle(Paint.Style.FILL);
        mPaint1.setColor(0x88FF0000);
        //初始化
        mFramePaint = new Paint();
        mFramePaint.setAntiAlias(true);
        mFramePaint.setStyle(Paint.Style.STROKE);
        mFramePaint.setStrokeWidth(0);
    }
    @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) {
        init();
        //定义一个最小标识
        minwidth = useWidth / 10;
        mBigOval = new RectF(minwidth, minwidth, minwidth*9, minwidth*9);
        //绘制背景
        canvas.drawColor(Color.WHITE);
        canvas.drawRect(mBigOval, mFramePaint);
        canvas.drawArc(mBigOval, mStart, mSweep, true, mPaint);
        canvas.drawArc(mBigOval, mStart, mSweep1, true, mPaint1);

        if (viewContinue==true){
            mSweep += SWEEP_INC;
            if (mSweep > 360) {
                mSweep1 += SWEEP_INC;
                if (mSweep1>360){
                  viewContinue=false;
                }

            }
            //刷新View
            invalidate();
        }


    }
}

三、第二个案例（本文重点）

相信很多朋友是看过博主这篇文章的：Android自定义view之围棋动画

效果

之前文章写得那么复杂是为了介绍一些Android自定义view的一些知识，而其实实现类似的效果极其的简单，那么直接开始。

1.先实现一个球的直线运动

效果：

思路：

借助一个偏移量改变绘制的小球位置。

代码：

displacement为偏移量

 mBigOval = new RectF(minwidth+displacement, minwidth, minwidth*2+displacement, minwidth*2);
        //绘制背景
        canvas.drawColor(Color.WHITE);
        //canvas.drawRect(mBigOval, mFramePaint);
        canvas.drawArc(mBigOval, 0, 360, false, mPaint);


        if (viewContinue){
            displacement += SWEEP_INC;
            if (displacement > minwidth*7) {
              viewContinue=false;
            }
            //刷新View
            invalidate();
        }

2.绘制另一个小球反方向运动

效果

代码：

  mBigOval = new RectF(minwidth+displacement, minwidth, minwidth*2+displacement, minwidth*2);
        mBigOval1 = new RectF(minwidth*8-displacement, minwidth, minwidth*9-displacement, minwidth*2);
        //绘制背景
        canvas.drawColor(Color.WHITE);
        canvas.drawArc(mBigOval, 0, 360, false, mPaint);
        canvas.drawArc(mBigOval1, 0, 360, false, mPaint1);


        if (viewContinue){
            displacement += SWEEP_INC;
            if (displacement > minwidth*7) {
              viewContinue=false;
            }
            //刷新View
            invalidate();
        }

3.改变匀速

根据情况增加displacement的值。如下

        if (viewContinue){
            displacement += SWEEP_INC;
            if (displacement>minwidth*2){
                displacement+=2;
            }
            if (displacement > minwidth*7) {
              viewContinue=false;
            }
            //刷新View
            invalidate();
        }

4.动画重复执行

效果：

思路：再添加另外的一个标识符，同理，将displacement的值变小。

  if (viewContinue){
            displacement += SWEEP_INC;
            if (displacement>minwidth*2){
                displacement+=2;
            }
            if (displacement > minwidth*7) {
              viewContinue=false;
                viewContinue1=true;
            }
            //刷新View
            invalidate();
        }
       if (viewContinue1){
           displacement -= SWEEP_INC;
           if (displacement<minwidth*5){
               displacement-=2;
           }
           if (displacement <0) {
               viewContinue1=false;
               viewContinue=true;
           }
           //刷新View
           invalidate();
       }

如只需要执行一次来回，在viewContinue1的判断中不将viewContinue的值设为true。

5.源码

public class MySampleView extends View {
    private int mWidth;
    private int mHeight;
    private int useWidth, minwidth;
    private Paint mPaint,mPaint1;
    private Paint mFramePaint;
    private RectF mBigOval,mBigOval1;
    private float displacement;
    private boolean viewContinue=true,viewContinue1=false;

    private static final float SWEEP_INC = 2;

    public MySampleView(Context context) {
        super(context);
    }

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

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

    @RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
    public MySampleView(Context context, @Nullable AttributeSet attrs, int defStyleAttr, int defStyleRes) {
        super(context, attrs, defStyleAttr, defStyleRes);
    }
    private void init() {
        initPaint();
    }
    private void initPaint() {
        //初始化
        mPaint = new Paint();
        mPaint.setAntiAlias(true);
        mPaint.setStyle(Paint.Style.FILL);
        mPaint.setColor(0x88FF0000);

        mPaint1 = new Paint();
        mPaint1.setAntiAlias(true);
        mPaint1.setStyle(Paint.Style.FILL);
        mPaint1.setColor(0x88888888);
        //初始化
        mFramePaint = new Paint();
        mFramePaint.setAntiAlias(true);
        mFramePaint.setStyle(Paint.Style.STROKE);
        mFramePaint.setStrokeWidth(0);
    }
    @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) {
        init();
        //定义一个最小标识
        minwidth = useWidth / 10;
        mBigOval = new RectF(minwidth+displacement, minwidth, minwidth*2+displacement, minwidth*2);
        mBigOval1 = new RectF(minwidth*8-displacement, minwidth, minwidth*9-displacement, minwidth*2);
        //绘制背景
        canvas.drawColor(Color.WHITE);
        //canvas.drawRect(mBigOval, mFramePaint);
        canvas.drawArc(mBigOval, 0, 360, false, mPaint);
        canvas.drawArc(mBigOval1, 0, 360, false, mPaint1);


        if (viewContinue){
            displacement += SWEEP_INC;
            if (displacement>minwidth*2){
                displacement+=2;
            }
            if (displacement > minwidth*7) {
              viewContinue=false;
                viewContinue1=true;
            }
            //刷新View
            invalidate();
        }
       if (viewContinue1){
           displacement -= SWEEP_INC;
           if (displacement<minwidth*5){
               displacement-=2;
           }
           if (displacement <0) {
               viewContinue1=false;
               viewContinue=true;
           }
           //刷新View
           invalidate();
       }

    }
}