偶然间发现QQ的消息挺好玩的，应用内收到新消息，红色的提醒圆圈可以拉伸并拖动。很有意思，决定自己试一下。
先上效果图：
效果.gif
接下来，我们一步一步来实现之。
我们在拖动过程中，已知哪些信息：
初始的半圆心位置A，半径R。
接下来我们可以通过用户触摸的位置获取以下信息：
拖动的半圆形位置B。
（注：并不是触摸的点就是新的圆点，需要进行加工。开始触摸的点为Touch，触摸变化的点为Touch'，新的圆点为A＋(Touch'-Touch)）。
我们根据当前拖动的距离与最大拖动距离进行求比率，再乘以初始半径R得到拖动半径R'。
我们先取一个中间状态来分析一下：
分析图
我们在拖动时，小球会被分为两个部分，两个半圆圆心的连线与水平线的夹角为α。
最关键的一步是：计算出α的值。
根据同角的余角相等，以及三角函数能的到：
sinα = (B.x-A.x) / AB的长度
然后通过反正弦函数，可以得到角α的值。
（注：虽然使用正切函数在数值计算时很方便，但是反正切函数在0位置会发生突变，无法满足我们拖动时渐变的效果，故舍弃。数学不行，在这个坑里困了好久。。）
计算出角α就能开始绘图了。
我们一一计算出图中M、N、P、Q四个点的坐标，然后开始操作：
1 从M点开始，A为圆心，N为终点，绘制半圆。（使用α角）
2 从N点开始，P点为终点，绘制贝塞尔曲线。
3 从P点开始，B为圆心，Q为终点，绘制半圆。（使用α角）
4 从Q点开始，M点为终点，绘制贝塞尔曲线。
绘制时，会发现步骤2和4的控制点不好确定，但是如果不确定的话，没法绘制。如果使用两个圆心的中点为控制点，会发现初始拖动时两个半圆中间缝隙很大，不够平滑。
此时我们精简一下模型，看下部的图：
C是AB中点，过C点作MN的平行线。
NP的控制点位于C点的右上侧。
MQ的控制点位于C点点左下侧。
两个控制点是根据拖动的距离变化的。取极限即可得到两个点对应的一次比率关系。
这样就能够完成步骤2和4了。
此时我们就完成了拖动时的效果了。
- (void)updateCircleWithOriginCenter:(CGPoint)originCenter withNewCenter:(CGPoint)newCenter
{
//拖拽的距离，等于两个圆心的距离
double moveDistance = (double)sqrt((newCenter.y-originCenter.y)*(newCenter.y-originCenter.y) + (newCenter.x-originCenter.x)*(newCenter.x-originCenter.x));
if (moveDistance == 0) {
return;
}
//移动的水平角度（两圆心连线与水平面夹角）
//反正切函数很方便，但因为反正切函数在0的位置突变，从-M_PI/2变为 M_PI/2，无法满足我们拖动时的渐变需求，故舍弃。我们使用反正弦函数。
//正弦函数＝对边／斜边 两个圆心之间的连线为斜边，对边是Y轴的垂直距离
double sinValue = (double)(newCenter.y-originCenter.y)/(double)sqrt((newCenter.y-originCenter.y)*(newCenter.y-originCenter.y) + (newCenter.x-originCenter.x)*(newCenter.x-originCenter.x));
//获取弧度
double angle = asin(sinValue);
double rate = moveDistance/self.pullDis;
if (rate >= 1) {
rate = 1;
//如果拖拽结束了，那就不做操作，否则会死循环。因为拖拽结束，会进行恢复绘制，恢复绘制方法中会调用本方法，然后本方法再调用恢复绘制方法。。。
if (self.isEnding) {
return;
}
//达到最大值，断开
self.isEnding = YES;
//如果有回调，则触发
if (self.pullBlock) {
self.pullBlock();
}
if (self.needAnimation) {
//将原始位置的圆进行恢复绘制，就是把原始位置的小圆拉过来。在手指触摸的位置合二为一
[self backCircleWithTotal:100 withCurrent:0 withTotalTime:0.05 withOriginCenter:newCenter withEndCenter:originCenter];
}else{
//拉伸到最大值时，如果不需要动画，且是用户设置的类型，那么隐藏layer
if (self.circleType == CircleTypeSet) {
self.isSetMaxValue = YES;
[self resetOriginCircle];
self.pointLayer.hidden = YES;
}
}
//如果有文本，隐藏文本
if (self.contentString) {
self.contentTextLayer.hidden = YES;
}
return;
}
CGFloat bigCircleRate = self.bigChangeRate > 0 ? self.bigChangeRate:1/3;
CGFloat smallCircleRate = self.smallChangeRate > 0 ? self.smallChangeRate:1;
//新的半径
CGFloat newRadius = 0;
switch (self.pullType) {
case PullTypeLeaveBig:
{
//如果是拉到最大值，结束绘制，合二为一的过程，那么起始圆和目标圆半径互换
//比如说：大半径留在原地，小半径被拖拽走的这种情况
//当我向外拉的时候：拖动的圆半径较小，小圆移动
//当我未拉到最大值，小圆回去，小圆移动
//当我拉到最大值，大圆向小圆合并。大圆移动
if (self.isEnding) {
self.circleR = self.originR*((1-rate*smallCircleRate)>self.minRate?(1-rate*smallCircleRate):self.minRate);
newRadius = self.originR*((1-rate*bigCircleRate)>self.minRate?(1-rate*bigCircleRate):self.minRate);
}else{
newRadius = self.originR*((1-rate*smallCircleRate)>self.minRate?(1-rate*smallCircleRate):self.minRate);
self.circleR = self.originR*((1-rate*bigCircleRate)>self.minRate?(1-rate*bigCircleRate):self.minRate);
}
}
break;
case PullTypeMoveBig:
{
if (self.isEnding) {
newRadius = self.originR*((1-rate*smallCircleRate)>self.minRate?(1-rate*smallCircleRate):self.minRate);
self.circleR = self.originR*((1-rate*bigCircleRate)>self.minRate?(1-rate*bigCircleRate):self.minRate);
}else{
self.circleR = self.originR*((1-rate*smallCircleRate)>self.minRate?(1-rate*smallCircleRate):self.minRate);
newRadius = self.originR*((1-rate*bigCircleRate)>self.minRate?(1-rate*bigCircleRate):self.minRate);
}
}
break;
default:
break;
}
//创建新的BezierPath
UIBezierPath *path = [UIBezierPath bezierPath];
if (newCenter.x-originCenter.x < 0) {
//圆的中心对称轴，左侧与右侧的计算不一样
//初始圆的底部的点
CGPoint originBottomPoint = CGPointMake(originCenter.x+sin(angle)*self.circleR, originCenter.y+cos(angle)*self.circleR);
//初始圆的顶部的点
CGPoint originTopPoint = CGPointMake(originCenter.x-sin(angle)*self.circleR, originCenter.y-cos(angle)*self.circleR);
//新圆心的左上角的点
CGPoint newTopPoint = CGPointMake(newCenter.x-sin(angle)*newRadius, newCenter.y-cos(angle)*newRadius);
//新圆心的下部的点
CGPoint newBottomPoint = CGPointMake(newCenter.x+sin(angle)*newRadius, newCenter.y+cos(angle)*newRadius);
//两圆心连线中点
CGPoint controlPoint = CGPointMake(originCenter.x+(newCenter.x-originCenter.x)/2, originCenter.y+(newCenter.y-originCenter.y)/2);
//初始圆顶部点与新圆的顶部点连线的中点
CGPoint topMiddlePoint = CGPointMake((newTopPoint.x+originTopPoint.x)/2, (newTopPoint.y+originTopPoint.y)/2);
//上部控制点的X坐标，与拉伸比例有关，未拉伸时，取顶部点连线中点，拉伸最大时，取两圆心连线中点
CGFloat topX = topMiddlePoint.x + (controlPoint.x-topMiddlePoint.x)*rate;
//上部控制点的Y坐标，与拉伸比例有关
CGFloat topY = topMiddlePoint.y + (controlPoint.y-topMiddlePoint.y)*rate;
//拉伸时，上部的控制点。不断变化的
CGPoint topControlPoint = CGPointMake(topX, topY);
//两个圆下部点连线的中点
CGPoint bottomMiddlePoint = CGPointMake((newBottomPoint.x+originBottomPoint.x)/2, (newBottomPoint.y+originBottomPoint.y)/2);
//下部点的x，随比例变化
CGFloat bottomX = bottomMiddlePoint.x + (controlPoint.x-bottomMiddlePoint.x)*rate;
//下部点的y，随比例变化
CGFloat bottomY = bottomMiddlePoint.y + (controlPoint.y-bottomMiddlePoint.y)*rate;
//拉伸时，下部控制点
CGPoint bottomControlPoint = CGPointMake(bottomX, bottomY);
//移动到初始圆的下部点
[path moveToPoint:originBottomPoint];
//原始的圆，右半侧，逆时针画圆
[path addArcWithCenter:originCenter radius:self.circleR startAngle:M_PI/2-angle endAngle:M_PI*3/2-angle clockwise:NO];
//从原始圆的顶部，连线到新圆的顶部，上部点为控制点
[path addQuadCurveToPoint:newTopPoint controlPoint:topControlPoint];
//新圆的左侧，逆时针画圆
[path addArcWithCenter:newCenter radius:newRadius startAngle:M_PI*3/2-angle endAngle:M_PI*5/2-angle clockwise:NO];
//从新圆的底部，连接到初始圆的底部点，下部点为控制点
[path addQuadCurveToPoint:originBottomPoint controlPoint:bottomControlPoint];
}else{
//初始圆的下部点
CGPoint originBottomPoint = CGPointMake(originCenter.x-sin(angle)*self.circleR, originCenter.y+cos(angle)*self.circleR);
CGPoint originTopPoint = CGPointMake(originCenter.x+sin(angle)*self.circleR, originCenter.y-cos(angle)*self.circleR);
//新圆心的左上角的点
CGPoint newTopPoint = CGPointMake(newCenter.x+sin(angle)*newRadius, newCenter.y-cos(angle)*newRadius);
CGPoint newBottomPoint = CGPointMake(newCenter.x-sin(angle)*newRadius, newCenter.y+cos(angle)*newRadius);
//两圆心连线中点
CGPoint controlPoint = CGPointMake(originCenter.x+(newCenter.x-originCenter.x)/2, originCenter.y+(newCenter.y-originCenter.y)/2);
//初始圆顶部点与新圆的顶部点连线的中点
CGPoint topMiddlePoint = CGPointMake((newTopPoint.x+originTopPoint.x)/2, (newTopPoint.y+originTopPoint.y)/2);
//上部控制点的X坐标，与拉伸比例有关，未拉伸时，取顶部点连线中点，拉伸最大时，取两圆心连线中点
CGFloat topX = topMiddlePoint.x + (controlPoint.x-topMiddlePoint.x)*rate;
//上部控制点的Y坐标，与拉伸比例有关
CGFloat topY = topMiddlePoint.y + (controlPoint.y-topMiddlePoint.y)*rate;
//拉伸时，上部的控制点。不断变化的
CGPoint topControlPoint = CGPointMake(topX, topY);
//两个圆下部点连线的中点
CGPoint bottomMiddlePoint = CGPointMake((newBottomPoint.x+originBottomPoint.x)/2, (newBottomPoint.y+originBottomPoint.y)/2);
//下部点的x，随比例变化
CGFloat bottomX = bottomMiddlePoint.x + (controlPoint.x-bottomMiddlePoint.x)*rate;
//下部点的y，随比例变化
CGFloat bottomY = bottomMiddlePoint.y + (controlPoint.y-bottomMiddlePoint.y)*rate;
//拉伸时，下部控制点
CGPoint bottomControlPoint = CGPointMake(bottomX, bottomY);
[path moveToPoint:originBottomPoint];
//原始的圆，左半侧，顺时针画圆
[path addArcWithCenter:originCenter radius:self.circleR startAngle:M_PI/2+angle endAngle:M_PI*3/2+angle clockwise:YES];
//添加曲线到新圆的顶部
[path addQuadCurveToPoint:newTopPoint controlPoint:topControlPoint];
//新圆的右侧，顺时针画圆
[path addArcWithCenter:newCenter radius:newRadius startAngle:M_PI*3/2+angle endAngle:M_PI*5/2+angle clockwise:YES];
//添加曲线到新圆的底部点
[path addQuadCurveToPoint:originBottomPoint controlPoint:bottomControlPoint];
}
//更新layer
self.pointLayer.path = path.CGPath;
}
接下来就是要处理拖动到一半，松手的处理了。
我们需要拉动的那一部分按照拖动出去的效果，反过来合并到初始圆中。
这里，我们已知这些信息：
初始圆心A，半径R。
松手时圆心B，半径R'。
接下来我们需要做这些操作：
1 计算出直线AB的关系式，然后按比率进行缩小。
2 更新当前的图形。可使用拖动时的函数，只需要
把起始点和结束点调整一下即可。
3 会到初始位置后，反弹动画。
- (void)backCircleWithTotal:(NSInteger)total withCurrent:(NSInteger)current withTotalTime:(CGFloat)totalTime withOriginCenter:(CGPoint)originCenter withEndCenter:(CGPoint)endCenter
{
NSTimeInterval duration = totalTime/total;
__block NSInteger value = current;
//采用递归处理帧
if (current <= total) {
dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(duration * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
//比率
CGFloat rate = value*1.f/total*1.f;
//X，Y值的变化率
CGFloat xChangeValue = endCenter.x-originCenter.x;
CGFloat yChangeValue = endCenter.y-originCenter.y;
//回弹时，不同时刻的圆心位置
CGPoint backCenter = CGPointMake(endCenter.x-xChangeValue*rate, endCenter.y-yChangeValue*rate);
//绘制曲线
[self updateCircleWithOriginCenter:originCenter withNewCenter:backCenter];
//递归调用，继续更新
[self backCircleWithTotal:total withCurrent:value+1 withTotalTime:totalTime withOriginCenter:originCenter withEndCenter:endCenter];
if (value == total) {
//当完成整个回弹时，设置属性，重置圆的位置
self.isEndAnimation = YES;
}
});
}else{
//如果本次拖拽到最大值了，不需要回弹动画了
if (self.isEnding) {
return;
}
//未拉到最大值，放手的动画处理
CGFloat rate = 0.1;
//X,Y的变化值
CGFloat xChangeValue = endCenter.x-originCenter.x;
CGFloat yChangeValue = endCenter.y-originCenter.y;
//初始位置的左上侧
CGPoint backCenter = CGPointMake(originCenter.x-xChangeValue*rate-self.originR, originCenter.y-yChangeValue*rate-self.originR);
//初始位置的右下侧
CGPoint foreCenter = CGPointMake(originCenter.x+xChangeValue*rate/2-self.originR, originCenter.y+yChangeValue*rate/2-self.originR);
//初始位置的左上侧，较靠近圆心
CGPoint backTwoCenter = CGPointMake(originCenter.x-xChangeValue*rate/3-self.originR, originCenter.y-yChangeValue*rate/3-self.originR);
//动画
CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
animation.calculationMode = kCAAnimationLinear;
CGMutablePathRef path = CGPathCreateMutable();
//移动到圆心
CGPathMoveToPoint(path, NULL,originCenter.x-self.originR, originCenter.y-self.originR);
//圆心左上侧
CGPathAddLineToPoint(path, NULL, backCenter.x, backCenter.y);
//圆心的右下侧
CGPathAddLineToPoint(path, NULL, foreCenter.x, foreCenter.y);
//圆心的左上侧，近圆心
CGPathAddLineToPoint(path, NULL, backTwoCenter.x, backTwoCenter.y);
//圆心的右下侧，近圆心
CGPathAddLineToPoint(path, NULL, originCenter.x-self.originR, originCenter.y-self.originR);
animation.path = path;
animation.duration = 0.35;
[self.pointLayer addAnimation:animation forKey:@"pointBackAnimation"];
}
}
至此，我们就能实现动感的小球了。
有什么意见或者建议请留言哈，共同进步～
