作者：祥子
链接：https://www.zhihu.com/question/37231903/answer/139438769
来源：知乎
这个效果就是贝塞尔曲线的一种应用，这里我就用安卓代码实现一下。
我们把这个东西的效果拆解一下
A,B是两个圆形，AB之间是一个由abcd四条path围成的动态的C区域，其中bd两条贝塞尔曲线有公有控制点e，e是ac圆心之差/2；
核心逻辑：一开始的时候 ，A,B的圆心是重合的，随着A,B距离增加，A的直径变小，带来C区域视觉上的拉长，到达一定距离后，B随着一段帧动画消失，A的直径变为0消失；
首先，自定义一个View后，建立核心参数：
第一步:计算获得两个圆心之间的动态距离distance,并通过距离来控制A圆的大小；
第二步：求取贝塞尔曲线控制点e的动态坐标与1，2，3，4四点动态坐标：
1、获得A,B圆之间的偏移量
2、有了偏移量就可以求出圆心两点斜率了
有了斜率，圆心坐标和直径，就可以通过计算获得1，2，3，4 四个点的动态实时坐标；
第三步：现在核心参数都已经计算获得，就可以用画笔画出中间C图形的path了，path由3→4→2→1顺序画出；
第四步：所有部件都准备好，现在只要写出onTouchEvent中的逻辑；
1、ACTION_DOWN按下时
2，ACTION_MOVE手指移动时
3，ACTION_CANCEL抬起手指时
OK。完成，运行一下看看效果
完成
源码我放在百度云盘了,
说实话,像这种漂亮的小控件,做出来不是很难,难的是创意,想出这个idea的设计师才是宝贝。
希望今天的文章你能喜欢。
私信我可获取更多有关安卓开发的资料！
网友评论