项目地址:https://github.com/JeasonWong/SlackLoadingView
老规矩,先上效果。
说下第一眼看到这个动画后的思路:
- 两根平行线,要用到直线方程 y=kx+b
- 另外两根平行线,与之前两根平行线的斜率相乘为-1,即k1*k2=-1
- 线条做圆周运动就是k值的不断变化
- 然后就是简单的线条长度变化
我相信很多人第一眼会和我有类似的思路,但是当我上了个厕所后意识到我想复杂了~
说下上完厕所后的思路:
- 不要想着线条是斜的,就是一个普通的线段,一个LineTo搞定(startX和stopX一样,仅Y不同)
- 线条的垂直更容易,直接Canvas翻转(转过后再转回)
- 整个动画的圆周运动也是Canvas翻转(转过后不转回)
- 线条的单度变化依然用属性动画(这是必须的。。)
- 动画开始前就让整个Canvas旋转
这样一来就太容易了。