基于CAShapLayer和UIBezierPath的下拉刷新动画

在demo的记录之前,先来记录一下几个需要的知识点.

CAShapLayer
他是CALayer的一个子类,有的小伙伴就说了都是layer,那CAShapLayer和CALayer有什么不同呢?最主要的是,单独和创建一个CALayer,设置大小颜色等属性添加到父layer上就可以显现出来,但是对于CAShapLayer来说必须制定一个path路径才可以显现出来,也就是单独声明出来的CAShapLayer是没有形状的,必须把他的path属性和一个贝塞尔曲线相关联(贝塞尔曲线的形状决定了CAShapLayer的形状)才可以看到.
fillColor填充色
strokeColor轮廓的颜色

UIBezierPath

• 该方法将会从 currentPoint 到 指定的 endPoint 追加一条二次贝塞尔曲线.
• currentPoint、endPoint、controlPoint 三者的关系最终定义了二次贝塞尔曲线的形状.
• 二次贝塞尔曲线的弯曲由一个控制点来控制. 如下图所示
• Note: 调用该方法前, 你必须先设置 currentPoint, 如果路径为空,

•   并且尚未设置 currentPoint, 调用该方法则不会产生任何效果. 
  

•   当添加完贝塞尔曲线后, 该方法将会自动更新 currentPoint 为
  

•   指定的结束点
  

• @param endPoint: 终点
• @param controlPoint: 控制点

• (void)addQuadCurveToPoint:(CGPoint)endPoint controlPoint:(CGPoint)controlPoint;

CADisPlayLink
CADisplayLink是一个能让我们以和屏幕刷新率相同的频率将内容画到屏幕上的定时器。我们在应用中创建一个新的 CADisplayLink 对象，把它添加到一个runloop中，并给它提供一个 target 和selector 在屏幕刷新的时候调用。
CADisplayLink使用场合相对专一，适合做UI的不停重绘，比如自定义动画引擎或者视频播放的渲染。NSTimer的使用范围要广泛的多，各种需要单次或者循环定时处理的任务都可以使用。在UI相关的动画或者显示内容使用 CADisplayLink比起用NSTimer的好处就是我们不需要在格外关心屏幕的刷新频率了，因为它本身就是跟屏幕刷新同步的。

4.进入正题

.m
首先自定义一个下拉刷新的view
define WIDTH ([[UIScreen mainScreen] bounds].size.width)
define HEIGHT ([[UIScreen mainScreen] bounds].size.height)
define MIN_HEIGHT  100  // 图形最小高度
@interface RefreshView()
@property(nonatomic,assign)CGFloat mHeight;
@property(nonatomic,assign)CGFloat X;// 红点x坐标
@property(nonatomic,assign)CGFloat Y;// 红点y坐标
@property(nonatomic,strong)CAShapeLayer *shapLayer;
@property(nonatomic,strong)CADisplayLink *displayLink;
@property(nonatomic,strong)UIView *redPointView;//红点
@property(nonatomic,assign)BOOL isAnimating;
@end
@implementation RefreshView
static NSString *kX = @"X";
static NSString *kY = @"Y";
-(instancetype)initWithFrame:(CGRect)frame{
    self = [super initWithFrame:frame];
    if (self) {
        [self addObserver:self forKeyPath:kX options:NSKeyValueObservingOptionNew context:nil];
        [self addObserver:self forKeyPath:kY options:NSKeyValueObservingOptionNew context:nil];
        [self makeLayer];
        [self addGesture];
    }
    return self;
}

-(void)dealloc{
    [self removeObserver:self forKeyPath:kX];
    [self removeObserver:self forKeyPath:kY];
}

-(void)makeLayer{
    //添加layer层
    self.shapLayer = [CAShapeLayer layer];
    _shapLayer.fillColor = [UIColor colorWithRed:57/255.0 green:67/255.0 blue:89/255.0 alpha:1.0].CGColor;
    [self.layer addSublayer:_shapLayer];
    
    //初始化红点
    self.X = WIDTH/2.0;
    self.Y = MIN_HEIGHT;
    self.redPointView = [[UIView alloc]initWithFrame:CGRectMake(_X, _Y, 3, 3)];
    _redPointView.backgroundColor = [UIColor redColor];
    [self addSubview:_redPointView];
}

-(void)addGesture{
    //手势移动时相对高度
    _mHeight = 100;
    //是否处于动效状态
    _isAnimating = NO;
    
    //手势
    UIPanGestureRecognizer *pan = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(handlePanAction:)];
    self.userInteractionEnabled = YES;
    [self addGestureRecognizer:pan];
    
    // CADisplayLink默认每秒运行60次calculatePath是算出在运行期间_curveView的坐标，从而确定_shapeLayer的形状
    self.displayLink = [CADisplayLink displayLinkWithTarget:self selector:@selector(calculatePath)];
    [_displayLink addToRunLoop:[NSRunLoop currentRunLoop] forMode:NSDefaultRunLoopMode];
    _displayLink.paused = YES;
}

#pragma mark - Action
-(void)handlePanAction:(UIPanGestureRecognizer *)pan{
    if (!_isAnimating) {
        if (pan.state == UIGestureRecognizerStateChanged) {
            //设置红点跟随手势而移动
            CGPoint point = [pan translationInView:self];
            _mHeight = point.y*0.7 +MIN_HEIGHT;
            /***注意因为使用的是kvo因此只有调用setter方法或使用kvc才可以触发监听事件***/
            self.X = WIDTH/2.0 + point.x;
            //防止手势向上拖拽时红点向上跑
            self.Y = _mHeight > MIN_HEIGHT ? _mHeight : MIN_HEIGHT;
            _redPointView.frame = CGRectMake(_X, _Y, _redPointView.frame.size.width, _redPointView.frame.size.height);
        }
        else if (pan.state == UIGestureRecognizerStateCancelled || pan.state == UIGestureRecognizerStateEnded || pan.state == UIGestureRecognizerStateFailed){
            //拖拽手势结束,设置回弹效果
            _isAnimating = YES;
            //开启displaylink,会执行方法calculatePath.
            _displayLink.paused = NO;
            //弹簧回弹
            [UIView animateWithDuration:1.0 delay:0.0 usingSpringWithDamping:0.5 initialSpringVelocity:0 options:UIViewAnimationOptionCurveEaseInOut animations:^{
                //红点是一个view.所以在block中有弹簧效果.然后根据他的动效路径,在calculatePath中计算弹性图形的形状
                _redPointView.frame = CGRectMake(WIDTH/2, MIN_HEIGHT, 3, 3);
            } completion:^(BOOL finished) {
                if(finished){
                    //停止计算
                    _displayLink.paused = YES;
                    _isAnimating = NO;
                }
            }];
        }
    }
}
-(void)calculatePath{
    // 由于手势结束时,r5执行了一个UIView的弹簧动画,把这个过程的坐标记录下来,并相应的画出_shapeLayer形状
    CALayer *layer = _redPointView.layer.presentationLayer;
    self.X = layer.position.x;
    self.Y = layer.position.y;
}

#pragma mark - 监听_X和_Y变化情况
-(void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary *)change context:(void *)context{
    if ([keyPath isEqualToString:kX] || [keyPath isEqualToString:kY]) {
        [self updateShapeLayerPath];
    }
}

#pragma mark - 更新shaplayer
- (void)updateShapeLayerPath{
    // 更新_shapeLayer形状
    UIBezierPath *tPath = [UIBezierPath bezierPath];
    [tPath moveToPoint:CGPointMake(0, 0)];                   // r1点
    [tPath addLineToPoint:CGPointMake(WIDTH, 0)];            // r2点
    [tPath addLineToPoint:CGPointMake(WIDTH,  MIN_HEIGHT)];  // r4点
    [tPath addQuadCurveToPoint:CGPointMake(0, MIN_HEIGHT) controlPoint:CGPointMake(_X, _Y)];
    // r3,r4,r5确定的一个弧线
    [tPath closePath];
    _shapLayer.path = tPath.CGPath;
}

使用时
RefreshView *cuteView = [[RefreshView alloc] initWithFrame:CGRectMake(0, 0, 320, 568)];
cuteView.backgroundColor = [UIColor whiteColor];
[self.view addSubview:cuteView];