IOS developing the jelly effect in the drop-down navigation bar

I saw the jelly effect with UIBezierPath written by others in the Jane book and felt the effect was great. I took the time to copy the code, simplified some things and added a few notes of my own, so as to record it for future recall. I also hope it will be helpful to you.

#define MIN_HEIGHT 100@interface ViewController () @property(strong,readwrite,nonatomic)CAShapeLayer *shapeLayer; Deformation view / / @ property (assign readwrite, nonatomic)floatcurveX; / / drag the red dot x coordinate @ property (assign to readwrite, nonatomic)floatcurveY; / / drag the red dot y @ property (strong, readwrite nonatomic) UIView * curveView; / / drag the red dot @ property (assign readwrite, nonatomic)floatmHeight; / / gestures move relative height @ property (strong, readwrite nonatomic) CADisplayLink * displayLink; @endCopy the code

@implementation ViewController - (void)viewDidLoad { [super viewDidLoad]; _shapeLayer=[CAShapeLayer layer]; _shapelayer.fillcolor =[UIColor colorWithRed:0.2 green:0.2 blue:0.2 alpha:1]. [self.view.layer addSublayer:_shapeLayer]; / / initialize drag point _curveX = self. The frame. The size, width / 2; _curveY=MIN_HEIGHT; _curveView=[[UIView alloc]initWithFrame:CGRectMake(_curveX, _curveY, 3, 3)]; _curveView.backgroundColor=[UIColor redColor]; [self.view addSubview:_curveView]; _mHeight=100; UIPanGestureRecognizer *pan=[[UIPanGestureRecognizer alloc]initWithTarget:self action:@selector(panGestureAction:)]; self.view.userInteractionEnabled=YES; [self.view addGestureRecognizer:pan]; / / open loop _displayLink = [CADisplayLink displayLinkWithTarget: self selector: @ the selector (calculatePath)]; [_displayLink addToRunLoop:[NSRunLoop currentRunLoop]forMode:NSDefaultRunLoopMode];
    _displayLink.paused=YES;
    
    [self updateShapeLayerPath];
}
Copy the code

-(void)panGestureAction:(UIPanGestureRecognizer *)pan
{
    if(pan.state==UIGestureRecognizerStateChanged) { CGPoint point=[pan translationInView:self.view]; _mHeight = point. * 0.7 + MIN_HEIGHT y; / / by 0.7 can make better drag _curveX = self. The frame. The size, width / 2 + point x; _curveY=_mHeight>MIN_HEIGHT? _mHeight:MIN_HEIGHT; _curveView.frame=CGRectMake(_curveX, _curveY, 3, 3); [self updateShapeLayerPath]; }else if(pan.state==UIGestureRecognizerStateEnded) { _displayLink.paused = NO; [UIView animateWithDuration: delay 1.0:0.0 usingSpringWithDamping: initialSpringVelocity 0.5:1 Options: UIViewAnimationOptionCurveEaseInOut animations: ^ {_curveView. Frame = CGRectMake (self. View. Frame. The size, width / 2.0, } completion:^(BOOL finished) {if(finished) { _displayLink.paused = YES; }}]; }}Copy the code

Drag end restore the animation of the original position frame according to _curveView.frame and calculate the navigation shape

-(void)calculatePath
{
    _curveX=_curveView.center.x;
    _curveY=_curveView.center.y;
    [self updateShapeLayerPath];


}
Copy the code

Update navigation bar bezier curve

-(void)updateShapeLayerPath
{
    UIBezierPath *path=[UIBezierPath bezierPath];
    [path moveToPoint:CGPointMake(0, 0)];
    [path addLineToPoint:CGPointMake(self.view.frame.size.width, 0)];
    [path addLineToPoint:CGPointMake(self.view.frame.size.width, MIN_HEIGHT)];
    [path addQuadCurveToPoint:CGPointMake(0, MIN_HEIGHT) controlPoint:CGPointMake(_curveX, _curveY)];
    [path closePath];
    
    _shapeLayer.path=path.CGPath;
    
}



@end
Copy the code