粘性小球LoadingView

参考文章

效果图来源: dribbble

1. 使用贝塞尔曲线绘制圆

---

原图如下:

原图

实现的效果图:

实现效果图

gif做的不好,实际效果可以真机运行下.github地址

---

2016年8月28日更新

• 更新演示gif图
• 动态改变大圆合并小圆时候,绘制贝塞尔曲线的最小距离.让小圆进入大圆,效果更加自然一点.

if (distance < (mMinPathDistance - mCenterDistance / 8))
{
           mIsPath = true;
           mPathDistance = distance;
}

• 没事做,修改了下小球的颜色...

---

大概讲下我的实现思路,从效果看的话,主要要实现三个效果:

1. 小圆的移动绘制
2. 大圆和小圆之间的粘性效果
3. 大圆有个抖动效果和大小变化

首先看第一点,小圆绘制比较简单,就是调用canvas.drawCircle()方法,计算好各个小圆之间的位置就可以.

对于第二点,是这个控件的难点,用过Path的应该知道,android上实现贝塞尔曲线就是用Path来实现的,一开始,我的做法是,用canvas画个大圆,然后用两条二阶贝赛尔曲线,去绘制大圆和小圆之间的粘性效果,QQ的未读消息小红点的拖拽消失,就是用这个思路实现的.但可能是控制点计算有问题之类的,导致绘制出来的效果不太理想,比较生硬.后来,在网上寻找资料时候,刚好看到开头说的那篇博文,文章也是讲的,绘制粘性小球,但它绘制圆的方法,是通过绘制四条三阶贝塞尔曲线去实现的,这也给了我提示,用四条三阶贝塞尔曲线去绘制大圆,能更好的控制圆的展示效果.
最后一点也比较简单,改变大圆的半径值和大圆各个点的位移值,就可以实现,但我自己感觉有点粗糙,等以后看看有什么更好的方法.
总而言之,具体实现可以直接去github看具体代码.

---

TODO

1. 大圆的抖动效果
2. 贝塞尔曲线不够精细