iOS QQ粘性布局

Demo下载地址：http://download.csdn.net/download/u010981736/9964836

iOS 仿照QQ未读消息提醒数字的粘性布局，实现了和QQ未读消息一样的功能，拖拽的时候会有粘性效果，在一定范围内拖拽松手还会回到原来的位置，超过一定距离之后就会播放一个动画。

效果图：

核心代码：

//
//  BageValueBtn.m
//  QQ粘性布局
//
//  Created by llkj on 2017/9/5.
//  Copyright © 2017年 LayneCheung. All rights reserved.
//

#import "BageValueBtn.h"

@interface BageValueBtn()

@property (nonatomic, weak)  UIView *smallCircle;
@property (nonatomic, weak)  CAShapeLayer *shap;


@end
@implementation BageValueBtn


-(void)awakeFromNib{

    [super awakeFromNib];
    [self setUP];
}

-(instancetype)initWithFrame:(CGRect)frame{
    if (self = [super initWithFrame:frame]) {
        [self setUP];
    }
    return self;
}



-(CAShapeLayer *)shap{

    if (_shap == nil) {
        //形状图层
        //它可以根据一个路径生成一个形状.
        CAShapeLayer *shap = [CAShapeLayer layer];
        //设置形状的填充颜色
        shap.fillColor = [UIColor redColor].CGColor;
        _shap = shap;
        [self.superview.layer insertSublayer:shap atIndex:0];
    }
    return _shap;

}

//初始化
- (void)setUP{
    //设置圆角
    self.layer.cornerRadius = self.bounds.size.width * 0.5;
    //设置背景颜色
    [self setBackgroundColor:[UIColor redColor]];
    [self setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];
    self.titleLabel.font = [UIFont systemFontOfSize:12];

    //添加手势
    UIPanGestureRecognizer *pan = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(pan:)];
    [self addGestureRecognizer:pan];

    //添加小圆
    UIView *smallCircle = [[UIView alloc] init];
    smallCircle.frame = self.frame;
    smallCircle.backgroundColor = self.backgroundColor;
    smallCircle.layer.cornerRadius = self.layer.cornerRadius;
    self.smallCircle = smallCircle;
    [self.superview insertSubview:smallCircle belowSubview:self];



}


//计算两个圆之间的距离
- (CGFloat)distanceWithSmallCircle:(UIView *)smallCircle bigCircle:(UIView *)bigCircle{

    //X轴偏移量
    CGFloat offsetX = bigCircle.center.x - smallCircle.center.x;
    //Y轴偏移量
    CGFloat offsetY = bigCircle.center.y - smallCircle.center.y;

    return  sqrtf(offsetX * offsetX + offsetY * offsetY);

}

//根据两个圆设置一个不规则的路径
- (UIBezierPath *)pathWithSmallCircle:(UIView *)smallCircle bigCircle:(UIView *)bigCircle{

    CGFloat x1 = smallCircle.center.x;
    CGFloat y1 = smallCircle.center.y;

    CGFloat x2 = bigCircle.center.x;
    CGFloat y2 = bigCircle.center.y;

    CGFloat d = [self distanceWithSmallCircle:smallCircle bigCircle:self];

    if (d <= 0) {
        return nil;
    }


    CGFloat cosθ = (y2 - y1) / d;
    CGFloat sinθ = (x2 - x1) / d;

    CGFloat r1 = smallCircle.bounds.size.width * 0.5;
    CGFloat r2 = bigCircle.bounds.size.width * 0.5;

    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 * 0.5 * sinθ, pointA.y + d * 0.5 * cosθ);
    CGPoint pointP = CGPointMake(pointB.x + d * 0.5 * sinθ, pointB.y + d * 0.5 * cosθ);


    UIBezierPath *path = [UIBezierPath bezierPath];
    //AB
    [path moveToPoint:pointA];
    [path addLineToPoint:pointB];
    //BC(曲线)
    [path addQuadCurveToPoint:pointC controlPoint:pointP];
    //CD
    [path addLineToPoint:pointD];
    //DA(曲线)
    [path addQuadCurveToPoint:pointA controlPoint:pointO];

    return path;

}


- (void)pan:(UIPanGestureRecognizer *)pan{

    //frame,center,transform.

    //移动.
    CGPoint transP = [pan translationInView:self];
    //修改transform值,并没有去修改center,它修改的frame
    //    self.transform = CGAffineTransformTranslate(self.transform, transP.x, transP.y);

    CGPoint center =  self.center;
    center.x += transP.x;
    center.y += transP.y;
    self.center = center;

    //复位
    [pan setTranslation:CGPointZero inView:self];
    //两个圆之间的距离
    CGFloat distance = [self distanceWithSmallCircle:self.smallCircle bigCircle:self];

    //让小圆的半径减去距离的比例
    //获取小圆的半径
    CGFloat smallR = self.bounds.size.width * 0.5;
    smallR = smallR - distance / 10.0;
    //要重设置小圆的尺寸
    self.smallCircle.bounds = CGRectMake(0, 0, smallR * 2, smallR * 2);
    //重新设置小圆的圆角
    self.smallCircle.layer.cornerRadius = smallR;


    //不规则的路径.

    //如果小圆显示的时候再创建
    if(self.smallCircle.hidden == NO){
        UIBezierPath *path = [self pathWithSmallCircle:self.smallCircle bigCircle:self];
        self.shap.path = path.CGPath;
    }


    //如果两个圆之间的距离超过某个范围.让小圆隐藏,shap移除
    if(distance > 60){
        self.smallCircle.hidden = YES;
        [self.shap removeFromSuperlayer];
    }
    //当手指松开时,如果发现两个圆之间距离小于某个值时,大圆复位.
    if(pan.state == UIGestureRecognizerStateEnded){
        //如果发现两个圆之间距离小于某个值时,大圆复位.
        if (distance < 60) {
            //移除形状
            [self.shap removeFromSuperlayer];

            //添加一个弹性动画
            [UIView animateWithDuration:0.25 delay:0 usingSpringWithDamping:0.2 initialSpringVelocity:0 options:UIViewAnimationOptionCurveLinear animations:^{

                //大圆复位.
                self.center = self.smallCircle.center;
            } completion:^(BOOL finished) {
                //让小圆显示
                self.smallCircle.hidden = NO;
            }];


        }else{
            //如果发现两个圆之间距离大于某个值时,播放动画,按钮从父控件当中移.

            //添加一个UIImageView
            UIImageView *imageV = [[UIImageView alloc] initWithFrame:self.bounds];

            NSMutableArray *imageArray = [NSMutableArray array];
            for (int i = 0; i < 8; ++i) {
                NSString *imageName = [NSString stringWithFormat:@"%d",i + 1];
                UIImage *image = [UIImage imageNamed:imageName];
                [imageArray addObject:image];
            }

            imageV.animationImages = imageArray;
            //设置动画的执行时长
            [imageV setAnimationDuration:1];
            //开始动画
            [imageV startAnimating];
            [self addSubview:imageV];

            //一秒钟后.把当前的按钮从父控件当中移.
            dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(1 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
                //把当前的按钮从父控件当中移.
                [self removeFromSuperview];
            });


        }

    }




}


//取消高亮状态
-(void)setHighlighted:(BOOL)highlighted{
}

/*
 // Only override drawRect: if you perform custom drawing.
 // An empty implementation adversely affects performance during animation.
 - (void)drawRect:(CGRect)rect {
 // Drawing code
 }
 */

@end