iOS 下拉刷新之果冻效果

 #define SYS_DEVICE_WIDTH [[UIScreen mainScreen] bounds].size.width
 #define SYS_DEVICE_HEIGHT [[UIScreen mainScreen] bounds].size.height
 #define MIN_HEIGHT 100

@property (nonatomic,strong) CAShapeLayer *shapeLayer;
#pragma mark --果冻效果
@property (nonatomic,assign) CGFloat mHeight;
@property (nonatomic,assign) CGFloat curveX; //r5点x坐标
@property (nonatomic,assign) CGFloat curveY;
@property (nonatomic,strong) UIView *curceView;
// NSTimer 我们通常会用在背景计算，更新一些数值资料，而如果牵涉到画面的更新，动画过程的演变，我们通常会用CADisplayLink
@property (nonatomic,strong) CADisplayLink *displayLink;
@property (nonatomic,assign) BOOL isAnimating;



 //下拉刷新的果冻效果
 -(void)effectOfJelly{
     [self addObserver:self forKeyPath:kX options: NSKeyValueObservingOptionNew context:nil];
     [self addObserver:self forKeyPath:kY options:NSKeyValueObservingOptionNew context:nil];
     [self configShapeLayer];
     [self confiCurveView];
     [self confifAction];
}

//初始化shapeLayer
-(void)configShapeLayer{

_shapeLayer = [CAShapeLayer layer];
_shapeLayer.fillColor = ([UIColor colorWithRed:57/255.0 green:67/255.0 blue:89/255.0 alpha:1]).CGColor;
[self.layer addSublayer:_shapeLayer];

}

-(void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary *)change context:(void *)context{

if ([keyPath isEqualToString:kX] || [keyPath isEqualToString:kY]) {
    [self updateShapeLayerPath];
    
}
}

-(void)confifAction{

_mHeight = 100;//手势移动时相对高度
_isAnimating = NO;
UIPanGestureRecognizer *pan = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(handlePanAction:)];
self.userInteractionEnabled = YES;
[self addGestureRecognizer:pan];
// CADisplayLink默认每秒运行60次calculatePath是算出在运行期间_curveView的坐标，从而确定_shapeLayer的形状
_displayLink = [CADisplayLink displayLinkWithTarget:self selector:@selector(calculatePath)];
[_displayLink addToRunLoop:[NSRunLoop currentRunLoop] forMode:NSDefaultRunLoopMode];
_displayLink.paused = YES;//控制CADisplayLink的运行
_displayLink.frameInterval = 2;//cadisplayLink每隔一帧运行一次,每秒运行30次 ,默认为1

}
-(void)confiCurveView{
self.curveX = SYS_DEVICE_WIDTH / 2.0;
self.curveY = MIN_HEIGHT;
_curceView = [[UIView alloc] initWithFrame:CGRectMake(_curveX, _curveY, 3, 3)];
_curceView.backgroundColor = [UIColor redColor];
[self addSubview:_curceView];
}

-(void)handlePanAction:(UIPanGestureRecognizer *)sender{

if (!_isAnimating) {
    
    if (sender.state == UIGestureRecognizerStateChanged) {
        //手势移动时,_shaprLayer跟着手势向下扩展区域
        CGPoint point = [sender translationInView:self];
      
        //这部分代码使r5点跟着手势走
        _mHeight = point.y * 0.7 + MIN_HEIGHT;
        self.curveX = SYS_DEVICE_WIDTH / 2.0 + point.x;
        self.curveY = _mHeight > MIN_HEIGHT ? _mHeight : MIN_HEIGHT;
        _curceView.frame = CGRectMake(_curveX, _curveY, _curceView.frame.size.width, _curceView.frame.size.height);
        
    
        
    }else if (sender.state == UIGestureRecognizerStateCancelled || sender.state == UIGestureRecognizerStateEnded || sender.state == UIGestureRecognizerStateFailed){
         // 手势结束时,_shapeLayer返回原状并产生弹簧动效
        _isAnimating = YES;
        _displayLink.paused = NO;  //开启displaylink,会执行方法calculatePath.
        
        //弹簧效果 UIViewAnimationOptionCurveEaseInOut动画由快到慢
        [UIView animateWithDuration:1.0 delay:0.0 usingSpringWithDamping:0.5 initialSpringVelocity:0 options:UIViewAnimationOptionCurveEaseInOut animations:^{
           //曲线点(r5点)是一个view,所有在block中有弹簧效果,然后根据他的动效路径,在calcutepath中计算弹性图形的形状
            _curceView.frame = CGRectMake(SYS_DEVICE_WIDTH/ 2.0, MIN_HEIGHT, 3, 3);
            
            
            
        } completion:^(BOOL finished) {
            
            if (finished) {
                _displayLink.paused = YES;
                _isAnimating = NO;
                
            }
            
        }];
        
    }
    
    
}
}

-(void)updateShapeLayerPath{

//更新_shapeLayer形状
UIBezierPath *tpath = [UIBezierPath bezierPath];
[tpath moveToPoint:CGPointMake(0, 0)];
[tpath addLineToPoint:CGPointMake(SYS_DEVICE_WIDTH, 0)];
[tpath addLineToPoint:CGPointMake(SYS_DEVICE_WIDTH,MIN_HEIGHT)];
[tpath addQuadCurveToPoint:CGPointMake(0, MIN_HEIGHT) controlPoint:CGPointMake(_curveX, _curveY)];// r3,r4,r5确定的一个弧线

[tpath closePath];
_shapeLayer.path = tpath.CGPath;
}

-(void)calculatePath{
//由于手势结束时,r5执行一个uiview的弹簧动画,把这个过程记录下来,并画出相应的_shapLayer
CALayer *layer = _curceView.layer.presentationLayer;
self.curveX = layer.position.x;
self.curveY = layer.position.y;

}

-(void)dealloc{

[self removeObserver:self forKeyPath:kX];
[self removeObserver:self forKeyPath:kY];
}