粘性小球LoadingView

原文链接:http://www.jianshu.com/p/4a022f9bb121  

参考文章
效果图来源: 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. 贝塞尔曲线不够精细

文/奋斗的Leo(简书作者)