iOS核心动画 一一 QQ粘性效果

源代码地址: https://github.com/coderZYGui/ZYQViscousEffect

效果图如下:

整体思路:

手指移动,按钮跟着移动,按钮跟着手指移动,移动时底部有一个圆(称为小圆),根据上面的大圆按钮拖动的距离,小圆的半径不断变小,移动时中间有一块不规则的填充区域,手指移动超过一定的范围,填充效果消失,当手指松开时,判断当前大圆距离与小圆之间的距离.

如果小于一个最大距离,就让大圆回到原来的位置,下次拖动时,同样具有填充效果.

如果大于一个最大距离,手指松开时,播放一个动画,动画完成时,删除动画按钮

计算不规则路径的图解:

代码如下:

ViewController.m文件

#import "ViewController.h"

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    
    // 表示视图的autoresizing面具是否转化为约束的基于布局体系。
    self.view.translatesAutoresizingMaskIntoConstraints = NO;
    
}

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    
}


@end

ZYBageValueBtn文件

//
//  ZYBageValueBtn.h
//  ZYQqViscousEffect
//
//  Created by 朝阳 on 2017/10/21.
//  Copyright © 2017年 sunny. All rights reserved.
//

#import <UIKit/UIKit.h>

@interface ZYBageValueBtn : UIButton

@end

#import "ZYBageValueBtn.h"
#define maxDistance 80

@interface ZYBageValueBtn()

/** 小圆 */
@property (nonatomic, weak) UIView *smallCircle;

/** 形状图层 */
@property (nonatomic, weak) CAShapeLayer *shapeL;

@end

@implementation ZYBageValueBtn

/**
 求出路径后,要把路径填充起来.但是不能够直接给填充到当前的按钮之上.按钮是可以拖动的.
 绘制东西,当超出它的范围以外就不会再绘制.
 所以要把路径添加到按钮的父控件当中, 但是当前是一个路径,是不能够直接添加到父控件当中的.
 可能过形状图层添加.
 形状图层会根据一个路径生成一个形状.把这个形状添加到当前控件的图片父层就可以了.
 添加时需要注意:
 形状图层之有一个,所以不能够在手指拖动方法当中添加.由于当手指拖动的距离超过某个范围后,形状图片会被移除.
 下一次再去移动时, 还会有填充的路径.所以把创建形状图层搞成一个懒加载的形式,
 如果发现下一次被删除时,再重新创建.
 */

#pragma -mark 懒加载
- (CAShapeLayer *)shapeL
{
    if (_shapeL == nil) {
        CAShapeLayer *shapeL = [CAShapeLayer layer];
        // 把形状图层添加到self的父视图的最下面
        [self.superview.layer insertSublayer:shapeL atIndex:0];
        shapeL.fillColor = [UIColor redColor].CGColor;
        _shapeL = shapeL;
    }
    return _shapeL;
}

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

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

#pragma -mark 初始化方法
- (void)setUp
{
    self.backgroundColor = [UIColor redColor];
    self.layer.cornerRadius = self.bounds.size.width * 0.5;
    [self setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];
    
    // 添加拖动手势
    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 addSubview:smallCircle];
    // 放在大圆的下面
    [self.superview insertSubview:smallCircle belowSubview:self];
}

#pragma -mark 手势方法
- (void)pan:(UIPanGestureRecognizer *)pan
{
    // 获取当前偏移量
    CGPoint transP = [pan translationInView:self];
    // 注意: 当使用transform的时候,修改的是self的frame值,不会修改center
    //    self.transform = CGAffineTransformTranslate(self.transform, transP.x, transP.y);
    
    CGPoint center = self.center;
    center.x += transP.x;
    center.y += transP.y;
    self.center = center;
    // NSLog(@"%@",NSStringFromCGPoint(self.center));
    // 复位(相对于上一次)
    [pan setTranslation:CGPointZero inView:self];
    
    // 当拖动的时候计算距离
    CGFloat distance = [self distanceWithSmallCircle:self.smallCircle bigCircle:self];
    // 取出小圆的半径
    CGFloat smallRadius = self.bounds.size.width * 0.5;
    // 当距离增大,小圆半径每次都减少一个比例
    smallRadius -= distance / 10.0;
    // 每次移动重新设置小圆的尺寸
    self.smallCircle.bounds = CGRectMake(0, 0, smallRadius * 2, smallRadius * 2);
    self.smallCircle.layer.cornerRadius = smallRadius;
    
    // 业务逻辑处理
    UIBezierPath *path = [self pathWithSmallCircle:self.smallCircle bigCircle:self];
    
    // 只有当小圆不隐藏的时候,才填充路径
    if (self.smallCircle.hidden == NO) {
        self.shapeL.path = path.CGPath;
    }
    
    // 当两圆之间的距离超过一个最大值的时候.把小圆隐藏,清除路径
    if (distance > maxDistance) {
        self.smallCircle.hidden = YES;
        // 移除填充路径
        [self.shapeL removeFromSuperlayer];
    }
    
    // 当手指停止拖动时
    /*
     移动后手指松开时判断: 如果两个圆之间的距离不超过最大距离,则让大圆复位,小圆显示
     若超过最大距离,让大圆播放一个动画消失
     */
    if (pan.state == UIGestureRecognizerStateEnded) {
        // 距离小于最大距离
        if (distance < maxDistance) {
            // 添加一个弹簧动画
            [UIView animateWithDuration:0.2 delay:0 usingSpringWithDamping:0.4 initialSpringVelocity:0 options:UIViewAnimationOptionCurveLinear animations:^{
                // 将绘制的图形清空
                [self.shapeL removeFromSuperlayer];
                // 和小圆重合
                self.center = self.smallCircle.center;
                self.smallCircle.hidden = NO;
                
            } completion:nil];
            
        }else{
            
            //播放一个动画消失
            UIImageView *imageV = [[UIImageView alloc] initWithFrame:self.bounds];
            
            NSMutableArray *imageArray = [NSMutableArray array];
            for (int i = 0 ; i < 8; i++) {
                UIImage *image =  [UIImage imageNamed:[NSString stringWithFormat:@"%d",i +1]];
                [imageArray addObject:image];
            }
            
            imageV.animationImages = imageArray;
            imageV.animationDuration = 1;
            [imageV startAnimating];
            
            [self addSubview:imageV];
            
            // 延迟1s后执行
            dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(0.5 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
                
                // 将自己从父控件中移除
                [self removeFromSuperview];
                
            });
        }
    }
    
}

#pragma -mark 两圆描述一个路径
/**
 给定两个圆描述一个不规则路径,然后填充这条路径,就是粘性效果
 
 @param smallCircle 小圆
 @param bigCircle 大圆
 @return 路径
 */
- (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:bigCircle];
    
    // 如果没有移动,则返回nil
    if (d <= 0) {
        return nil;
    }
    
    // X轴偏移量 / d
    CGFloat sinθ = (x2 - x1) / d;
    // Y轴偏移量 / d
    CGFloat cosθ = (y2 - y1) / d;
    
    /**
     已知一个角,一个斜边
     角的邻边 = 斜边 * cosθ
     角的对边 = 斜边 * sinθ
     */
    
    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;
    
}

#pragma -mark 两圆之间的距离
//当手指拖动大圆时,小圆的半径会根据拖动的距离进行减小.所以要计算出两个圆之间的距离.
//计算完毕后.让小圆的原始半径每次都减去一个距离比例.重新设置尺寸大小.和小圆的半径.
/**
 计算小圆中心到大圆中心的距离
 
 @param smallCircle 小圆
 @param bigCircle 大圆
 */
- (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 sqrt(offsetX * offsetX + offsetY * offsetY);
}

#pragma -mark 关闭按钮的高亮状态
/**
 取消按钮的高亮状态
 
 */
- (void)setHighlighted:(BOOL)highlighted
{
    
}

@end