手摸手教你写Slack的Loading动画

最新推荐文章于 2024-09-04 14:53:49 发布
最新推荐文章于 2024-09-04 14:53:49 发布
阅读量511 收藏
点赞数
分类专栏： Android 自定义控件进阶 文章标签： app android

手摸手教你写Slack的Loading动画

项目地址：https://github.com/JeasonWong/SlackLoadingView

老规矩，先上效果。

说下第一眼看到这个动画后的思路：

  • 两根平行线，要用到直线方程 y=kx+b
  • 另外两根平行线，与之前两根平行线的斜率相乘为-1，即k1*k2=-1
  • 线条做圆周运动就是k值的不断变化
  • 然后就是简单的线条长度变化

我相信很多人第一眼会和我有类似的思路，但是当我上了个厕所后意识到我想复杂了~

说下上完厕所后的思路：

  • 不要想着线条是斜的，就是一个普通的线段，一个LineTo搞定（startX和stopX一样，仅Y不同）
  • 线条的垂直更容易，直接Canvas翻转（转过后再转回）
  • 整个动画的圆周运动也是Canvas翻转（转过后不转回）
  • 线条的单度变化依然用属性动画（这是必须的。。）
  • 动画开始前就让整个Canvas旋转

这样一来就太容易了。

我把动画分成了四步：

  • 画布旋转及线条变化动画（Canvas Rotate Line Change）
  • 画布旋转动画（Canvas Rotate）
  • 画布旋转圆圈变化动画（Canvas Rotate Circle Change）
  • 线条变化动画（Line Change）

详细说明前先介绍下成员变量和一些初始化

成员变量

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

//静止状态
private final int STATUS_STILL = 0;
//加载状态
private final int STATUS_LOADING = 1;
//线条最大长度
private final int MAX_LINE_LENGTH = dp2px(getContext(), 120);
//线条最短长度
private final int MIN_LINE_LENGTH = dp2px(getContext(), 40);
//最大间隔时长
private final int MAX_DURATION = 3000;
//最小间隔时长
private final int MIN_DURATION = 500;

private Paint mPaint;
private int[] mColors = new int[]{0xB07ECBDA, 0xB0E6A92C, 0xB0D6014D, 0xB05ABA94};
private int mWidth, mHeight;
//动画间隔时长
private int mDuration = MIN_DURATION;
//线条总长度
private int mEntireLineLength = MIN_LINE_LENGTH;
//圆半径
private int mCircleRadius;
//所有动画
private List<Animator> mAnimList = new ArrayList<>();
//Canvas起始旋转角度
private final int CANVAS_ROTATE_ANGLE = 60;
//动画当前状态
private int mStatus = STATUS_STILL;
//Canvas旋转角度
private int mCanvasAngle;
//线条长度
private float mLineLength;
//半圆Y轴位置
private float mCircleY;
//第几部动画
private int mStep;

初始化

1
2
3
4
5
6
7
8
9
10
11
12
13

private void initView() {
    mPaint = new Paint();
    mPaint.setAntiAlias(true);
    mPaint.setColor(mColors[0]);
}

private void initData() {
    mCanvasAngle = CANVAS_ROTATE_ANGLE;
    mLineLength = mEntireLineLength;
    mCircleRadius = mEntireLineLength / 5;
    mPaint.setStrokeWidth(mCircleRadius * 2);
    mStep = 0;
}

一、画布旋转及线条变化动画（Canvas Rotate Line Change）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

/**
 * Animation1
 * 动画1
 * Canvas Rotate Line Change
 * 画布旋转及线条变化动画
 */
private void startCRLCAnim() {

    Collection<Animator> animList = new ArrayList<>();

    ValueAnimator canvasRotateAnim = ValueAnimator.ofInt(CANVAS_ROTATE_ANGLE + 0, CANVAS_ROTATE_ANGLE + 360);
    canvasRotateAnim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
        @Override
        public void onAnimationUpdate(ValueAnimator animation) {
            mCanvasAngle = (int) animation.getAnimatedValue();
        }
    });

    animList.add(canvasRotateAnim);

    ValueAnimator lineWidthAnim = ValueAnimator.ofFloat(mEntireLineLength, -mEntireLineLength);
    lineWidthAnim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
        @Override
        public void onAnimationUpdate(ValueAnimator animation) {
            mLineLength = (float) animation.getAnimatedValue();
            invalidate();
        }
    });

    animList.add(lineWidthAnim);

    AnimatorSet animationSet = new AnimatorSet();
    animationSet.setDuration(mDuration);
    animationSet.playTogether(animList);
    animationSet.setInterpolator(new LinearInterpolator());
    animationSet.addListener(new AnimatorListener() {
        @Override
        public void onAnimationEnd(Animator animation) {
            Log.d("@=>", "动画1结束");
            if (mStatus == STATUS_LOADING) {
                mStep++;
                startCRAnim();
            }
        }
    });
    animationSet.start();

    mAnimList.add(animationSet);
}

第一步动画涉及到两个动画同时进行，所以使用了AnimatorSet，这个类很强大，可以让N个动画同时进行（playTogether），也可以让N个动画顺序执行（playSequentially）。

说到这里，其实我的四个动画就是顺序进行的，但是每个动画里又有同时进行的动画，为了讲解方便，我是监听了onAnimationEnd来控制动画执行顺序，其实可以直接使用playSequentially。

上方动画就干了两件事：

1、旋转画布，从CANVAS_ROTATE_ANGLE + 0转到CANVAS_ROTATE_ANGLE + 360，CANVAS_ROTATE_ANGLE是画布初始倾斜角度

2、线条长度变化，从mEntireLineLength到-mEntireLineLength。

对应的onDraw方法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25


@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    switch (mStep % 4) {
        case 0:
            for (int i = 0; i < mColors.length; i++) {
                mPaint.setColor(mColors[i]);
                drawCRLC(canvas, mWidth / 2 - mEntireLineLength / 2.2f, mHeight / 2 - mLineLength, mWidth / 2 - mEntireLineLength / 2.2f, mHeight / 2 + mEntireLineLength, mPaint, mCanvasAngle + i * 90);
            }
            break;
        ...
    }

}

...

private void drawCRLC(Canvas canvas, float startX, float startY, float stopX, float stopY, @NonNull Paint paint, int rotate) {
    canvas.rotate(rotate, mWidth / 2, mHeight / 2);
    canvas.drawArc(new RectF(startX - mCircleRadius, startY - mCircleRadius, startX + mCircleRadius, startY + mCircleRadius), 180, 180, true, mPaint);
    canvas.drawLine(startX, startY, stopX, stopY, paint);
    canvas.drawArc(new RectF(stopX - mCircleRadius, stopY - mCircleRadius, stopX + mCircleRadius, stopY + mCircleRadius), 0, 180, true, mPaint);
    canvas.rotate(-rotate, mWidth / 2, mHeight / 2);
}

是不是很机智，drawCRLC做了三件事：

1、画布旋转后又旋转回来

2、画半圆（为什么要画半圆？不画整个圆？这里留个思考题。）

3、画线条

这样动画1就完成了。

二、画布旋转动画（Canvas Rotate）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

/**
 * Animation2
 * 动画2
 * Canvas Rotate
 * 画布旋转动画
 */
private void startCRAnim() {
    ValueAnimator canvasRotateAnim = ValueAnimator.ofInt(mCanvasAngle, mCanvasAngle + 180);
    canvasRotateAnim.setDuration(mDuration / 2);
    canvasRotateAnim.setInterpolator(new LinearInterpolator());
    canvasRotateAnim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
        @Override
        public void onAnimationUpdate(ValueAnimator animation) {
            mCanvasAngle = (int) animation.getAnimatedValue();
            invalidate();
        }
    });
    canvasRotateAnim.addListener(new AnimatorListener() {
        @Override
        public void onAnimationEnd(Animator animation) {
            Log.d("@=>", "动画2结束");
            if (mStatus == STATUS_LOADING) {
                mStep++;
                startCRCCAnim();
            }
        }
    });
    canvasRotateAnim.start();

    mAnimList.add(canvasRotateAnim);
}

...

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    switch (mStep % 4) {
        ...
        case 1:
            for (int i = 0; i < mColors.length; i++) {
                mPaint.setColor(mColors[i]);
                drawCR(canvas, mWidth / 2 - mEntireLineLength / 2.2f, mHeight / 2 + mEntireLineLength, mPaint, mCanvasAngle + i * 90);
            }
            break;
        ...
    }

}

...

private void drawCR(Canvas canvas, float x, float y, @NonNull Paint paint, int rotate) {
    canvas.rotate(rotate, mWidth / 2, mHeight / 2);
    canvas.drawCircle(x, y, mCircleRadius, paint);
    canvas.rotate(-rotate, mWidth / 2, mHeight / 2);
}

有了动画1的底子，那这个就太容易了，只是简单的旋转Canvas。

三、画布旋转圆圈变化动画（Canvas Rotate Circle Change）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74

/**
 * Animation3
 * 动画3
 * Canvas Rotate Circle Change
 * 画布旋转圆圈变化动画
 */
private void startCRCCAnim() {
    Collection<Animator> animList = new ArrayList<>();

    ValueAnimator canvasRotateAnim = ValueAnimator.ofInt(mCanvasAngle, mCanvasAngle + 90, mCanvasAngle + 180);
    canvasRotateAnim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
        @Override
        public void onAnimationUpdate(ValueAnimator animation) {
            mCanvasAngle = (int) animation.getAnimatedValue();
        }
    });

    animList.add(canvasRotateAnim);

    ValueAnimator circleYAnim = ValueAnimator.ofFloat(mEntireLineLength, mEntireLineLength / 4, mEntireLineLength);
    circleYAnim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
        @Override
        public void onAnimationUpdate(ValueAnimator animation) {
            mCircleY = (float) animation.getAnimatedValue();
            invalidate();
        }
    });

    animList.add(circleYAnim);

    AnimatorSet animationSet = new AnimatorSet();
    animationSet.setDuration(mDuration);
    animationSet.playTogether(animList);
    animationSet.setInterpolator(new LinearInterpolator());
    animationSet.addListener(new AnimatorListener() {
        @Override
        public void onAnimationEnd(Animator animation) {
            Log.d("@=>", "动画3结束");
            if (mStatus == STATUS_LOADING) {
                mStep++;
                startLCAnim();
            }
        }
    });
    animationSet.start();

    mAnimList.add(animationSet);
}

...

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    switch (mStep % 4) {
        ...
        case 2:
            for (int i = 0; i < mColors.length; i++) {
                mPaint.setColor(mColors[i]);
                drawCRCC(canvas, mWidth / 2 - mEntireLineLength / 2.2f, mHeight / 2 + mCircleY, mPaint, mCanvasAngle + i * 90);
            }
            break;
        ...
    }

}

...

private void drawCRCC(Canvas canvas, float x, float y, @NonNull Paint paint, int rotate) {
    canvas.rotate(rotate, mWidth / 2, mHeight / 2);
    canvas.drawCircle(x, y, mCircleRadius, paint);
    canvas.rotate(-rotate, mWidth / 2, mHeight / 2);
}

动画3做了两件事：

1、旋转Canvas

2、变化Circle的Y坐标，达到往里缩的效果

四、线条变化动画（Line Change）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58

/**
 * Animation4
 * 动画4
 * Line Change
 * 线条变化动画
 */
private void startLCAnim() {
    ValueAnimator lineWidthAnim = ValueAnimator.ofFloat(mEntireLineLength, -mEntireLineLength);
    lineWidthAnim.setDuration(mDuration);
    lineWidthAnim.setInterpolator(new LinearInterpolator());
    lineWidthAnim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
        @Override
        public void onAnimationUpdate(ValueAnimator animation) {
            mLineLength = (float) animation.getAnimatedValue();
            invalidate();
        }
    });
    lineWidthAnim.addListener(new AnimatorListener() {
        @Override
        public void onAnimationEnd(Animator animation) {
            Log.d("@=>", "动画4结束");
            if (mStatus == STATUS_LOADING) {
                mStep++;
                startCRLCAnim();
            }
        }
    });
    lineWidthAnim.start();

    mAnimList.add(lineWidthAnim);
}

...

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    switch (mStep % 4) {
        ...
        case 3:
            for (int i = 0; i < mColors.length; i++) {
                mPaint.setColor(mColors[i]);
                drawLC(canvas, mWidth / 2 - mEntireLineLength / 2.2f, mHeight / 2 + mEntireLineLength, mWidth / 2 - mEntireLineLength / 2.2f, mHeight / 2 + mLineLength, mPaint, mCanvasAngle + i * 90);
            }
            break;
    }

}

...

private void drawLC(Canvas canvas, float startX, float startY, float stopX, float stopY, @NonNull Paint paint, int rotate) {
    canvas.rotate(rotate, mWidth / 2, mHeight / 2);
    canvas.drawArc(new RectF(startX - mCircleRadius, startY - mCircleRadius, startX + mCircleRadius, startY + mCircleRadius), 0, 180, true, mPaint);
    canvas.drawLine(startX, startY, stopX, stopY, paint);
    canvas.drawArc(new RectF(stopX - mCircleRadius, stopY - mCircleRadius, stopX + mCircleRadius, stopY + mCircleRadius), 180, 180, true, mPaint);
    canvas.rotate(-rotate, mWidth / 2, mHeight / 2);
}

动画4只做了线条的变化。

这样整个Slack的Loading动画就完成了，是不是很简单。


Wei_Leng
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Android代码-仿Slack的Loading动画
08-06
What's SlackLoadingView ? Imitate Slack loading animation. Demo Article 手摸手教你写Slack的Loading动画 Build Step 1 repositories { maven { url 'https://dl.bintray.com/wangyuwei/maven' } } Step 2 compile 'me.wangyuwei:SlackLoadingView:1.0.1' License Copyright [2016] [JeasonWong of copyright owner] Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.
iOS动画进阶 - 手摸手教你写 Slack 的 Loading 动画
W_C__L的博客
09-08 6708
如果移动端访问不佳，可以访问我的个人博客 前几天看了一篇关于动画的博客叫手摸手教你写 Slack 的 Loading 动画，看着挺炫，但是是安卓版的，寻思的着仿造着写一篇iOS版的，下面是我写这个动画的分解~ 老规矩先上图和demo地址：刚看到这个动画的时候，脑海里出现了两个方案，一种是通过drawRect画出来，然后配合CADisplayLink不停的绘制线的样式；第二种是通过CAShapeL
Android代码-水漫效果的 loading 动画
08-06
CircularFillableLoaders This is an Android project allowing to realize a beautiful circular fillable loaders to be used for splashscreen for example. USAGE To make a circular fillable loaders add CircularFillableLoaders in your layout XML and add CircularFillableLoaders library in your project or you can also grab it via Gradle: implementation 'com.mikhaellopez:circularfillableloaders:1.3.2' XML You must use the following properties in your XML to change your CircularFillableLoaders.
iOS动画进阶 - 教你写 Slack 的 Loading 动画
hbblzjy的博客
09-13 788
（转载自：http://blog.csdn.net/wang631106979/article/details/52473985）如果移动端访问不佳，可以访问我的个人博客 前几天看了一篇关于动画的博客叫手摸手教你写 Slack 的 Loading 动画，看着挺炫，但是是安卓版的，寻思的着仿造着写一篇iOS版的，下面是我写这个动画的分解~老规矩先上图和demo地址：刚看到这个动画的时候，脑海里出现
Android-UI控件
weixin_33670713的博客
01-12 161
手摸手教你写 Slack 的 Loading 动画 四步实现：画布旋转及线条变化动画（Canvas Rotate Line Change）画布旋转动画（Canvas Rotate）画布旋转圆圈变化动画（Canvas Rotate Circle Change）线条变化动画（Line Change） 自定义 View—风车的绘制和动画 仿华为...
fir.im Weekly - 可能是 iOS 审核最全面的解决方案
weixin_33694620的博客
08-29 144
2019独角兽企业重金招聘Python工程师标准>>> ...
史上最全Android开发中100%会用到的开源框架整理（1/5）
weixin_34413103的博客
08-09 232
其实这个开源框架整理很久了，只是一直放在有道云笔记里面，笔者还有很多写得文章都放在有道云笔记里面，有时间都好好整理一下放出来，本篇文章也会不定期更新，由于整理的开源框架分类都有200多个，所有这次只将1/5的整理出来，后面也会有一篇整理github上比较知名的开源App,敬请期待吧，也希望大家多多关注我。 UI部分 RealtimeBlurView 透明毛玻璃效果 BGASwipeBac...
Android代码-一款Loading动画的实现思路
08-06
一款Loading动画的实现思路 这是原版动画 这是我简化后的实现 实现思路 一款Loading动画的实现思路（一） 一款Loading动画的实现思路（二） 一款Loading动画的实现思路（三) 一款Loading动画的实现思路（四·完结篇） Loading动画外篇·圆的不规则变形
安卓14(小米HyperOS)APP中修改用户头像时，APP闪退的问题（报错 ”Mutation of _data is not allowed.“）
一个AR程序猿的博客
09-02 531
安卓14(小米HyperOS)APP中修改用户头像时，APP闪退的问题java.lang.IllegalArgumentException: Mutation of _data is not allowed.
Android中AsyncTask的基本用法
m0_63526467的博客
08-31 775
Android中AsyncTask的基本用法
RK3566/RK3568 Android 11 动态显示/隐藏导航栏
qq_23921815的博客
08-30 380
在系统服务中增加显示/隐藏导航栏方法，在上层app动态调用显示/隐藏导航栏方法，设备关机和重启后也能继续生效。
RK3566/RK3568 Android 11 动态禁止/启用APP
最新发布
qq_23921815的博客
09-04 266
RK3566/RK3568 Android 11 定制大全在系统服务中增加动态禁止/启用应用。
MySQL 使用C语言链接
JK01WYX的博客
09-02 1863
mysql_get_client_info() ; msql_real_connect() ; mysql_query() ; mysql_store_result() ; mysql_num_rows() ; mysql_num_fields() ; mysql_fetch_fields() ; mysql_fetch_fields() ; mysql_close()
不小心删除了 Android 手机上的短信？3 步流程恢复误删除的短信以及图片、视频、联系人
Geeker55的博客
09-03 1584
不小心删除了 Android 手机上的短信？别担心，Android 版奇客数据恢复工具可以帮助您通过简单的 3 步流程恢复已删除的短信以及图片、视频、联系人等。如何在 Android 上恢复已删除的短信不小心删除了 Android 手机上的短信？Android 版奇客数据恢复只需 3 步即可帮助您恢复已删除的短信以及照片、视频、联系人等。最近，我发现很多安卓用户在互联网论坛上寻求帮助，以恢复他们已删除的短信。对于一些从未丢失过手机短信的人来说，很难想象一个人会如何删除他想保留的短信。
手把手教你实现Slack Loading动画
"该资源是一个教程，旨在指导读者如何创建类似Slack的Loading动画，通过GitHub项目分享了实现代码，并提供了详细的实现思路和步骤。教程作者指出，原本看似复杂的动画其实可以通过简化思路，利用Canvas的翻转和线条...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值