当前位置：首页 » 《关注互联网》 » 正文

Android自定义view之围棋动画（化繁为简）_计蒙不吃鱼的博客

21 人参与  2021年08月24日 07:43  分类 : 《关注互联网》  评论

点击全文阅读


系列文章目录

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

文章最后有源码

文章目录

  • 系列文章目录
  • 前言
  • 一、上篇文章的实现
  • 二、第一个拓展（未优化）
    • 效果：
    • 思路：
      • 1.在简单的实现中，仅借助了一个值来重复的循环得以实现动态的效果。而大多情况下动画是只显示一次的。而只让动效实现一次很简单：如下。
      • 2.为了达到动画只执行一次的效果，需要借助一个布尔值。
    • 此案例源码
  • 三、第二个案例（本文重点）
    • 效果
    • 1.先实现一个球的直线运动
      • 效果：
      • 思路：
      • 代码：
    • 2.绘制另一个小球反方向运动
      • 效果：
      • 代码：
    • 3.改变匀速
    • 4.动画重复执行
      • 效果：
      • 思路：再添加另外的一个标识符，同理，将displacement的值变小。
    • 5.源码
  • 四、总结

前言

在上一篇文章中实现了简单的动态效果，假设这是一种动画的类型，那么能否像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();
       }

    }
}

四、总结

通过第二个案例实现，应该能够拓展开大家的思路，实现更加好的动态效果，相对于博主之前类似效果的文章，算是化繁为简了。想来应该能够对各位有所帮助。欢迎留言。


点击全文阅读


本文链接：http://zhangshiyu.com/post/26031.html

效果  动画  刷新  
<< 上一篇 下一篇 >>

  • 评论（0）
  • 赞助本站

◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。

最新文章

  • 炮灰重生：揣着空间嫁糙汉谈静书秦汉阳小说在线全文免费阅读
  • 小说《闪婚后，豪门继承人把我当成宝》全文免费阅读
  • 主角秦风小说完整版在线阅读，随便画的，不至于吧免费看
  • 闪婚后，亿万总裁对我千依百顺小说，闪婚后，亿万总裁对我千依百顺在线阅读
  • PAT甲级 1056 Mice and Rice（25）
  • 【C语言1】C语言常见概念（总结复习篇）——库函数、ASCII码、转义字符
  • 【C 语言文件操作】—— 内存映射与高效 I/O 策略的深度融合
  • LocalDateTime与前端字符串时间数据交互问题
  • 【Vue3】 中的 【onMounted】：详解与使用
  • HTML+JS简单使用WebRTC(前端篇)
  • 免费在线阅读气死！女帝嫌弃的废物有神坐镇小说的正规网站有哪些？
  • 真千金重生：这炮灰我不当了朱颜，真千金重生：这炮灰我不当了小说免费阅读

    关于我们 | 我要投稿 | 免责申明

    Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1