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)
    {
        //繪制不規(guī)則矩形囱稽,不能通過(guò)繪圖享钞,因?yàn)槔L圖只能在當(dāng)前控件上畫(huà)荷憋,超出部分不會(huì)顯示
        // 展示不規(guī)則矩形宾茂,通過(guò)不規(guī)則矩形路徑生成一個(gè)圖層
        _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];
    // 添加手勢(shì)
    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;
    
    // 如果兩圓之間的距離 大于某個(gè)值
    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;
    }
    // 手勢(shì)結(jié)束
    if (pan.state == UIGestureRecognizerStateEnded)
    {
        // 手勢(shì)結(jié)束   大于某個(gè)值  動(dòng)畫(huà)移除
        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 //手勢(shì)結(jié)束 彈簧動(dòng)畫(huà)
        {
            [self.shapeLayer removeFromSuperlayer];
            self.shapeLayer = nil;
            [UIView animateWithDuration:0.5 delay:0 usingSpringWithDamping:0.2 initialSpringVelocity:0 options:UIViewAnimationOptionCurveLinear animations:^{
                
                // 設(shè)置大圓中心點(diǎn)位置
                self.center = self.smallCircleView.center;
                
            } completion:^(BOOL finished) {
                
                self.smallCircleView.hidden = YES;
            }];
        }
        
    }
    
    
}
//計(jì)算兩個(gè)圓心之間的距離
- (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);
}
// 獲取不規(guī)則圖形的 路徑
- (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;
    
    // 坐標(biāo)系基于父控件
    
    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;
}
// 取消高亮狀態(tài)
- (void)setHighlighted:(BOOL)highlighted
{
    
}

4CB5BD58-A38B-4578-98B2-3666952A1E76.png
2EC47F8A-6CE1-453B-852C-DC7CFA9692C7.png
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市隆判,隨后出現(xiàn)的幾起案子窒悔,更是在濱河造成了極大的恐慌喳篇,老刑警劉巖,帶你破解...
    沈念sama閱讀 222,681評(píng)論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件节腐,死亡現(xiàn)場(chǎng)離奇詭異外盯,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī)翼雀,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,205評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門(mén)饱苟,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人狼渊,你說(shuō)我怎么就攤上這事箱熬。” “怎么了囤锉?”我有些...
    開(kāi)封第一講書(shū)人閱讀 169,421評(píng)論 0 362
  • 文/不壞的土叔 我叫張陵坦弟,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我官地,道長(zhǎng)酿傍,這世上最難降的妖魔是什么? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 60,114評(píng)論 1 300
  • 正文 為了忘掉前任驱入,我火速辦了婚禮赤炒,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘亏较。我一直安慰自己莺褒,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,116評(píng)論 6 398
  • 文/花漫 我一把揭開(kāi)白布雪情。 她就那樣靜靜地躺著遵岩,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上尘执,一...
    開(kāi)封第一講書(shū)人閱讀 52,713評(píng)論 1 312
  • 那天舍哄,我揣著相機(jī)與錄音,去河邊找鬼誊锭。 笑死表悬,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的丧靡。 我是一名探鬼主播蟆沫,決...
    沈念sama閱讀 41,170評(píng)論 3 422
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼温治!你這毒婦竟也來(lái)了饭庞?” 一聲冷哼從身側(cè)響起,我...
    開(kāi)封第一講書(shū)人閱讀 40,116評(píng)論 0 277
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤熬荆,失蹤者是張志新(化名)和其女友劉穎但绕,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體惶看,經(jīng)...
    沈念sama閱讀 46,651評(píng)論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡捏顺,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,714評(píng)論 3 342
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了纬黎。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片幅骄。...
    茶點(diǎn)故事閱讀 40,865評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖本今,靈堂內(nèi)的尸體忽然破棺而出拆座,到底是詐尸還是另有隱情,我是刑警寧澤冠息,帶...
    沈念sama閱讀 36,527評(píng)論 5 351
  • 正文 年R本政府宣布挪凑,位于F島的核電站,受9級(jí)特大地震影響逛艰,放射性物質(zhì)發(fā)生泄漏躏碳。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,211評(píng)論 3 336
  • 文/蒙蒙 一散怖、第九天 我趴在偏房一處隱蔽的房頂上張望菇绵。 院中可真熱鬧,春花似錦镇眷、人聲如沸咬最。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 32,699評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)永乌。三九已至,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間翅雏,已是汗流浹背硝桩。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 33,814評(píng)論 1 274
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留枚荣,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 49,299評(píng)論 3 379
  • 正文 我出身青樓啼肩,卻偏偏與公主長(zhǎng)得像橄妆,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子祈坠,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,870評(píng)論 2 361

推薦閱讀更多精彩內(nèi)容

  • 制作步驟 1.自定義按鈕控件 設(shè)置背景顏色害碾,設(shè)置layer的cornerRadius屬性,添加手勢(shì),重寫(xiě)setHi...
    沖破繭縛閱讀 1,342評(píng)論 1 7
  • 效果:拖動(dòng)信息提示數(shù)目按鈕,感覺(jué)像是在拉伸按鈕赦拘,當(dāng)拖動(dòng)到一定范圍慌随,按鈕(小圓被抽出),松開(kāi)手小圓會(huì)爆炸躺同。如果抽出小...
    翻這個(gè)墻閱讀 369評(píng)論 0 0
  • QQ粘性效果 實(shí)現(xiàn)思路: 1.自定義大圓控件(UIButton)可以顯示背景圖片阁猜,和文字 2.讓大圓控件隨著手指移...
    SoManyDumb閱讀 243評(píng)論 0 0
  • 動(dòng)畫(huà)分析 當(dāng)前控件既可以顯示圖片,有可以顯示文字,那么我們就可以通過(guò)按鈕來(lái)最為當(dāng)前的控件. 當(dāng)拖動(dòng)控件,當(dāng)前控件尺...
    亡靈詛咒閱讀 498評(píng)論 0 2
  • 1.坐標(biāo)點(diǎn)和控制點(diǎn)的計(jì)算 2.新建GooView,繼承自UIButton。
    阿凡提說(shuō)AI閱讀 284評(píng)論 0 0