IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓ 		图片批量下载器
↓批量下载图片,美女图库↓ 		图片自动播放器
↓图片自动播放器↓ 		一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> 移动开发 -> Android自定义view之围棋动画（化繁为简） -> 正文阅读

[移动开发]Android自定义view之围棋动画（化繁为简）

系列文章目录

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

文章最后有源码

文章目录

前言

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

    }
}

四、总结

通过第二个案例实现，应该能够拓展开大家的思路，实现更加好的动态效果，相对于博主之前类似效果的文章，算是化繁为简了。想来应该能够对各位有所帮助。欢迎留言。
  移动开发 最新文章
Vue3装载axios和element-ui
android adb cmd
【xcode】Xcode常用快捷键与技巧
Android开发中的线程池使用
Java 和 Android 的 Base64
Android 测试文字编码格式
微信小程序支付
安卓权限记录
知乎之自动养号
【Android Jetpack】DataStore
上一篇文章      下一篇文章      查看所有文章
加:2021-08-23 16:48:38  更:2021-08-23 16:49:20 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/23 9:37:51-

图片自动播放器
↓图片自动播放器↓ 		TxT小说阅读器
↓语音阅读,小说下载,古典文学↓ 		一键清除垃圾
↓轻轻一点,清除系统垃圾↓ 		图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码