動畫分析

• 當前控件既可以顯示圖片,有可以顯示文字,那么我們就可以通過按鈕來最為當前的控件.
• 當拖動控件,當前控件尺寸不會改變,起始位置處會有一個同尺寸的控件隨著偏移的距離,逐漸變小.起始位置的控件只是簡單的用來顯示,所以這里可以用一個View來完成.而2控件中間的紐帶我們可以通過圖層來實現(xiàn).

text.gif

1.搭建界面

• 從storyboard中創(chuàng)建一個按鈕,并且自定義一個繼承自UIButton的類,修改按鈕的class
• 在初始化方法中,初始化我們自定義按鈕的屬性
  • 考慮到按鈕分裝重用,將初始化方法抽取出來,分別在awakeFromNib 和initWithFrame中實現(xiàn)

-(void) setUp
{
    self.radius = self.bounds.size.width * 0.5;
    //設置圓角
    self.layer.cornerRadius = self.radius;
    self.layer.masksToBounds = YES;
}

2.平移控件

• 在初始化方法中,給控件添加平移手勢,實現(xiàn)方法

    UIPanGestureRecognizer *pan = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(pan:)];
    [self addGestureRecognizer:pan];

• 在平移手勢的方法中,獲取當前的偏移點來移動控件

 //無法通過設置transform方法來獲得移動中控件的frame位置的變化
    CGPoint transPoint = [pan translationInView:self];
    //平移控件
    self.transform = CGAffineTransformTranslate(self.transform, transPoint.x, transPoint.y);
    [pan setTranslation:CGPointZero inView:self];

    //利用center來改變控件的位置
    //獲取偏移點
    CGPoint transPoint = [pan translationInView:self];
    //平移控件
    CGPoint center = self.center;
    center.x += transPoint.x;
    center.y += transPoint.y;
    self.center = center;
    //復原
    [pan setTranslation:CGPointZero inView:self];

3.終點的view

• 添加一個view在起始位置處.平移手勢方法調(diào)用頻繁,所以選擇在初始化方法中添加

    //添加小圓
    UIView *smallRadius = [[UIView alloc] initWithFrame:self.bounds];
    smallRadius.layer.cornerRadius = self.radius;
    smallRadius.center = self.center;
    smallRadius.backgroundColor = [UIColor redColor];
//    [self.superview addSubview:smallRadius];此方法是將子控件添加到父控件上,并且讓其在最上面顯示
    //將添加的view添加到父控件上
    [self.superview insertSubview:smallRadius belowSubview:self];

• 自定義一個形變系數(shù),通過兩圓的圓心距,獲得起始圓的形變尺寸

//獲得2圓心距離
-(CGFloat) distanceWithSmallView:(UIView *) smallView withBigView:(UIView *) bigView
{
    CGFloat distanceX = bigView.center.x - smallView.center.x;
    CGFloat distanceY = bigView.center.y - smallView.center.y;
    return sqrt(distanceX * distanceX + distanceY * distanceY);
}

    //獲取小圓的半徑
    CGFloat radius = self.radius - space;
    //修改小圓的尺寸
    self.smallView.bounds = CGRectMake(0, 0, radius * 2, radius * 2);
    self.smallView.layer.cornerRadius = radius;

4.不規(guī)則矩形的創(chuàng)建

• 通過形狀圖層,將不規(guī)則的矩形渲染到視圖
• 創(chuàng)建貝塞爾曲線

-(UIBezierPath *) beziserWithSmallView:(UIView *) smallView withBigView:(UIView *)bigView
{
    //小 圓
    CGPoint small = smallView.center;
    CGFloat r = smallView.bounds.size.width * 0.5;
    //大 圓
    CGPoint big = bigView.center;
    CGFloat R = bigView.bounds.size.width * 0.5;    
    CGFloat distance = [self distanceWithSmallView:smallView withBigView:bigView];
    //兩控件x,y軸上的偏移量
    CGFloat spaceX = big.x - small.x;
    CGFloat spaceY = big.y - small.y;
    //獲取偏移角度
    CGFloat sinθ = spaceX / distance;
    CGFloat cosθ = spaceY / distance;
    //路徑點
    CGPoint pointA = CGPointMake(small.x - r * cosθ, small.y + r * sinθ);
    CGPoint pointB = CGPointMake(small.x + r * cosθ, small.y - r * sinθ);
    CGPoint pointC = CGPointMake(big.x + R * cosθ, big.y - R * sinθ);
    CGPoint pointd = CGPointMake(big.x - R * cosθ, big.y + R * sinθ);
    //曲線控制點
    CGPoint ctlOne = CGPointMake(pointA.x + distance * 0.5 * sinθ, pointA.y + distance * 0.5 * cosθ);
    CGPoint ctltwo = CGPointMake(pointB.x + distance * 0.5 * sinθ, pointB.y + distance * 0.5 * cosθ);
    [self.path moveToPoint:pointA];
    [self.path addLineToPoint:pointB];
    //曲線控制點
    [self.path addQuadCurveToPoint:pointC controlPoint:ctlOne];
    [self.path addLineToPoint:pointd];
    //曲線控制點
    [self.path addQuadCurveToPoint:pointA controlPoint:ctltwo];
    return self.path;
}

• 聲明一個CAShapeLayer屬性,并且懶加載

-(CAShapeLayer *)shapeLayer
{
    if (!_shapeLayer) {
        CAShapeLayer *shapLayer = [CAShapeLayer layer];
        shapLayer.fillColor = [UIColor redColor].CGColor;
        //將形狀圖層渲染到主視圖
        [self.superview.layer addSublayer:shapLayer];
        _shapeLayer = shapLayer;
    }
    return _shapeLayer;
}

動畫實現(xiàn)

• 吸附效果

    if (distance >= dkSpace) { //超出范圍,將起始view和形狀圖層隱藏
        self.smallView.hidden = YES;
//        self.shapeLayer.hidden = YES;//隱藏無法達到吸附效果
        [self.shapeLayer removeFromSuperlayer];
    }else if (distance < dkSpace && !self.smallView.hidden){ //只有當控件滿足范圍條件,并且起始view沒有隱藏的條件下,才實現(xiàn)該效果
        //通過貝塞爾創(chuàng)建不規(guī)則曲線
        self.shapeLayer.path = [self beziserWithSmallView:self.smallView withBigView:self].CGPath;
    }

• 回彈效果

        if (distance  < dkSpace && !self.smallView.hidden) {//沒有滿足要求
            //返回起始點
            [UIView animateWithDuration:0.3 delay:0 usingSpringWithDamping:0.3 initialSpringVelocity:0.3 options:UIViewAnimationOptionCurveEaseInOut animations:^{
                //返回起始點
                self.frame = self.smallView.frame ;
                [self.shapeLayer removeFromSuperlayer];
            } completion:^(BOOL finished) {
                self.smallView.hidden = NO;
            }];

• 結(jié)尾動畫效果

            //實現(xiàn)動畫
            UIImageView *ani = [[UIImageView alloc]initWithFrame:self.bounds];
            ani.animationImages = self.icons;
            ani.animationRepeatCount = 1;
            ani.animationDuration = 1;
            [self addSubview:ani];
            //開始動畫
            [ani startAnimating];
            dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(0.9 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
                [self removeFromSuperview];
            });

注意

• 應為我們是在storyboard中拖得控件,所以默認是會將Autoresizing轉(zhuǎn)自動布局,需要利用代碼來設置取消

 self.view.translatesAutoresizingMaskIntoConstraints = NO;