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

Android自定义view之线条等待动画(灵感来源:金铲铲之战)_计蒙不吃鱼的博客

11 人参与  2021年08月30日 07:03  分类 : 《关注互联网》  评论

点击全文阅读


系列文章目录

Android自定义view之线条等待动画(灵感来源:金铲铲之战)


文章最后有源码

文章目录

  • 系列文章目录
  • 前言
  • 一、实现
    • 1. 测量,定义测量最小长度
    • 2.绘制线条
    • 3.动画实现
  • 源码


前言

又快要毕业了,最近在学人脸识别方面的东西,想写Android方面的博客又没有灵感,昨天同学给博主发课表的时候,邀博主一起玩这款游戏,博主对游戏中的等待动画线条的效果比较感兴趣,于是写一篇类似的效果。


游戏中的效果:
请添加图片描述

模仿的效果

请添加图片描述

一、实现

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

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

 minwidth = useWidth / 10;

2.绘制线条

初始化画笔:

    private void initPaint() {
        mPaint = new Paint();        //创建画笔对象
        mPaint.setColor(Color.BLACK);    //设置画笔颜色
        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setStrokeWidth(4f);     //设置画笔宽度为10px
        mPaint.setAntiAlias(true);     //设置抗锯齿
        mPaint.setAlpha(255);        //设置画笔透明度
    }

第一部分线条:

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

效果:
请添加图片描述

3.动画实现

借助四个变量

    private boolean viewContinue=true,viewContinue1=true;
    private float mSweep,mSweep1;

第一部分动画逻辑

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

效果图:
请添加图片描述

记得刷新view

  invalidate();

源码

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() {
        initPaint();
    }


    /**
     * 初始化画笔
     */
    private void initPaint() {
        mPaint = new Paint();        //创建画笔对象
        mPaint.setColor(Color.BLACK);    //设置画笔颜色
        mPaint.setStyle(Paint.Style.STROKE);
        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;
        }

    }

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

        //刷新View
        invalidate();
    }
}


点击全文阅读


本文链接:http://m.zhangshiyu.com/post/26531.html

画笔  设置  线条  
<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

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

最新文章

  • 家宴过后,我捉奸了庶妹和我老公无广告_庶妹老公侍卫TOP10_小说后续在线阅读_无删减免费完结_
  • 寝室六个人,她们背着我建五人群必读文_太天真申请书冷笑最新阅读_小说后续在线阅读_无删减免费完结_
  • 开局获得狐仙传承结局+番外_江帆赵雪隐藏剧情_小说后续在线阅读_无删减免费完结_
  • 刀锈春根生,白骨犹温完结全文_卫舟棠棠知意一口气完结_小说后续在线阅读_无删减免费完结_
  • 夫君立筷子定我灾星罪名,我改嫁冷宫皇子后他追悔莫及好评_赵荀孟如安青瑶精心编著_小说后续在线阅读_无删减免费完结_
  • 邻居低素质,而我没素质独家番外_老太太赖皮欣欣超长版_小说后续在线阅读_无删减免费完结_
  • 重生后我转嫁首富瘸腿独子,总裁前夫却疯了一口气看完_妹妹傅云琛沈明辉独家番外_小说后续在线阅读_无删减免费完结_
  • 我拒绝给系花捐款后,全系同学悔疯了在线阅读_小说后续在线阅读_无删减免费完结_
  • 我让位给女友的透视眼竹马,他却说如果能重生再也不来了。虐心反转_玉石林若女友推荐_小说后续在线阅读_无删减免费完结_
  • 相国独子的丫鬟砸坏我的玉佩后,我当场拒婚阅读_玉佩陈郡谢氏全新_小说后续在线阅读_无删减免费完结_
  • 手术时,我看着病人惨死最新试读_淼淼陆知衍姜颜全本完结_小说后续在线阅读_无删减免费完结_
  • 男友霸道给我开黑卡,转头却骂我是捞女最新章节_肖年顾客黑卡热文_小说后续在线阅读_无删减免费完结_

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

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