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

最新推荐文章于 2022-03-10 16:14:53 发布

极光天轮

最新推荐文章于 2022-03-10 16:14:53 发布

阅读量3.3k

点赞数 1

分类专栏： iOS开发相关文章标签：动画 UIBezierPath cashaperlayer

本文链接：https://blog.csdn.net/w_x_p/article/details/50482815

版权

iOS开发相关专栏收录该内容

17 篇文章 0 订阅

订阅专栏

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

前提：

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

1、初始状态效果

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的高度。

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

    _shapeLayer.actions = @{@"position":[NSNull null],@"bounds":[NSNull null],@"path":[NSNull null]};  //关闭隐式动画，防止带来延迟效果

添加到addSubLayer：方法前面，再次运行程序，发现之前延时的效果已经没有了。

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

已经添加了弹簧效果，运行程序，将达到如下效果。

原博客地址：传送门如有不足，还望指点！

极光天轮

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
5
评论
利用UIBezierPath实现的橡皮筋动画效果(OC版)

本教程旨在说明第三方库DGElasticPullToRefresh的橡皮筋动画效果的实现原理，不过它使用swift实现的，平时用OC最多，顾抽出时间翻译成OC版，供大家参考。前提：在讲这篇教程之前，如果你对UIBezierPath和CAShapeLayer还不熟悉的话，那需要对这两个方面要做了解，这样才能够看懂代码部分。UIBezierPath可以绘制贝塞尔曲线，那么就需要设置控制点，这里分为三段，其中L3和L2、R1和R2、c和R1，效果如下图所示：
复制链接

扫一扫

专栏目录