仿QQ消息红点粘性效果

仿QQ消息红点粘性效果

一、先看效果图。

二、通过观察效果图我们大概可以得到一下几个关键信息：

1、有两个圆形。一个位置固定，一个随着手指移动；
2、固定的一个圆会随着手指距离增大而逐渐减小；
3、连接两个圆形的分别是左右两道曲线；

第一点和第二点应该不存在什么问题，这里我们重点分析一下第三点，要得到这样两条曲线，我们第一时间想到的贝塞尔曲线，效果图中曲线，我们只需要适用二阶贝塞尔曲线就可以实现来。绘制一贝塞尔曲线我们至少需要一个起始点，一个结束点，以及一个控制点。
那么通过得到的这些信息我们可以粗略的画一张图来进行分析，并且得到这些点；

C1-C2是连接两个圆心的一条直线；
C1-A是C1-C2的一条垂直线，并且C1-A为圆C1的半径R；
C1-B和A-B是Y轴和X轴的平行线。
很显然A是我们需要得到的一个点，所以求出AB和C1B的长度我们就可以得到A的坐标。
角DC1C2+角C1C2D=90度；
所以角AC1B=角C1C2D；
假设C1(x1,y1);C2(x2,y2);半径为R
得到公式：AB=R*sin(tan（(y2-y1)/(x2-x1)）);
C1B=R*cos(tan（(y2-y1)/(x2-x1)）);
控制点的话我们就用C1C2的中点吧；
得到如下关键代码

控制点：
float c1x = (mEndCireptX + mCireptX) / 2;
float c1y = (mEndCireptY + mCireptY) / 2;
关键点到圆心的x,y轴距离：
float offsetX = (float) (radius * Math.sin(Math.atan((mCireptY - mEndCireptY) / (mCireptX - mEndCireptX))));
float offsetY = (float) (radius * Math.cos(Math.atan((mCireptY - mEndCireptY) / (mCireptX - mEndCireptX))));

贝塞尔曲线绘制
float x1 = mCireptX - offsetX;
float y1 = mCireptY + offsetY;
float x2 = mEndCireptX - offsetX;
float y2 = mEndCireptY + offsetY;
float x3 = mEndCireptX + offsetX;
float y3 = mEndCireptY - offsetY;
float x4 = mCireptX + offsetX;
float y4 = mCireptY - offsetY;
path = new Path();
path.moveTo(x1, y1);
path.quadTo(c1x, c1y, x2, y2);
path.lineTo(x3, y3);
path.quadTo(c1x, c1y, x4, y4);
path.lineTo(x1, y1);

三、分析完这些以后，接下来就是苦力活了，这里就只说几个大概步骤了，详细代码接下来会把地址发在后面；

1、通过attrs定义View的可定义属性；
2、重写view获取Xml文件设置的属性，绘制两个圆，开始时两个圆是一模一样的。
3、重写onTouchEvent方法，在ACTION_DOWN时获取用户手机点击区域，在ACTION_MOVE移动其中一个圆，在ACTION_UP方法判断圆形消失还是回到原来的位置。
4、以跟随手指移动的那个圆的圆心坐标为基准，计算消息数的位置并绘制。

整个绘制的步骤，就说到这里了，当然这只是实现了这样一个效果，距离具体适用还需要设计一些动画，以及设计一些交互适用的回调什么的。具体实现可以参考github地址：https://github.com/LiRPeng/StickBall