参考文章
效果图来源: dribbble
原图如下:
原图
实现的效果图:
实现效果图
gif做的不好,实际效果可以真机运行下.github地址
2016年8月28日更新
- 更新演示gif图
- 动态改变大圆合并小圆时候,绘制贝塞尔曲线的最小距离.让小圆进入大圆,效果更加自然一点.
if (distance < (mMinPathDistance - mCenterDistance / 8))
{
mIsPath = true;
mPathDistance = distance;
}
- 没事做,修改了下小球的颜色...
大概讲下我的实现思路,从效果看的话,主要要实现三个效果:
- 小圆的移动绘制
- 大圆和小圆之间的粘性效果
- 大圆有个抖动效果和大小变化
首先看第一点,小圆绘制比较简单,就是调用canvas.drawCircle()方法,计算好各个小圆之间的位置就可以.
对于第二点,是这个控件的难点,用过Path的应该知道,android上实现贝塞尔曲线就是用Path来实现的,一开始,我的做法是,用canvas画个大圆,然后用两条二阶贝赛尔曲线,去绘制大圆和小圆之间的粘性效果,QQ的未读消息小红点的拖拽消失,就是用这个思路实现的.但可能是控制点计算有问题之类的,导致绘制出来的效果不太理想,比较生硬.后来,在网上寻找资料时候,刚好看到开头说的那篇博文,文章也是讲的,绘制粘性小球,但它绘制圆的方法,是通过绘制四条三阶贝塞尔曲线去实现的,这也给了我提示,用四条三阶贝塞尔曲线去绘制大圆,能更好的控制圆的展示效果.
最后一点也比较简单,改变大圆的半径值和大圆各个点的位移值,就可以实现,但我自己感觉有点粗糙,等以后看看有什么更好的方法.
总而言之,具体实现可以直接去github看具体代码.
TODO
大圆的抖动效果- 贝塞尔曲线不够精细
