注册

Android自定义view之围棋动画

Android自定义view之围棋动画

好久不见，最近粉丝要求上新一篇有点难度的自定义view文章，所以它来了！！

干货文,建议收藏

前言

废话不多说直接开始

文章最后有源码

完成效果图

棋子加渐变色

在这里插入图片描述

棋子不加渐变色

在这里插入图片描述

一、测量

1.获取宽高

 @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;

        }

    }

2.定义测量最小长度

将布局分为10份。以minwidth的1，3，5，7，9的倍数为标准点。

        minwidth = useWidth / 10;

二、绘制背景（棋盘）

1.初始化画笔

        mPaint = new Paint();        //创建画笔对象

        mPaint.setColor(Color.BLACK);    //设置画笔颜色

        mPaint.setStyle(Paint.Style.FILL); //设置画笔模式为填充

        mPaint.setStrokeWidth(4f);     //设置画笔宽度为10px

        mPaint.setAntiAlias(true);     //设置抗锯齿

        mPaint.setAlpha(255);        //设置画笔透明度

2.画棋盘

        //细的X轴

        canvas.drawLine(minwidth, 3 * minwidth, 9 * minwidth, 3 * minwidth, mPaint);// 斜线

        canvas.drawLine(minwidth, 5 * minwidth, 9 * minwidth, 5 * minwidth, mPaint);// 斜线

        canvas.drawLine(minwidth, 7 * minwidth, 9 * minwidth, 7 * minwidth, mPaint);// 斜线
//细的y轴

        canvas.drawLine(3 * minwidth, minwidth, 3 * minwidth, 9 * minwidth, mPaint);// 斜线

        canvas.drawLine(5 * minwidth, minwidth, 5 * minwidth, 9 * minwidth, mPaint);// 斜线

        canvas.drawLine(7 * minwidth, minwidth, 7 * minwidth, 9 * minwidth, mPaint);// 斜线

        mPaint.setStrokeWidth(8f);
//粗的X轴（边框）

        canvas.drawLine(minwidth, minwidth, 9 * minwidth, minwidth, mPaint);// 斜线

        canvas.drawLine(minwidth, 9 * minwidth, 9 * minwidth, 9 * minwidth, mPaint);// 斜线
//粗的y轴（边框）

        canvas.drawLine(minwidth, minwidth, minwidth, 9 * minwidth, mPaint);// 斜线

        canvas.drawLine(9 * minwidth, minwidth, 9 * minwidth, 9 * minwidth, mPaint);// 斜线

绘制完后，发现有点小瑕疵

效果图：

在这里插入图片描述

3.补棋盘瑕疵

        canvas.drawPoint(minwidth, minwidth, mPaint);

        canvas.drawPoint(9 * minwidth, minwidth, mPaint);

        canvas.drawPoint(minwidth, 9 * minwidth, mPaint);

        canvas.drawPoint(9 * minwidth, 9 * minwidth, mPaint);

效果图：

在这里插入图片描述

三.画个不可改变的棋子（以便于了解动画移动位置）

位置比例 （3,3）（3,5）（3,7） （5,3）（5,5）（5,7） （7,3）（7,5）（7,7）

        //画围棋

        canvas.drawCircle(3*minwidth, 3*minwidth, useWidth/16, mPaint);

        canvas.drawCircle(3*minwidth, 7*minwidth, useWidth/16, mPaint);

        canvas.drawCircle(5*minwidth, 5*minwidth, useWidth/16, mPaint);

        canvas.drawCircle(7*minwidth, 3*minwidth, useWidth/16, mPaint);

        canvas.drawCircle(7*minwidth, 7*minwidth, useWidth/16, mPaint);

        mPaint.setColor(rightcolor);

        canvas.drawCircle(3*minwidth, 5*minwidth, useWidth/16, mPaint);

        canvas.drawCircle(5*minwidth, 3*minwidth, useWidth/16, mPaint);

        canvas.drawCircle(5*minwidth, 7*minwidth, useWidth/16, mPaint);

        canvas.drawCircle(7*minwidth, 5*minwidth, useWidth/16, mPaint);

效果图：

在这里插入图片描述

四.为动画开始做准备以及动画

1.三个辅助类为动画做准备（参数模仿Android官方Demo）

主要为get set构造，代码会贴到最后

2.自定义该接口实例来控制动画的更新计算表达式

public class XYEvaluator implements TypeEvaluator {
public Object evaluate(float fraction, Object startValue, Object endValue) {

        XYHolder startXY = (XYHolder) startValue;

        XYHolder endXY = (XYHolder) endValue;
return new XYHolder(startXY.getX() + fraction * (endXY.getX() - startXY.getX()),

                startXY.getY() + fraction * (endXY.getY() - startXY.getY()));

    }

}

3.棋子的创建

    private ShapeHolder createBall(float x, float y, int color) {

        OvalShape circle = new OvalShape();

        circle.resize(useWidth / 8f, useWidth / 8f);

        ShapeDrawable drawable = new ShapeDrawable(circle);

        ShapeHolder shapeHolder = new ShapeHolder(drawable);

        shapeHolder.setX(x - useWidth / 16f);

        shapeHolder.setY(y - useWidth / 16f);

        Paint paint = drawable.getPaint();

        paint.setColor(color);
return shapeHolder;

    }

4.动画的创建

    private void createAnimation() {
if (bounceAnim == null) {

            XYHolder lstartXY = new XYHolder(3 * minwidth - useWidth / 16f, 3 * minwidth - useWidth / 16f);

            XYHolder processXY = new XYHolder(7 * minwidth - useWidth / 16f, 3 * minwidth - useWidth / 16f);

            XYHolder lendXY = new XYHolder(7 * minwidth - useWidth / 16f, 7 * minwidth - useWidth / 16f);

            bounceAnim = ObjectAnimator.ofObject(ballHolder, "xY",
new XYEvaluator(), lstartXY, processXY, lendXY, lstartXY);

            bounceAnim.setDuration(animaltime);

            bounceAnim.setRepeatCount(ObjectAnimator.INFINITE);

            bounceAnim.setRepeatMode(ObjectAnimator.RESTART);

            bounceAnim.addUpdateListener(this);

        }
if (bounceAnim1 == null) {

            XYHolder lstartXY = new XYHolder(7 * minwidth - useWidth / 16f, 7 * minwidth - useWidth / 16f);

            XYHolder processXY = new XYHolder(3 * minwidth - useWidth / 16f, 7 * minwidth - useWidth / 16f);

            XYHolder lendXY = new XYHolder(3 * minwidth - useWidth / 16f, 3 * minwidth - useWidth / 16f);

            bounceAnim1 = ObjectAnimator.ofObject(ballHolder1, "xY",
new XYEvaluator(), lstartXY, processXY, lendXY, lstartXY);

            bounceAnim1.setDuration(animaltime);

            bounceAnim1.setRepeatCount(ObjectAnimator.INFINITE);

            bounceAnim1.setRepeatMode(ObjectAnimator.RESTART);

            bounceAnim1.addUpdateListener(this);

        }

    }

5.两个动画的同步执行

        AnimatorSet animatorSet = new AnimatorSet();

        animatorSet.play(bounceAnim).with(bounceAnim1);

        animatorSet.start();

6.效果图

在这里插入图片描述

视觉效果：感觉白子不太明显

7.解决第6步问题

在棋子的创建方法中添加渐变色

        RadialGradient gradient = new RadialGradient(useWidth / 16f, useWidth / 16f,

                useWidth / 8f, color, Color.GRAY, Shader.TileMode.CLAMP);

        paint.setShader(gradient);

        shapeHolder.setPaint(paint);

效果图：

在这里插入图片描述

五.自定义属性

attrs文件：

    <declare-styleable name="WeiqiView">

<!--        黑子颜色-->

        <attr name="leftscolor" format="reference|color"/>

<!--        白子颜色-->

        <attr name="rightscolor" format="reference|color"/>

<!--        棋盘颜色-->

        <attr name="qipancolor" format="reference|color"/>

<!--        动画时间-->

        <attr name="animalstime" format="integer"/>

    </declare-styleable>

java文件中获取

    /**

     * 获取自定义属性

     */
private void initCustomAttrs(Context context, AttributeSet attrs) {
//获取自定义属性

        TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.WeiqiView);
//获取颜色

        leftcolor = ta.getColor(R.styleable.WeiqiView_leftscolor, Color.BLACK);

        rightcolor = ta.getColor(R.styleable.WeiqiView_rightscolor, Color.WHITE);

        qipancolor = ta.getColor(R.styleable.WeiqiView_qipancolor, Color.BLACK);
//获取动画时间

        animaltime = ta.getInt(R.styleable.WeiqiView_animalstime, 2000);
//回收

        ta.recycle();


    }

六.自定义属性设置后运行效果

在这里插入图片描述

七.小改变，视觉效果就不一样了！

然后，把背景注释，像不像那些等待动画？

在这里插入图片描述

八.源码

WeiqiView.java

public class WeiqiView extends View implements ValueAnimator.AnimatorUpdateListener {
private Paint mPaint;
private int mWidth;
private int mHeight;
private int useWidth, minwidth;
private int leftcolor;
private int rightcolor;
private int qipancolor;
private int animaltime;
//画一个圆（棋子）

    ValueAnimator bounceAnim, bounceAnim1 = null;

    ShapeHolder ball, ball1 = null;

    QiziXYHolder ballHolder, ballHolder1 = null;


    @RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
public WeiqiView(Context context) {
this(context, null);

    }


    @RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
public WeiqiView(Context context, @Nullable AttributeSet attrs) {
this(context, attrs, 0);

    }


    @RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
public WeiqiView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
this(context, attrs, defStyleAttr, 0);

        initCustomAttrs(context, attrs);

    }


    @RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
public WeiqiView(Context context, @Nullable AttributeSet attrs, int defStyleAttr, int defStyleRes) {

        super(context, attrs, defStyleAttr, defStyleRes);



    }

private void init() {

        initPaint();

    }


/**

     * 获取自定义属性

     */
private void initCustomAttrs(Context context, AttributeSet attrs) {
//获取自定义属性。

        TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.WeiqiView);
//获取颜色

        leftcolor = ta.getColor(R.styleable.WeiqiView_leftscolor, Color.BLACK);

        rightcolor = ta.getColor(R.styleable.WeiqiView_rightscolor, Color.WHITE);

        qipancolor = ta.getColor(R.styleable.WeiqiView_qipancolor, Color.BLACK);

        animaltime = ta.getInt(R.styleable.WeiqiView_animalstime, 2000);
//回收

        ta.recycle();


    }

/**

     * 初始化画笔

     */
private void initPaint() {

        mPaint = new Paint();        //创建画笔对象

        mPaint.setColor(Color.BLACK);    //设置画笔颜色

        mPaint.setStyle(Paint.Style.FILL); //设置画笔模式为填充

        mPaint.setStrokeWidth(4f);     //设置画笔宽度为10px

        mPaint.setAntiAlias(true);     //设置抗锯齿

        mPaint.setAlpha(255);        //设置画笔透明度

    }


    @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;

        }

    }



    @RequiresApi(api = Build.VERSION_CODES.KITKAT)

    @Override
protected void onDraw(Canvas canvas) {

        super.onDraw(canvas);

        init();

        minwidth = useWidth / 10;

        mPaint.setColor(qipancolor);
if (ball == null) {

            ball = createBall(3 * minwidth, 3 * minwidth, leftcolor);

            ballHolder = new QiziXYHolder(ball);

        }
if (ball1 == null) {

            ball1 = createBall(7 * minwidth, 7 * minwidth, rightcolor);

            ballHolder1 = new QiziXYHolder(ball1);

        }
//细的X轴

        canvas.drawLine(minwidth, 3 * minwidth, 9 * minwidth, 3 * minwidth, mPaint);// 斜线

        canvas.drawLine(minwidth, 5 * minwidth, 9 * minwidth, 5 * minwidth, mPaint);// 斜线

        canvas.drawLine(minwidth, 7 * minwidth, 9 * minwidth, 7 * minwidth, mPaint);// 斜线
//细的y轴

        canvas.drawLine(3 * minwidth, minwidth, 3 * minwidth, 9 * minwidth, mPaint);// 斜线

        canvas.drawLine(5 * minwidth, minwidth, 5 * minwidth, 9 * minwidth, mPaint);// 斜线

        canvas.drawLine(7 * minwidth, minwidth, 7 * minwidth, 9 * minwidth, mPaint);// 斜线

        mPaint.setStrokeWidth(8f);
//粗的X轴（边框）

        canvas.drawLine(minwidth, minwidth, 9 * minwidth, minwidth, mPaint);// 斜线

        canvas.drawLine(minwidth, 9 * minwidth, 9 * minwidth, 9 * minwidth, mPaint);// 斜线
//粗的y轴（边框）

        canvas.drawLine(minwidth, minwidth, minwidth, 9 * minwidth, mPaint);// 斜线

        canvas.drawLine(9 * minwidth, minwidth, 9 * minwidth, 9 * minwidth, mPaint);// 斜线
//补瑕疵

        canvas.drawPoint(minwidth, minwidth, mPaint);

        canvas.drawPoint(9 * minwidth, minwidth, mPaint);

        canvas.drawPoint(minwidth, 9 * minwidth, mPaint);

        canvas.drawPoint(9 * minwidth, 9 * minwidth, mPaint);
//        //画围棋
//        canvas.drawCircle(3*minwidth, 3*minwidth, useWidth/16, mPaint);
//        canvas.drawCircle(3*minwidth, 7*minwidth, useWidth/16, mPaint);
//        canvas.drawCircle(5*minwidth, 5*minwidth, useWidth/16, mPaint);
//        canvas.drawCircle(7*minwidth, 3*minwidth, useWidth/16, mPaint);
//        canvas.drawCircle(7*minwidth, 7*minwidth, useWidth/16, mPaint);
//        mPaint.setColor(rightcolor);
//        canvas.drawCircle(3*minwidth, 5*minwidth, useWidth/16, mPaint);
//        canvas.drawCircle(5*minwidth, 3*minwidth, useWidth/16, mPaint);
//        canvas.drawCircle(5*minwidth, 7*minwidth, useWidth/16, mPaint);
//        canvas.drawCircle(7*minwidth, 5*minwidth, useWidth/16, mPaint);


        canvas.save();

        canvas.translate(ball.getX(), ball.getY());

        ball.getShape().draw(canvas);

        canvas.restore();


        canvas.save();

        canvas.translate(ball1.getX(), ball1.getY());

        ball1.getShape().draw(canvas);

        canvas.restore();

    }

private ShapeHolder createBall(float x, float y, int color) {

        OvalShape circle = new OvalShape();

        circle.resize(useWidth / 8f, useWidth / 8f);

        ShapeDrawable drawable = new ShapeDrawable(circle);

        ShapeHolder shapeHolder = new ShapeHolder(drawable);

        shapeHolder.setX(x - useWidth / 16f);

        shapeHolder.setY(y - useWidth / 16f);

        Paint paint = drawable.getPaint();

        paint.setColor(color);

        RadialGradient gradient = new RadialGradient(useWidth / 16f, useWidth / 16f,

                useWidth / 8f, color, Color.GRAY, Shader.TileMode.CLAMP);

        paint.setShader(gradient);

        shapeHolder.setPaint(paint);
return shapeHolder;

    }

private void createAnimation() {
if (bounceAnim == null) {

            XYHolder lstartXY = new XYHolder(3 * minwidth - useWidth / 16f, 3 * minwidth - useWidth / 16f);

            XYHolder processXY = new XYHolder(7 * minwidth - useWidth / 16f, 3 * minwidth - useWidth / 16f);

            XYHolder lendXY = new XYHolder(7 * minwidth - useWidth / 16f, 7 * minwidth - useWidth / 16f);

            bounceAnim = ObjectAnimator.ofObject(ballHolder, "xY",
new XYEvaluator(), lstartXY, processXY, lendXY, lstartXY);

            bounceAnim.setDuration(animaltime);

            bounceAnim.setRepeatCount(ObjectAnimator.INFINITE);

            bounceAnim.setRepeatMode(ObjectAnimator.RESTART);

            bounceAnim.addUpdateListener(this);

        }
if (bounceAnim1 == null) {

            XYHolder lstartXY = new XYHolder(7 * minwidth - useWidth / 16f, 7 * minwidth - useWidth / 16f);

            XYHolder processXY = new XYHolder(3 * minwidth - useWidth / 16f, 7 * minwidth - useWidth / 16f);

            XYHolder lendXY = new XYHolder(3 * minwidth - useWidth / 16f, 3 * minwidth - useWidth / 16f);

            bounceAnim1 = ObjectAnimator.ofObject(ballHolder1, "xY",
new XYEvaluator(), lstartXY, processXY, lendXY, lstartXY);

            bounceAnim1.setDuration(animaltime);

            bounceAnim1.setRepeatCount(ObjectAnimator.INFINITE);

            bounceAnim1.setRepeatMode(ObjectAnimator.RESTART);

            bounceAnim1.addUpdateListener(this);

        }

    }

public void startAnimation() {

        createAnimation();

        AnimatorSet animatorSet = new AnimatorSet();

        animatorSet.play(bounceAnim).with(bounceAnim1);

        animatorSet.start();

    }


    @Override
public void onAnimationUpdate(ValueAnimator animation) {

        invalidate();

    }

}

QiziXYHolder.java

public class QiziXYHolder {

private ShapeHolder mBall;

public QiziXYHolder(ShapeHolder ball) {

        mBall = ball;

    }

public void setXY(XYHolder xyHolder) {

        mBall.setX(xyHolder.getX());

        mBall.setY(xyHolder.getY());

    }

public XYHolder getXY() {
return new XYHolder(mBall.getX(), mBall.getY());

    }

}

ShapeHolder.java

public class ShapeHolder {
private float x = 0, y = 0;
private ShapeDrawable shape;
private int color;
private RadialGradient gradient;
private float alpha = 1f;
private Paint paint;

public void setPaint(Paint value) {

        paint = value;

    }
public Paint getPaint() {
return paint;

    }

public void setX(float value) {

        x = value;

    }
public float getX() {
return x;

    }
public void setY(float value) {

        y = value;

    }
public float getY() {
return y;

    }
public void setShape(ShapeDrawable value) {

        shape = value;

    }
public ShapeDrawable getShape() {
return shape;

    }
public int getColor() {
return color;

    }
public void setColor(int value) {

        shape.getPaint().setColor(value);

        color = value;

    }
public void setGradient(RadialGradient value) {

        gradient = value;

    }
public RadialGradient getGradient() {
return gradient;

    }

public void setAlpha(float alpha) {
this.alpha = alpha;

        shape.setAlpha((int)((alpha * 255f) + .5f));

    }

public float getWidth() {
return shape.getShape().getWidth();

    }
public void setWidth(float width) {

        Shape s = shape.getShape();

        s.resize(width, s.getHeight());

    }

public float getHeight() {
return shape.getShape().getHeight();

    }
public void setHeight(float height) {

        Shape s = shape.getShape();

        s.resize(s.getWidth(), height);

    }

public ShapeHolder(ShapeDrawable s) {

        shape = s;

    }

}

XYEvaluator.java

public class XYEvaluator implements TypeEvaluator {
public Object evaluate(float fraction, Object startValue, Object endValue) {

        XYHolder startXY = (XYHolder) startValue;

        XYHolder endXY = (XYHolder) endValue;
return new XYHolder(startXY.getX() + fraction * (endXY.getX() - startXY.getX()),

                startXY.getY() + fraction * (endXY.getY() - startXY.getY()));

    }

}

XYHolder.java

public class XYHolder {
private float mX;
private float mY;

public XYHolder(float x, float y) {

        mX = x;

        mY = y;

    }

public float getX() {
return mX;

    }

public void setX(float x) {

        mX = x;

    }

public float getY() {
return mY;

    }

public void setY(float y) {

        mY = y;

    }

}

attrs.xml

<resources>

    <declare-styleable name="WeiqiView">

<!--        黑子颜色-->

        <attr name="leftscolor" format="reference|color"/>

<!--        白子颜色-->

        <attr name="rightscolor" format="reference|color"/>

<!--        棋盘颜色-->

        <attr name="qipancolor" format="reference|color"/>

<!--        动画时间-->

        <attr name="animalstime" format="integer"/>

    </declare-styleable>

</resources>

布局调用

<com.shenzhen.jimeng.lookui.UI.WeiqiView

    android:layout_centerInParent="true"

    android:id="@+id/weiqi"

    android:layout_width="400dp"

    android:layout_height="400dp"/>

activity文件中开启动画

     weiqi = (WeiqiView) findViewById(R.id.weiqi);

        weiqi.setOnClickListener(new View.OnClickListener() {

            @Override
public void onClick(View v) {

                weiqi.startAnimation();

            }

        });
0
分享
2021-08-10

0 个评论

要回复文章请先登录或注册

一个开放、互助、协作、创意的社区

关于imGeek
关于专职工程师值守
社区财富榜
赞助商
友情链接
热门标签
京ICP备2023000793号