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

举报
计蒙不吃鱼 发表于 2025/06/09 01:01:10 2025/06/09
【摘要】 本文通过将布局分为10份,利用`onSizeChanged`测量最小长度,并借助画笔绘制动态线条,实现渐变伸缩效果。动画逻辑通过四个变量控制线条的增长与回退,最终形成流畅的等待动画。代码中详细展示了画笔初始化、线条绘制及动画更新的核心步骤,并提供完整源码供参考。此动画适用于加载场景,提升用户体验。

系列文章目录

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

文章最后有源码

前言

又快要毕业了,最近在学人脸识别方面的东西,想写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();
    }
}

【声明】本内容来自华为云开发者社区博主,不代表华为云及华为云开发者社区的观点和立场。转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息,否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。