#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坐標(biāo)
@property (nonatomic,assign) CGFloat curveY;
@property (nonatomic,strong) UIView *curceView;
// NSTimer 我們通常會用在背景計算袄膏，更新一些數(shù)值資料壳贪，而如果牽涉到畫面的更新远剩，動畫過程的演變煌茴，我們通常會用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<NSString *,id> *)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默認(rèn)每秒運行60次calculatePath是算出在運行期間_curveView的坐標(biāo)埋合，從而確定_shapeLayer的形狀
_displayLink = [CADisplayLink displayLinkWithTarget:self selector:@selector(calculatePath)];
[_displayLink addToRunLoop:[NSRunLoop currentRunLoop] forMode:NSDefaultRunLoopMode];
_displayLink.paused = YES;//控制CADisplayLink的運行
_displayLink.frameInterval = 2;//cadisplayLink每隔一幀運行一次,每秒運行30次 ,默認(rèn)為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跟著手勢向下擴展區(qū)域
        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){
         // 手勢結(jié)束時,_shapeLayer返回原狀并產(chǎn)生彈簧動效
        _isAnimating = YES;
        _displayLink.paused = NO;  //開啟displaylink,會執(zhí)行方法calculatePath.
        
        //彈簧效果 UIViewAnimationOptionCurveEaseInOut動畫由快到慢
        [UIView animateWithDuration:1.0 delay:0.0 usingSpringWithDamping:0.5 initialSpringVelocity:0 options:UIViewAnimationOptionCurveEaseInOut animations:^{
           //曲線點(r5點)是一個view,所有在block中有彈簧效果,然后根據(jù)他的動效路徑,在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{
//由于手勢結(jié)束時,r5執(zhí)行一個uiview的彈簧動畫,把這個過程記錄下來,并畫出相應(yīng)的_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];
}