先上一张效果图:
1.gif
首先分析一下动画,是由哪些简单动画组成的,分析完成之后,把这些动画结合到一起就是复杂动画了:
- 一个拖动的圆,一个在原位的圆
- 拖动的时候,两个圆之前有封闭的,中间逐渐变小的曲线连接
- 拖动的时候固定圆的大小会逐渐变小
- 拖动到一定距离会断开
- 松开时候回弹回到原位
那么针对前面分析的5步骤,如何实现:
- 两个view画圆,一个view的位置根据手势的位置进行移动
- 在两个圆上做切线相连,中间缩小的程度可以根据拖拽的距离进行控制,需要贝塞尔曲线中的控制点来实现
- 根据两个圆的圆心距离,找出合适的百分比来实现固定圆的缩小的放大
- 当固定圆缩小到一定程度,移除layer动画
- 记录固定圆的位置,手势失败,或者取消,或者结束,实现系统的弹性动画
第一步:两个view画圆,一个view的位置根据手势的位置进行移动
//全局两个view
@property (nonatomic,strong)UIView *view1;
@property (nonatomic,strong)UIView *view2;
//添加view和pan手势
- (void)viewDidLoad {
[super viewDidLoad];
UIView *view1 = [[UIView alloc]initWithFrame:CGRectMake(36, self.view.frame.size.height - 66, 40, 40)];
view1.backgroundColor = [UIColor redColor];
view1.layer.cornerRadius = 20;
view1.layer.masksToBounds = YES;
_view1 = view1;
[self.view addSubview:view1];
UIView *view2 = [[UIView alloc]initWithFrame:view1.frame];
view2.backgroundColor = [UIColor redColor];
view2.layer.cornerRadius = 20;
view2.layer.masksToBounds = YES;
_view2 = view2;
UILabel *label = [[UILabel alloc]initWithFrame:_view2.bounds];
label.text = @"99+";
label.textAlignment = NSTextAlignmentCenter;
label.textColor = [UIColor whiteColor];
[_view2 addSubview:label];
[self.view addSubview:view2];
UIPanGestureRecognizer *pan = [[UIPanGestureRecognizer alloc]initWithTarget:self action:@selector(panAction:)];
[_view2 addGestureRecognizer:pan];
// Do any additional setup after loading the view, typically from a nib.
}
第二步: 在两个圆上做切线相连,中间缩小的程度可以根据拖拽的距离进行控制,需要贝塞尔曲线中的控制点来实
由于本人电脑绘图水平为0,所以在小本本上画了一个图(找不到圆规)
5C537A5183B286EC7658FB4FFF9A7BC2.jpg
分析:
两个圆的位置,以及半径我们都可以获取的到,然后就是求A,B,C,D,P,O点了
我又重新复习了一下初中的三角函数,并且标出来了∠1和∠2,∠1+∠2=90°,
∠1的sin和cos我们都可以直接求出来的,
A:∠1的对边不知道,但是斜边知道就是r1,所以他的x,和y我们都可以求出来,然后根据固定圆的中心点,就知道绝对位置了
B:同理∠1的对边不知道,但是斜边知道就是r1,所以他的x,和y我们都可以求出来,然后根据固定圆的中心点,就知道绝对位置了
C,D点同理,不再赘述,我都把∠1都标注出来了的,根据拖动圆的圆心就可算出来绝对位置
现在是最关键的P,O
P:坐在两个圆的圆心的连线上另外做了一条辅助线平行于圆心的连线,p,d,o在一条直线上,那么p也就可以看出了,∠1知道了,斜边是2/d
O:同p点解法
那么就来撸代码算出这6个点:
//1 求出2个中心点
CGPoint center1 = self.view1.center;
CGPoint center2 = self.view2.center;
//2 求出2个中心点的距离
CGFloat dis = sqrtf((center1.x - center2.x)*(center1.x - center2.x) + (center1.y - center2.y)*(center1.y - center2.y));
//3 计算∠1正弦余弦
CGFloat sin = (center2.x - center1.x)/dis;
CGFloat cos = (center2.y - center1.y)/dis;
//两个圆的半径
CGFloat r1 = self.oldView1Frame.size.width*0.5;
CGFloat r2 = self.view2.frame.size.width*0.5;
//计算6个点
CGPoint pA = CGPointMake(center1.x - r1*cos,center1.y + r1*sin);
CGPoint pB = CGPointMake(center1.x + r1*cos,center1.y - r1*sin);
CGPoint pC = CGPointMake(center2.x + r2*cos, center2.y - r2*sin);
CGPoint pD = CGPointMake(center2.x - r2*cos, center2.y + r2*sin);
CGPoint pP = CGPointMake(pA.x + dis/2*sin, pA.y + dis/2*cos);
CGPoint pO = CGPointMake(pB.x + dis/2*sin, pB.y + dis/2*cos);
//然后就用贝塞尔曲线链接,那么我们需要用到UIBezierPath还有CAShapeLayer
@property (nonatomic,strong)CAShapeLayer *shapeLayer;
我们需要在初始化两个view的时候,将layer添加到两个view上
//实例化lshapeLayer
CAShapeLayer *shapLayer = [CAShapeLayer layer];
self.shapeLayer = shapLayer;
self.shapeLayer.fillColor = [UIColor redColor].CGColor;
贝塞尔曲线链接6个点,并添加到layer上:
UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:pA];
[path addQuadCurveToPoint:pD controlPoint:pP];
[path addLineToPoint:pC];
[path addQuadCurveToPoint:pB controlPoint:pO];
[path closePath];
self.shapeLayer.path = path.CGPath;
[self.view.layer insertSublayer:self.shapeLayer below:self.view2.layer];
第三步:根据两个圆的圆心距离,找出合适的百分比来实现固定圆的缩小的放大
我这里也是试出来的,我再拖动的时候,让固定圆的半径根据两个圆心的距离来缩小,我用固定圆最开始的半径减去圆心距离的20分之一,所以要记录最开始的小圆的大小我又增加了几个全局变量:
@property (nonatomic,assign)CGPoint oldView1Center;
@property (nonatomic,assign)CGRect oldView1Frame;
@property (nonatomic,assign)CGFloat view1R;
设置全局变量的值在初始化UI的时候:
self.oldView1Frame = self.view1.frame;
self.oldView1Center = self.view1.center;
self.view1R = self.view1.frame.size.width*0.5;
所以上面设置r1修改为:(这个1/20可以修改为其他的值)
CGFloat r1 = self.oldView1Frame.size.width*0.5 - dis/20;
最后重新设置view1的frame:
//重新设置view的大小
self.view1R = r1;
self.view1.bounds = CGRectMake(0, 0, r1*2, r1*2);
self.view1.center = self.oldView1Center;
self.view1.layer.cornerRadius = r1;
self.view1.layer.masksToBounds = YES;
第四步:当固定圆缩小到一定程度,移除layer动画
我在手势动画里面判断,当固定圆的半径小于我设置的5时,就去移除动画:
if (ges.state == UIGestureRecognizerStateChanged) {
//view2跟着移动
_view2.center = [ges locationInView:self.view];
//计算出6个点 画出贝塞尔曲线
if (self.view1R < 5) {
self.view1.hidden = YES;
[_shapeLayer removeFromSuperlayer];
}else{
[self calutePoint];
}
}
第五步:记录固定圆的位置,手势失败,或者取消,或者结束,实现系统的弹性动画
[_shapeLayer removeFromSuperlayer];
self.view1.hidden = NO;
[UIView animateWithDuration:.5 delay:0 usingSpringWithDamping:.3 initialSpringVelocity:0 options:UIViewAnimationOptionCurveEaseOut animations:^{
self.view2.center = self.oldView1Center;
self.view1R = self.oldView1Frame.size.width/2;
self.view1.frame = self.oldView1Frame;
self.view1.layer.cornerRadius = self.view1R;
} completion:^(BOOL finished) {
}];
[最后附上git Demo]https://github.com/gnaw9258wp/qq-Drag
