贝塞尔曲线&CAShapeLayer超炫动画

//

//  LYJBezierPathCuteView.m

//  UIBezierPathAndCAShapeLayer超炫动画

//

//  Created by ~~~ on 16/5/4.

//  Copyright © 2016年 ~~~. All rights reserved.

//

#import "LYJBezierPathCuteView.h"

#define SCREEN_WIDTH    ([[UIScreen mainScreen] bounds].size.width)

#define SCREEN_HEIGHT   ([[UIScreen mainScreen] bounds].size.height)

#define MIN_HEIGHT          100
// 图形最小高度

@interface
LYJBezierPathCuteView()

@property (nonatomic,assign)
CGFloat mHeight;

@property (nonatomic,assign)
CGFloat curveX;       
// r5点x坐标

@property (nonatomic,assign)
CGFloat curveY;       
// r5点y坐标

@property (nonatomic,strong)
UIView *curveView;    
// r5红点

@property (nonatomic,strong)
CAShapeLayer *shapeLayer;

@property (nonatomic,strong)
CADisplayLink *displayLink;

@property (nonatomic,assign)
BOOL isAnimating;

@end

@implementation LYJBezierPathCuteView

static NSString *kX =
@"curveX";

static NSString *kY =
@"curveY";

-(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
configShapeLayer];

        [self
configCurveView];

        [self
configAction];

    }

    

    return
self;

}

- (void)dealloc {

    [self
removeObserver:self
forKeyPath:kX];

    [self
removeObserver:self
forKeyPath:kY];

}

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

    if ([keyPath
isEqualToString:kX] || [keyPath
isEqualToString:kY]) {

        [self
updateShapeLayerPath];

    }

}

#pragma mark 初始化

// 初始化CAShapeLayer

- (void)configShapeLayer

{

    _shapeLayer = [CAShapeLayer
layer];

    _shapeLayer.fillColor = [UIColor
colorWithRed:57/255.0
green:67/255.0
blue:89/255.0
alpha:1.0].CGColor;

    [self.layer
addSublayer:_shapeLayer];

}

// 初始化r5点

- (void)configCurveView

{

    // _curveView就是r5点

    self.curveX =
SCREEN_HEIGHT / 2.0;      
// r5点x坐标

    self.curveY =
MIN_HEIGHT;                
// r5点y坐标

    _curveView = [[UIView
alloc] initWithFrame:CGRectMake(_curveX,
_curveY,
3, 3)];

    _curveView.backgroundColor = [UIColor
redColor];

    [self
addSubview:_curveView];

}

// 添加移动手势&CADisplayLink

- (void)configAction

{

    _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];

   
// 在手势结束的时候才调用calculatePath方法，所以一开始是暂停的

    _displayLink.paused =
YES;

}

/*

 手势移动时，r5红点跟着手势移动，_shapeLayer则根据r5的坐标来扩大自己的区域

 

 手势结束时，r5红点通过UIView的动画方法来改变r5的坐标,同时_shapeLayer根据r5的坐标缩小自己的区域并最终返回原形

 */

- (void)handlePanAction:(UIPanGestureRecognizer *)pan

{

    if(!_isAnimating)

    {

        if(pan.state ==
UIGestureRecognizerStateChanged)

        {

            // 手势移动时，_shapeLayer跟着手势向下扩大区域

            CGPoint point = [pan
translationInView:self];

            

            // 这部分代码使r5红点跟着手势走

            _mHeight = point.y*0.7 +
MIN_HEIGHT;

            self.curveX =
SCREEN_WIDTH/2.0 + point.x;

            self.curveY =
_mHeight > MIN_HEIGHT ?
_mHeight : MIN_HEIGHT;

            _curveView.frame =
CGRectMake(_curveX,

                                          _curveY,

                                          _curveView.frame.size.width,

                                          _curveView.frame.size.height);

        }

        else
if (pan.state ==
UIGestureRecognizerStateCancelled ||

                 pan.state ==
UIGestureRecognizerStateEnded ||

                 pan.state ==
UIGestureRecognizerStateFailed)

        {

            // 手势结束时,_shapeLayer返回原状并产生弹簧动效

            _isAnimating =
YES;

            _displayLink.paused =
NO;          
//开启displaylink,会执行方法calculatePath.

            

            // 弹簧动效

            [UIView
animateWithDuration:1.0

                                  delay:0.0

                 usingSpringWithDamping:0.5

                  initialSpringVelocity:0

                                options:UIViewAnimationOptionCurveEaseInOut

                             animations:^{

                                 

                                 //
曲线点(r5点)是一个view.所以在block中有弹簧效果.然后根据他的动效路径,在calculatePath中计算弹性图形的形状

                                 _curveView.frame =
CGRectMake(SCREEN_WIDTH/2.0,
MIN_HEIGHT, 3,
3);

                                 

                             } completion:^(BOOL finished) {

                                 

                                 if(finished)

                                 {

                                     _displayLink.paused =
YES;

                                     _isAnimating =
NO;

                                 }

                                 

                             }];

        }

    }

}

// 根据r5的位置，更新_shapeLayer形状

- (void)updateShapeLayerPath

{

    // 更新_shapeLayer形状

    UIBezierPath *tPath = [UIBezierPath
bezierPath];

    [tPath moveToPoint:CGPointMake(0,
0)];                         
// r1点

    [tPath addLineToPoint:CGPointMake(SCREEN_WIDTH,
0)];            // r2点

    [tPath addLineToPoint:CGPointMake(SCREEN_WIDTH, 
MIN_HEIGHT)]; 
// r4点

    [tPath addQuadCurveToPoint:CGPointMake(0,
MIN_HEIGHT)

                  controlPoint:CGPointMake(_curveX,
_curveY)];      // r3,r4,r5确定的一个弧线

    [tPath closePath];

    _shapeLayer.path = tPath.CGPath;

}

// 计算弹簧效果坐标

- (void)calculatePath

{

   
// 由于手势结束时,r5执行了一个UIView的弹簧动画,把这个过程的坐标记录下来,并相应的画出_shapeLayer形状

    CALayer *layer =
_curveView.layer.presentationLayer;

    self.curveX = layer.position.x;

    self.curveY = layer.position.y;

}

/*

 r5点的作用非常重要，因为直接对CAShapeLayer实现动效不太好实现。所以通过对r5点实现弹簧动效，记录r5点的坐标，再用UIBezierPath形成路径，最后赋予CAShapeLayer，间接的完成了CAShapeLayer的弹簧动效。

 */

// Only override drawRect: if you perform custom drawing.

// An empty implementation adversely affects performance during animation.

- (void)drawRect:(CGRect)rect {

    // Drawing code

}

@end