利用UIBezierPath实现的橡皮筋动画效果(OC版)

      本教程旨在说明第三方库DGElasticPullToRefresh的橡皮筋动画效果的实现原理,不过它使用swift实现的,平时用OC最多,顾抽出时间翻译成OC版,供大家参考。

       前提:

       在讲这篇教程之前,如果你对UIBezierPath和CAShapeLayer还不熟悉的话,那需要对这两个方面要做了解,这样才能够看懂代码部分。UIBezierPath可以绘制贝塞尔曲线,那么就需要设置控制点,这里分为三段,其中L3和L2、R1和R2、c和R1,效果如下图所示:

       1、初始状态效果

利用UIBezierPath实现的橡皮筋动画效果(OC版)_第1张图片

       2、拉伸后的效果

利用UIBezierPath实现的橡皮筋动画效果(OC版)_第2张图片

        拉伸后会有个回弹效果,为了达到这种效果,可以通过CADisplayLink来实现,它将在主run loop中运行,并且每帧调用一次所需的功能。


        实现:

        one part

- (void)viewDidLoad {
    [super viewDidLoad];
    
    _minimalHeight = 50.0;   //原始状态的高度
    _maxWaveHeight = 100.0;  //最高状态的高度
    
    _animating = NO;
    self.view.userInteractionEnabled = YES;
    
    //矩形框
    _shapeLayer = [CAShapeLayer layer];
    _shapeLayer.frame = CGRectMake(0, 0, self.view.bounds.size.width, _minimalHeight);
    _shapeLayer.backgroundColor = [UIColor colorWithRed:91/255.0 green:144/255.0 blue:212/255.0 alpha:1.0].CGColor;
    [self.view.layer addSublayer:_shapeLayer];
    
    //添加手势,可以改变frame的高度
    UIPanGestureRecognizer *panG = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(panGestureDidMove:)];
    [self.view addGestureRecognizer:panG];
}

- (void) panGestureDidMove:(UIPanGestureRecognizer *)pan
{
    if (pan.state == UIGestureRecognizerStateEnded || pan.state == UIGestureRecognizerStateFailed || pan.state == UIGestureRecognizerStateCancelled) {
        
        
    }
    else
    {
        CGFloat testHeight = _minimalHeight + MAX([pan translationInView:self.view].y, 0);
        CGRect rect = _shapeLayer.frame;
        rect.size.height = testHeight;
        _shapeLayer.frame = rect;
    }
}
               解释:这里很简单,先初始化一个CAShapeLayer矩形框图层,然后给视图添加拖动的手势,利用当前手指拖动时视图中point中的y坐标来改变CAShapeLayer的高度。 利用UIBezierPath实现的橡皮筋动画效果(OC版)_第3张图片


       仔细观察,会发现当改变图层的高度时,会有一点点延时出现,那这样效果不好,又该怎么去解决呢?那么就需要添加下面一行代码来防止这种现象的出现。

    _shapeLayer.actions = @{@"position":[NSNull null],@"bounds":[NSNull null],@"path":[NSNull null]};  //关闭隐式动画,防止带来延迟效果
               添加到addSubLayer:方法前面,再次运行程序,发现之前延时的效果已经没有了。

利用UIBezierPath实现的橡皮筋动画效果(OC版)_第4张图片
        two part

        这部分就是添加之前提及的7个控制点,l1、l2、l3、c、r1、r2、r3,这7个点其实是一个3x3的view,代码如下:

    _l3ControlPointView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 3, 3)];
    _l3ControlPointView.backgroundColor = [UIColor redColor];
    [self.view addSubview:_l3ControlPointView];
    _l2ControlPointView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 3, 3)];
    _l2ControlPointView.backgroundColor = [UIColor greenColor];
    [self.view addSubview:_l2ControlPointView];
    _l1ControlPointView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 3, 3)];
    _l1ControlPointView.backgroundColor = [UIColor orangeColor];
    [self.view addSubview:_l1ControlPointView];
    _cControlPointView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 3, 3)];
    _cControlPointView.backgroundColor = [UIColor blueColor];
    [self.view addSubview:_cControlPointView];
    _r1ControlPointView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 3, 3)];
    _r1ControlPointView.backgroundColor = [UIColor orangeColor];
    [self.view addSubview:_r1ControlPointView];
    _r2ControlPointView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 3, 3)];
    _r2ControlPointView.backgroundColor = [UIColor purpleColor];
    [self.view addSubview:_r2ControlPointView];
    _r3ControlPointView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 3, 3)];
    _r3ControlPointView.backgroundColor = [UIColor whiteColor];
    [self.view addSubview:_r3ControlPointView];
              接下来需要做一个UIView extension,当动画从一个frame到另外一个frame时,需要获取UIView.frame和UIView.center来代替当前的动画以达到最终的动画效果;所以我们就需要获取到UIView.layer.presentationLayer的position;这里涉及到一个presentationLayer,做动画时presentationLayer里面的值就是当前屏幕的值,这里就不一一赘述。代码如下:

- (CGPoint) usePresentationLayerIfPossible:(BOOL)theBool
{
    if (theBool == YES) {
        
        CALayer *theLayer = self.layer;
        return [[theLayer presentationLayer] position];
    }
    
        return self.center;
}

       three part

       创建当前路径的方法,就是绘制贝塞尔曲线,其中两个点是控制点,其中l3和l2、c和r1、r1和r2,这里涉及到UIBezierPath绘制贝塞尔曲线知识,返回当前shapeLayer的CGPath,代码如下

- (CGPathRef )currentPath
{
    CGFloat width = self.view.bounds.size.width;
    UIBezierPath *bezierPath = [UIBezierPath bezierPath];
    [bezierPath moveToPoint:CGPointMake(0, 0)];
    [bezierPath addLineToPoint:CGPointMake(0, [_l3ControlPointView usePresentationLayerIfPossible:_animating].y)];
    [bezierPath addCurveToPoint:[_l1ControlPointView usePresentationLayerIfPossible:_animating] controlPoint1:[_l3ControlPointView usePresentationLayerIfPossible:_animating] controlPoint2:[_l2ControlPointView usePresentationLayerIfPossible:_animating]];
    [bezierPath addCurveToPoint:[_r1ControlPointView usePresentationLayerIfPossible:_animating] controlPoint1:[_cControlPointView usePresentationLayerIfPossible:_animating] controlPoint2:[_r1ControlPointView usePresentationLayerIfPossible:_animating]];
    [bezierPath addCurveToPoint:[_r3ControlPointView usePresentationLayerIfPossible:_animating] controlPoint1:[_r1ControlPointView usePresentationLayerIfPossible:_animating] controlPoint2:[_r2ControlPointView usePresentationLayerIfPossible:_animating]];
    [bezierPath addLineToPoint:CGPointMake(width, 0.0)];
    [bezierPath closePath];
    
    return bezierPath.CGPath;
}
              由于接下来需要使用CADisplayLink的selector(),那么就需要shapelayer被更新,更新shapelayer的路径(path)。

- (void) updateShapeLayer
{
    _shapeLayer.path = [self currentPath];
}
             four part

       之前创建了多个控制点,那么当拖动的时候这些控制点位置也是改变的,就需要去布局拖动后各个控制点。代码如下

- (void) layoutControlPoints:(CGFloat)baseHeight waveHeight:(CGFloat)waveHeight locationX:(CGFloat)locationX
{
    CGFloat width = self.view.bounds.size.width;
    CGFloat minLeftX = MIN((locationX - width / 2.0) * 0.28, 0);
    CGFloat maxRightX = MAX(width + (locationX - width / 2.0) * 0.28, width);
    
    CGFloat leftPartWidth = locationX - minLeftX;
    CGFloat rightPartWidth = maxRightX - locationX;
    
    _l3ControlPointView.center = CGPointMake(minLeftX, baseHeight);
    _l2ControlPointView.center = CGPointMake(minLeftX + leftPartWidth*0.44, baseHeight);
    _l1ControlPointView.center = CGPointMake(minLeftX + leftPartWidth*0.71, baseHeight + waveHeight*0.64);
    _cControlPointView.center = CGPointMake(locationX, baseHeight + waveHeight*1.36);
    _r1ControlPointView.center = CGPointMake(maxRightX - rightPartWidth*0.71, baseHeight + waveHeight*0.64);
    _r2ControlPointView.center = CGPointMake(maxRightX - (rightPartWidth*0.44), baseHeight);
    _r3ControlPointView.center = CGPointMake(maxRightX, baseHeight);
}
         解释:

      baseHeight:baseHeight + waveHeight = 全高

      waveHeight:曲线的高度

      locationX:手指滑动点的X坐标

      width:视图的宽度

      minLeftX:定义l3视图的position坐标的X最小值,这个值可以小于0

      maxRigthX:定义r3视图的position坐标的X最小值

      leftPartWith:locationX和minLeftX的距离

      rightPartWidth:maxRightX和locationX的距离
      这里涉及参数比较多。
      five part

      更新panGestureDidMove方法,当拖动时需要更新各个点的位置,代码如下:

- (void) panGestureDidMove:(UIPanGestureRecognizer *)pan
{
    if (pan.state == UIGestureRecognizerStateEnded || pan.state == UIGestureRecognizerStateFailed || pan.state == UIGestureRecognizerStateCancelled) {
        
        CGFloat centerY = _minimalHeight;
        _animating = YES;
        
    }
    else
    {
        CGFloat maxF = [pan translationInView:self.view].y;
        CGFloat additionalHeight = MAX(maxF, 0);
        NSLog(@"=========%f",maxF);
        
        CGFloat waveHeight = MIN(additionalHeight * 0.6, _maxWaveHeight);
        CGFloat baseHeight = _minimalHeight + additionalHeight - waveHeight;
        
        CGFloat locationX = [pan translationInView:self.view].x + pan.view.center.x;  //视图上手指滑动的x坐标,也就是波浪的顶部
        NSLog(@"+++++++%f",locationX);
        
        if (maxF > 150) {
            
        }
        else
        {
            [self layoutControlPoints:baseHeight waveHeight:waveHeight locationX:locationX];
            [self updateShapeLayer];
        }
    }
}
           six part

       接下来需要计算初始的高度、波浪的高度、手指移动的坐标,那么就需要调用之前创建的方法;一个是布局控制点的layoutControlPoints方法和更新shapeLayer图层路径的updateShapeLayer方法。在viewDidLoad:方法最下面添加如下方法:

    [self layoutControlPoints:_minimalHeight waveHeight:0.0 locationX:self.view.bounds.size.width/2];
    [self updateShapeLayer];
          再将shapeLayer.backgroundColor替换成shapeLayer.fillColor 

    _shapeLayer.fillColor = [UIColor colorWithRed:91/255.0 green:144/255.0 blue:212/255.0 alpha:1.0].CGColor;
             如果一切没有问题,运行程序,有点效果出来了,可是当你松开手指的时候,并没有回弹,那么就需要之前提到的displayLink了。初始化displayLink,将其运行在mainRunLoop中。

_displayLink = [CADisplayLink displayLinkWithTarget:self selector:@selector(updateShapeLayer)];
    [_displayLink addToRunLoop:[NSRunLoop mainRunLoop] forMode:NSDefaultRunLoopMode];
              更改panGestureDidMove:方法,产生弹簧效果

- (void) panGestureDidMove:(UIPanGestureRecognizer *)pan
{
    if (pan.state == UIGestureRecognizerStateEnded || pan.state == UIGestureRecognizerStateFailed || pan.state == UIGestureRecognizerStateCancelled) {
        
        CGFloat centerY = _minimalHeight;
        _animating = YES;
        
        [UIView animateWithDuration:0.9 delay:0.0 usingSpringWithDamping:0.57 initialSpringVelocity:0.0 options:UIViewAnimationOptionCurveEaseIn animations:^{
            CGPoint pointl3 = _l3ControlPointView.center;
            pointl3.y = centerY;
            _l3ControlPointView.center = pointl3;
            CGPoint pointl2 = _l2ControlPointView.center;
            pointl2.y = centerY;
            _l2ControlPointView.center = pointl2;
            CGPoint pointl1 = _l1ControlPointView.center;
            pointl1.y = centerY;
            _l1ControlPointView.center = pointl1;
            CGPoint pointc = _cControlPointView.center;
            pointc.y = centerY;
            _cControlPointView.center = pointc;
            CGPoint pointr1 = _r1ControlPointView.center;
            pointr1.y = centerY;
            _r1ControlPointView.center = pointr1;
            CGPoint pointr2 = _r2ControlPointView.center;
            pointr2.y = centerY;
            _r2ControlPointView.center = pointr2;
            CGPoint pointr3 = _r3ControlPointView.center;
            pointr3.y = centerY;
            _r3ControlPointView.center = pointr3;
            
        } completion:^(BOOL finished) {
            _animating = NO;
        }];
    }
    else
    {
        CGFloat maxF = [pan translationInView:self.view].y;
        CGFloat additionalHeight = MAX(maxF, 0);
        NSLog(@"=========%f",maxF);
        
        CGFloat waveHeight = MIN(additionalHeight * 0.6, _maxWaveHeight);
        CGFloat baseHeight = _minimalHeight + additionalHeight - waveHeight;
        
        CGFloat locationX = [pan translationInView:self.view].x + pan.view.center.x;  //视图上手指滑动的x坐标,也就是波浪的顶部
        NSLog(@"+++++++%f",locationX);
        
        if (maxF > 150) {
            
        }
        else
        {
            [self layoutControlPoints:baseHeight waveHeight:waveHeight locationX:locationX];
            [self updateShapeLayer];
        }
    }
}
          已经添加了弹簧效果,运行程序,将达到如下效果。

利用UIBezierPath实现的橡皮筋动画效果(OC版)_第5张图片

      原博客地址:传送门  如有不足,还望指点!

      github:源码


     






你可能感兴趣的:(动画,UIBezierPath,cashaperlayer)