QQ粘性布局

在一个storyBoard里面拖一个UIButton进去,然后新建一个自定义UIBUtton类

@interface LLButton ()
/** 圆小控件 */
@property (nonatomic, weak) UIView *smallCircle;
/** <#annotation#> */
@property (nonatomic, strong) CAShapeLayer *shapeLayer;
@end

@implementation LLButton

#pragma mark - Lazy load
- (UIView *)smallCircle
{
    if (!_smallCircle) {
        UIView *smallCircle = [[UIView alloc] init];
        smallCircle.backgroundColor = self.backgroundColor;
        [self.superview insertSubview:smallCircle belowSubview:self];
        _smallCircle = smallCircle;
    }
    return _smallCircle;
}

- (CAShapeLayer *)shapeLayer
{
    if (!_shapeLayer) {
        CAShapeLayer *shapeLayer = [CAShapeLayer layer];
        shapeLayer.fillColor = self.backgroundColor.CGColor;
        [self.superview.layer insertSublayer:shapeLayer below:self.layer];
        _shapeLayer = shapeLayer;
    }
    return _shapeLayer;
}

#pragma mark - 系统初始化

// 按钮定义的时候要在初始方法中,把它的基本属性设置好.在开始加载的时候设置.
// 基本属性包括颜色,圆角,文字颜色,大小.
- (instancetype)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        [self __initSubviews];
    }
    return self;
}

- (void)awakeFromNib
{
    [super awakeFromNib];
    [self __initSubviews];
}

#pragma mark - 初始化子控件
- (void)__initSubviews
{
    self.backgroundColor = [UIColor redColor];
    self.layer.cornerRadius = self.bounds.size.width * 0.5;
    self.titleLabel.font = [UIFont systemFontOfSize:12];
    [self setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];
    
    self.smallCircle.layer.cornerRadius = self.layer.cornerRadius;
    self.smallCircle.frame = self.frame;
    
    UIPanGestureRecognizer *pan = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(pan:)];
    [self addGestureRecognizer:pan];
}

// 屏蔽按钮的高亮状态
- (void)setHighlighted:(BOOL)highlighted
{
    
}

#pragma mark - 自定义方法
#pragma mark - 手势触发
#define MaxDistance 90
- (void)pan:(UIPanGestureRecognizer *)pan
{
    // 移动
    CGPoint transP = [pan translationInView:self];
    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;
    if (smallR < 0) {
        smallR = 0;
    }
    self.smallCircle.bounds = CGRectMake(0, 0, smallR*2, smallR*2);
    self.smallCircle.layer.cornerRadius = smallR;
    
    // 判断圆心距是否大于规定的距离
    if (distance > MaxDistance) { // 大于的话隐藏小圆,移除不规则矩形
        
        self.smallCircle.hidden = YES;
        [self.shapeLayer removeFromSuperlayer];
        self.shapeLayer = nil;
    } else if (self.smallCircle.hidden == NO && distance > 0) {
        self.shapeLayer.path = [self pathWithSmallCircleView:self bigCircle:self.smallCircle].CGPath;
    }
    
    // 爆炸或还原
    if (pan.state == UIGestureRecognizerStateBegan) {
        NSLog(@"%@", NSStringFromCGRect(self.frame));
    }
    
    if (pan.state == UIGestureRecognizerStateEnded) {
        if (distance > MaxDistance) {
            // 动画的爆炸效果
            UIImageView *imageView = [[UIImageView alloc] initWithFrame:self.bounds];
            NSLog(@"%@", NSStringFromCGRect(self.frame));
            NSMutableArray *imageArr = [NSMutableArray array];
            for (int i = 0; i < 9; i++) {
                UIImage *image = [UIImage imageNamed:[NSString stringWithFormat:@"explode%d", i]];
                [imageArr addObject:image];
            }
            imageView.animationImages = imageArr;
            imageView.animationDuration = 0.5;
            imageView.animationRepeatCount = 1;
            [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.smallCircle.center;
            } completion:^(BOOL finished) {
                self.smallCircle.hidden = NO;
            }];
        }
    }
}

#pragma mark - 获取圆心距离
- (CGFloat)distanceWithSmallCircle:(UIView *)smallView bigCircle:(UIView *)bigCircle
{
    CGFloat offsetX = bigCircle.center.x - smallView.center.x;
    CGFloat offsetY = bigCircle.center.y - smallView.center.y;
    CGFloat distance = sqrt(offsetX*offsetX + offsetY*offsetY);
    return distance;
}

#pragma mark - 获取贝塞尔曲线
- (UIBezierPath *)pathWithSmallCircleView:(UIView *)smallView bigCircle:(UIView *)bigCircle
{
    // 小圆
    CGFloat x1 = smallView.center.x;
    CGFloat y1 = smallView.center.y;
    CGFloat r1 = smallView.bounds.size.width*0.5;
    
    // 大圆
    CGFloat x2 = bigCircle.center.x;
    CGFloat y2 = bigCircle.center.y;
    CGFloat r2 = bigCircle.bounds.size.width*0.5;
    
    CGFloat d = [self distanceWithSmallCircle:smallView bigCircle:bigCircle];
    
    CGFloat cosθ = (y2 - y1)/d;
    CGFloat sinθ = (x2 - x1)/d;
    
    //A B C D O P
    CGPoint A = CGPointMake(x1-r1*cosθ, y1+r1*sinθ);
    CGPoint B = CGPointMake(x1+r1*cosθ, y1-r1*sinθ);
    CGPoint C = CGPointMake(x2+r2*cosθ, y2-r2*sinθ);
    CGPoint D = CGPointMake(x2-r2*cosθ, y2+r2*sinθ);
    
    CGPoint O = CGPointMake(A.x+d/2*sinθ, A.y+d/2*cosθ);
    CGPoint P = CGPointMake(B.x+d/2*sinθ, B.y+d/2*cosθ);
    
    //绘制路径
    UIBezierPath *path = [UIBezierPath bezierPath];
    [path moveToPoint:A];
    [path addLineToPoint:B];
    [path addQuadCurveToPoint:C controlPoint:P];
    [path addLineToPoint:D];
    [path addQuadCurveToPoint:A controlPoint:O];
    
    return path;
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,098评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,213评论 2 380
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 149,960评论 0 336
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,519评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,512评论 5 364
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,533评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,914评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,574评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,804评论 1 296
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,563评论 2 319
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,644评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,350评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,933评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,908评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,146评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,847评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,361评论 2 342

推荐阅读更多精彩内容

  • 整体思路: 手指移动,按钮跟着移动.按钮跟着手指移动.移动时底部有一个圆, 根据上面的大圆按钮拖动的距离,小圆的半...
    翻滚的企鹅阅读 675评论 0 0
  • 按钮button自定义button设置圆角半径cornerRadius取消高亮状态重写setHighlighted...
    彼岸的黑色曼陀罗阅读 399评论 0 0
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,016评论 4 62
  • 我和L君相识于10多年前。 那年,我们都在备考同一地区但不同学校的研究生,合住到一起。我们有很多共同点:都是辞职备...
    tangertan阅读 240评论 0 0
  • 在HTML标签中可以简单的划分为两类元素,一种是 块级元素 (block),一种是 行内元素 (inline)。 ...
    CJ_景元阅读 1,307评论 0 0