QQ粘性效果

#import "StickButton.h"

@interface StickButton ()
@property (nonatomic ,retain) UIView *smallCircleView;
@property (nonatomic ,assign) CGFloat oriSmallRadius;
@property (nonatomic ,retain) CAShapeLayer * shapeLayer;
@end
@implementation StickButton

- (CAShapeLayer*)shapeLayer
{
    if (!_shapeLayer)
    {
        //绘制不规则矩形，不能通过绘图，因为绘图只能在当前控件上画，超出部分不会显示
        // 展示不规则矩形，通过不规则矩形路径生成一个图层
        _shapeLayer = [CAShapeLayer layer];
        
        _shapeLayer.fillColor = self.backgroundColor.CGColor;
        
        [self.superview.layer insertSublayer:_shapeLayer below:self.layer];
    }
    return _shapeLayer;
}

- (UIView*)smallCircleView
{
    if (!_smallCircleView)
    {
        // 大圆下面的圆 可缩小的圆
        _smallCircleView = [[UIView alloc]init];
        _smallCircleView.backgroundColor = self.backgroundColor;
        [self.superview insertSubview:_smallCircleView belowSubview:self];
        
    }
    return _smallCircleView;
}
- (instancetype)initWithFrame:(CGRect)frame
{
    if (self = [super initWithFrame:frame])
    {
        [self setUp];
    }
    return self;
}
- (void)awakeFromNib
{
    [super awakeFromNib];
    [self setUp];
}
- (void)setUp
{
    CGFloat w = self.bounds.size.width;
    // 大圆的半径
    _oriSmallRadius = w / 2;
    self.layer.cornerRadius = w / 2;
    self.smallCircleView.bounds = self.bounds;
    self.smallCircleView.center = self.center;
    self.smallCircleView.layer.cornerRadius = w / 2;
    self.smallCircleView.clipsToBounds = YES;
    [self setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];
    self.titleLabel.font = [UIFont systemFontOfSize:12];
    // 添加手势
    UIPanGestureRecognizer *pan = [[UIPanGestureRecognizer alloc]initWithTarget:self action:@selector(pan:)];
    [self addGestureRecognizer:pan];
}
- (void)pan:(UIPanGestureRecognizer* )pan
{

    CGPoint tranP = [pan translationInView:self];
    
    CGPoint centerP = self.center;
    
    centerP.x += tranP.x;
    
    centerP.y += tranP.y;
    
    self.center = centerP;
    
    self.smallCircleView.hidden = NO;
    
    [pan setTranslation:CGPointZero inView:self];
    // 获取两圆 之间的距离
    CGFloat d = [self circleCenterDistanceWithBigCircleCenter:self.center WithSmallCircleCenter:_smallCircleView.center];
    CGFloat smallRadius = _oriSmallRadius - d / 10;
    
    _smallCircleView.bounds = CGRectMake(0, 0, smallRadius * 2, 2 * smallRadius);
    _smallCircleView.layer.cornerRadius = smallRadius;
    
    // 如果两圆之间的距离 大于某个值
    if (d > _oriSmallRadius * 10)
    {
        self.smallCircleView.hidden = YES;
        [self.shapeLayer removeFromSuperlayer];
        self.shapeLayer = nil;
        
    }
    else if (d> 0 && self.smallCircleView.hidden == NO)
    {
        self.shapeLayer.path = [self pathWithBigCircleView:self WithSmallCircleView:self.smallCircleView].CGPath;
    }
    // 手势结束
    if (pan.state == UIGestureRecognizerStateEnded)
    {
        // 手势结束   大于某个值  动画移除
        if (d > _oriSmallRadius * 10 )
        {
            UIImageView *imageView = [[UIImageView alloc]initWithFrame:self.bounds];
            NSMutableArray *imageArr = [NSMutableArray array];
            imageView.animationImages = imageArr;
            imageView.animationRepeatCount = 1;
            imageView.animationDuration = 0.5;
            [imageView startAnimating];
            [self addSubview:imageView];
            
            dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(0.4 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
                [self removeFromSuperview];
            });
            
        }
        else //手势结束 弹簧动画
        {
            [self.shapeLayer removeFromSuperlayer];
            self.shapeLayer = nil;
            [UIView animateWithDuration:0.5 delay:0 usingSpringWithDamping:0.2 initialSpringVelocity:0 options:UIViewAnimationOptionCurveLinear animations:^{
                
                // 设置大圆中心点位置
                self.center = self.smallCircleView.center;
                
            } completion:^(BOOL finished) {
                
                self.smallCircleView.hidden = YES;
            }];
        }
        
    }
    
    
}
//计算两个圆心之间的距离
- (CGFloat)circleCenterDistanceWithBigCircleCenter:(CGPoint)bigCircleCenter WithSmallCircleCenter:(CGPoint)smallCircleCenter
{
    CGFloat offsetX = bigCircleCenter.x - smallCircleCenter.x;
    
    CGFloat offsetY = bigCircleCenter.y - smallCircleCenter.y;
    
    return sqrt(offsetX * offsetX + offsetY * offsetY);
}
// 获取不规则图形的 路径
- (UIBezierPath *)pathWithBigCircleView:(UIView*)bigCircleView WithSmallCircleView:(UIView*)smallCircleView
{
    CGPoint bigCenter = bigCircleView.center;
    CGFloat x2 = bigCenter.x;
    CGFloat y2 = bigCenter.y;
    CGFloat r2 = bigCircleView.bounds.size.width / 2;
    
    CGPoint smallCenter = smallCircleView.center;
    CGFloat x1 = smallCenter.x;
    CGFloat y1 = smallCenter.y;
    CGFloat r1 = smallCircleView.bounds.size.width / 2;
    
    // 获取圆心距离
    CGFloat d = [self circleCenterDistanceWithBigCircleCenter:bigCenter WithSmallCircleCenter:smallCenter];
    
    CGFloat sinθ = (x2 - x1) / d;
    
    CGFloat cosθ = (y2 - y1) / d;
    
    // 坐标系基于父控件
    
    CGPoint pointA = CGPointMake(x1 - r1 * cosθ, y1 + r1 * sinθ);
    CGPoint pointB = CGPointMake(x1 + r1 * cosθ, y1 - r1 * sinθ);
    CGPoint pointC = CGPointMake(x2 + r2 * cosθ, y2 - r2 * sinθ);
    CGPoint pointD = CGPointMake(x2 - r2 * cosθ, y2 + r2 * sinθ);
    
    CGPoint pointO = CGPointMake(pointA.x + d / 2 * sinθ, pointA.y + d / 2 * cosθ);
    CGPoint pointP = CGPointMake(pointB.x + d / 2 * sinθ, pointB.y + d / 2 * cosθ);
    
    UIBezierPath *path = [UIBezierPath bezierPath];
    
    // A
    [path moveToPoint:pointA];
    //B
    [path addLineToPoint:pointB];
    // 绘制BC曲线
    [path addQuadCurveToPoint:pointC controlPoint:pointP];
    // CD
    [path addLineToPoint:pointD];
    //绘制DA曲线
    [path addQuadCurveToPoint:pointA controlPoint:pointO];
    
    return path;
    
    return nil;
}
// 取消高亮状态
- (void)setHighlighted:(BOOL)highlighted
{
    
}

4CB5BD58-A38B-4578-98B2-3666952A1E76.png

2EC47F8A-6CE1-453B-852C-DC7CFA9692C7.png