项目地址: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)
详细说明前先介绍下成员变量和一些初始化
成员变量
|
|
初始化
|
|
一、画布旋转及线条变化动画(Canvas Rotate Line Change)
第一步动画涉及到两个动画同时进行,所以使用了AnimatorSet,这个类很强大,可以让N个动画同时进行(playTogether),也可以让N个动画顺序执行(playSequentially)。
说到这里,其实我的四个动画就是顺序进行的,但是每个动画里又有同时进行的动画,为了讲解方便,我是监听了onAnimationEnd来控制动画执行顺序,其实可以直接使用playSequentially。
上方动画就干了两件事:
1、旋转画布,从CANVAS_ROTATE_ANGLE + 0转到CANVAS_ROTATE_ANGLE + 360,CANVAS_ROTATE_ANGLE是画布初始倾斜角度
2、线条长度变化,从mEntireLineLength到-mEntireLineLength。
对应的onDraw方法:
|
|
是不是很机智,drawCRLC做了三件事:
1、画布旋转后又旋转回来
2、画半圆(为什么要画半圆?不画整个圆?这里留个思考题。)
3、画线条
这样动画1就完成了。
二、画布旋转动画(Canvas Rotate)
|
|
有了动画1的底子,那这个就太容易了,只是简单的旋转Canvas。
三、画布旋转圆圈变化动画(Canvas Rotate Circle Change)
|
|
动画3做了两件事:
1、旋转Canvas
2、变化Circle的Y坐标,达到往里缩的效果
四、线条变化动画(Line Change)
|
|
动画4只做了线条的变化。
这样整个Slack的Loading动画就完成了,是不是很简单。
如果有更好的思路,欢迎交流,开源本身就是大家互相喷喷,互相进步嘛,
对各种动画感兴趣的朋友欢迎加群479729938进行交流,
期待各种好看,好玩,实用的动画~