QQ粘性效果

动画分析

当前控件既可以显示图片,有可以显示文字,那么我们就可以通过按钮来最为当前的控件.
当拖动控件,当前控件尺寸不会改变,起始位置处会有一个同尺寸的控件随着偏移的距离,逐渐变小.起始位置的控件只是简单的用来显示,所以这里可以用一个View来完成.而2控件中间的纽带我们可以通过图层来实现.

text.gif

1.搭建界面

从storyboard中创建一个按钮,并且自定义一个继承自UIButton的类,修改按钮的class
在初始化方法中,初始化我们自定义按钮的属性
- 考虑到按钮分装重用,将初始化方法抽取出来,分别在awakeFromNib 和initWithFrame中实现

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

2.平移控件

在初始化方法中,给控件添加平移手势,实现方法

    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在起始位置处.平移手势方法调用频繁,所以选择在初始化方法中添加

    //添加小圆
    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];

自定义一个形变系数,通过两圆的圆心距,获得起始圆的形变尺寸

//获得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.不规则矩形的创建

通过形状图层,将不规则的矩形渲染到视图
创建贝塞尔曲线

-(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;
}

动画实现

吸附效果

    if (distance >= dkSpace) { //超出范围,将起始view和形状图层隐藏
        self.smallView.hidden = YES;
//        self.shapeLayer.hidden = YES;//隐藏无法达到吸附效果
        [self.shapeLayer removeFromSuperlayer];
    }else if (distance < dkSpace && !self.smallView.hidden){ //只有当控件满足范围条件,并且起始view没有隐藏的条件下,才实现该效果
        //通过贝塞尔创建不规则曲线
        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;
            }];

结尾动画效果

            //实现动画
            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转自动布局,需要利用代码来设置取消

 self.view.translatesAutoresizingMaskIntoConstraints = NO;

QQ粘性效果

动画分析

1.搭建界面

2.平移控件

3.终点的view

4.不规则矩形的创建

动画实现

注意

推荐阅读更多精彩内容