UIBezierPath先来对付它

4.gif

1.gif

2.gif

3.gif

4

先上图，这就是所谓的贝尔曲线，公式我不会，我也不懂，感觉大学白学了
果冻参考链接

先来一个简单一点的果冻效果：

4.gif

代码没有什么难度，所以注释比较少，来直接上代码

//
//  PullCircleView.m
//  MyTest
//
//  Created by 丁祥 on 2017/3/24.
//  Copyright © 2017年 wonders. All rights reserved.
//

#import "PullCircleView.h"
#define boundSize 150
@interface CircleView : UIView

@end

@interface PullCircleView()
@property (nonatomic,strong)CAShapeLayer *shapeLayer;
@property (nonatomic,assign)double r1;
@property (nonatomic,assign)double r2;
@property (nonatomic,assign)double x1;
@property (nonatomic,assign)double x2;
@property (nonatomic,assign)double y1;
@property (nonatomic,assign)double y2;
@property (nonatomic,assign)double d;
@property (nonatomic,assign)CGPoint pointA;
@property (nonatomic,assign)CGPoint pointB;
@property (nonatomic,assign)CGPoint pointC;
@property (nonatomic,assign)CGPoint pointD;
@property (nonatomic,assign)CGPoint pointM;
@property (nonatomic,assign)CGPoint pointN;

@property (nonatomic,strong)CADisplayLink *displayLink;
@property (nonatomic,strong)CircleView *circleViewOne;//为了做出弹簧效果
@property (nonatomic,strong)CircleView *circleViewTwo;//为了做出弹簧效果
@property (nonatomic,assign)BOOL state;//点断以后

@end
@implementation PullCircleView

- (instancetype)initWithFrame:(CGRect)frame
{
    
    self =[super initWithFrame:frame];
    if (self) {
        
        _shapeLayer =[CAShapeLayer layer];
        _shapeLayer.fillColor=[UIColor redColor].CGColor;
        [self.layer addSublayer:_shapeLayer];
        [self loadData];
        [self addGesture];
        
        _circleViewOne =[[CircleView alloc] initWithFrame:CGRectMake(0, 0, 2*_r1, 2*_r1)];
        
        _circleViewOne.center =CGPointMake(_x1, _y1);
        
        _circleViewTwo =[[CircleView alloc] initWithFrame:CGRectMake(0, 0, 2*_r2, 2*_r2)];
        
        _circleViewTwo.center =CGPointMake(_x2, _y2);
        
        _state =YES;
        
        [self addSubview:_circleViewOne];
        [self addSubview:_circleViewTwo];
        
    }
    
    return self;

}

- (void)addGesture
{
    _displayLink =[CADisplayLink displayLinkWithTarget:self selector:@selector(calcauLayer)];
    [_displayLink addToRunLoop:[NSRunLoop mainRunLoop] forMode:NSDefaultRunLoopMode];
    _displayLink.paused =YES;
    
    UIPanGestureRecognizer *pan =[[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(pullLayer:)];
    [self addGestureRecognizer:pan];


}

- (void)calcauLayer
{
    CALayer *layer =_circleViewTwo.layer.presentationLayer;
    _x2 =layer.position.x;
    _y2 =layer.position.y;
    
    CGFloat scale = (1 - [self getDistance]/boundSize);
    _circleViewOne.transform = CGAffineTransformMakeScale(scale, scale);
    [self updateLayer];
}

- (void)updateLayer
{
    
    [self setNeedsDisplay];

}

- (void)pullLayer:(UIPanGestureRecognizer *)pangesture
{
    if (pangesture.state == UIGestureRecognizerStateChanged){
        
        CGPoint point =[pangesture locationInView:self];
        _x2 =point.x;
        _y2 =point.y;
        _circleViewTwo.center =CGPointMake(_x2, _y2);
        
        if ([self getDistance]

1.中间用到了CADisplayLink 结合UIBezierPath来去更新drawRect

2.用到了阻尼系数的动画，也就是spring函数

3.对于动画，可以选择spring函数，也可以用keysAnimal这个动画，不过要设置多个关键帧，所以直接选择spring函数比较方便

4.关键就是UIBezierPath的各个点的计算问题，可以根据前三个图，来认识一下UIBezierPath的特性，然后去计算就比较容易

在写的过程我遇到的问题：
1. 断点的计算，开始的圆我都是用path画的后来发现，还有断点问题，又重新写了一下，
2.曲线的曲度，我开始是不改变原点的大小，去改变曲线cotrolPoint的位置，但是形变无法控制，折腾一下午没成功，还是去改变原点的scale比较靠谱

弹出菜单链接