iOS实现贝塞尔曲线动画

 更新时间:2021年08月25日 15:02:56   作者:imJackXu  
这篇文章主要为大家详细介绍了iOS实现贝塞尔曲线动画,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了iOS实现贝塞尔曲线动画的具体代码,供大家参考,具体内容如下

效果如图:

仿美人相机,手势滑动隐藏顶部view。为了方便讲解,将屏幕分为几个区域,如图:

在拖动过程中:

1、拖动距离小于minMoveDistance,贝赛尔曲线发生形变
2、拖动大于minMoveDistance,整个view开始下移

在松开手时:

1、拖动距离小于minMoveDistance,未发生位移,贝塞尔曲线恢复形变
2、拖动大于minMoveDistance,小于minDisappearDistance,贝塞尔曲线恢复形变、位移回到初始位置。
3、拖动大于minDisappearDistance,向下移动隐藏view

一、根据y轴位移量确定贝塞尔路径

在拖动时曲线形变、松手时曲线恢复形变的时候都需要改变贝塞尔曲线,实际上是改变二阶贝塞尔曲线的控制点,因此写一个方法,根据传入的y轴位移量得到新的贝塞尔路径:

- (CGPathRef)getPathWithMoveDistance:(CGFloat)distance{

    UIBezierPath *path = [UIBezierPath bezierPath];
    CGPoint startPoint = CGPointMake(0, 0);
    CGPoint controlPoint = CGPointMake(self.bounds.size.width*0.5, 60+distance);
    CGPoint endPoint = CGPointMake(self.bounds.size.width, 0);

    [path moveToPoint:startPoint];
    [path addQuadCurveToPoint:endPoint controlPoint:controlPoint];

    [path addLineToPoint:CGPointMake(self.bounds.size.width, self.bounds.size.height)];
    [path addLineToPoint:CGPointMake(0, self.bounds.size.height)];

    return path.CGPath;
}

二、初始化图形

初始化的时候,可以根据上一步的方法,传入位移量0,获取贝塞尔路径,并将获得的路径赋给CAShapeLayer:

- (id)initWithFrame:(CGRect)frame{
    if (self = [super initWithFrame:frame]) {
        self.originY = frame.origin.y;
        [self setUpLayer];
        [self addGesure];
    }
    return self;
}

- (void)setUpLayer{
    self.topLineLayer = [CAShapeLayer layer];
    self.topLineLayer.fillColor = ColorForTheme.CGColor;
    self.topLineLayer.strokeColor = ColorForTheme.CGColor;
    self.topLineLayer.path = [self getPathWithMoveDistance:0];
    [self.layer addSublayer:self.topLineLayer];
}

三、添加手势

添加UIPanGestureRecognizer拖动手势,并处理手势拖动和结束拖动的事件。

拖动时:

1、拖动距离小于minMoveDistance,只有贝赛尔曲线发生形变,调用步奏一中的方法。
2、拖动距离大于minMoveDistance,整个view开始下移

结束拖动时:

调用revertFormY:方法,传入当前在y轴上已经发生的位移量

- (void)addGesure{
    if (self.gesture == nil) {
        self.gesture = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(handlePan:)];
    }
    [self addGestureRecognizer:self.gesture];
}

- (void)handlePan:(UIPanGestureRecognizer *)gesture{
    CGFloat distanceX = [gesture translationInView:self].x;
    CGFloat distanceY = [gesture translationInView:self].y;

    if (ABS(distanceX) > ABS(distanceY)) {
        return;
    }
    //拖动过程
    if (gesture.state == UIGestureRecognizerStateChanged) {
        NSLog(@"%f",distanceY);

        //移动少于minMoveDistance,贝赛尔曲线形变
        if (distanceY > 0 && distanceY <= minMoveDistance) {
            self.topLineLayer.path = [self getPathWithMoveDistance:distanceY];
        }
        //移动大于minMoveDistance,整个view下移
        else if (distanceY > minMoveDistance) {
            self.frame = CGRectMake(0, self.originY+distanceY-minMoveDistance, self.bounds.size.width, self.bounds.size.height);
        }
    }
    //手势结束
    if (gesture.state == UIGestureRecognizerStateEnded || gesture.state == UIGestureRecognizerStateCancelled || gesture.state == UIGestureRecognizerStateFailed) {
        [self removeGestureRecognizer:self.gesture];
        [self revertFormY:distanceY];
    }
}

四、revertFormY:恢复形变方法

根据传入的y轴上的位移量,实现不同的效果:

1、y小于minMoveDistance,未发生位移,贝塞尔曲线恢复形变
2、y大于minMoveDistance,小于minDisappearDistance,贝塞尔曲线恢复形变、位移回到初始位置。
3、y大于minDisappearDistance,向下移动隐藏view

//手势结束后恢复或隐藏
-(void)revertFormY:(CGFloat)y{

    //y < 最小的隐藏位移距离,未发生位移,贝塞尔曲线恢复动画
    if (y < minDisappearDistance) {
        CAKeyframeAnimation *vibrate = [CAKeyframeAnimation animationWithKeyPath:@"path"];
        vibrate.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];
        vibrate.values = @[
                           (id) [self getPathWithMoveDistance:y],
                           (id) [self getPathWithMoveDistance:-(y * 0.3)],
                           (id) [self getPathWithMoveDistance:(y * 0.2)],
                           (id) [self getPathWithMoveDistance:-(y * 0.15)],
                           (id) [self getPathWithMoveDistance:(y * 0.1)],
                           (id) [self getPathWithMoveDistance:-(y * 0.07)],
                           (id) [self getPathWithMoveDistance:(y * 0.05)],
                           (id) [self getPathWithMoveDistance:0.0]
                           ];
        vibrate.duration = 0.5;
        vibrate.removedOnCompletion = NO;
        vibrate.fillMode = kCAFillModeForwards;
        vibrate.delegate = self;
        [self.topLineLayer addAnimation:vibrate forKey:nil];
    }

    //y > 最小位移距离,发生了位移
    if(y > minMoveDistance){
        [UIView animateWithDuration:0.3 animations:^{
            CGFloat endY;
            //向上恢复view
            if (y < minDisappearDistance) {
                endY = self.originY;
            }
            //向下隐藏view
            else{
                endY = SCREEN_HEIGHT;
            }
            self.frame = CGRectMake(0, endY, SCREEN_WIDTH, self.frame.size.height);
        }];
    }
}

五、双击屏幕空白,消失的view从底部上移,恢复到初始位置

这个只是为了回到初始状态,根据实际需求实现。

//恢复到初始位置
- (void)comeBack{
    if (self.frame.origin.y <= self.originY) {
        return;
    }

    [UIView animateWithDuration:0.3 animations:^{
        self.frame = CGRectMake(0, self.originY, SCREEN_WIDTH, self.frame.size.height);
    } completion:^(BOOL finished) {
        [self revertFormY:10];
    }];
}

完整代码

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • 谈谈制作iOS Ad-Hoc测试应用

    谈谈制作iOS Ad-Hoc测试应用

    这篇文章主要介绍了谈谈制作iOS Ad-Hoc测试应用,AD-HOC测试是指随机测试,这种测试的特点是无特定的测试用例,有兴趣的可以了解一下。
    2016-12-12
  • iOS中程序异常Crash友好化处理详解

    iOS中程序异常Crash友好化处理详解

    在iOS开发调试过程中以及上线之后,程序经常会出现崩溃的问题,下面这篇文章主要给大家介绍了关于iOS中程序异常Crash友好化处理的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
    2018-07-07
  • IOS 中两种单例模式的写法实例详解

    IOS 中两种单例模式的写法实例详解

    这篇文章主要介绍了IOS 中两种单例模式的写法实例详解的相关资料,需要的朋友可以参考下
    2017-06-06
  • Android NavigationController 右滑手势详解

    Android NavigationController 右滑手势详解

    目前苹果手机在人机交互中尽力做到极致,在ios7中,新增了一个小小功能,用户不用点击右上角的返回按钮,在屏幕左边一滑,就会返回。下面给大家详解Android NavigationController 右滑手势,需要的朋友可以参考下
    2015-08-08
  • IOS开发相册图片多选和删除的功能

    IOS开发相册图片多选和删除的功能

    之前小编有和大家分享过一篇关于从相册选取单张照片的文章,那么下面这篇文章跟大家分享下如何相册多图选择和删除,以及包括拍照功能,有需要的可以参考学习,下面来一起看看吧。
    2016-09-09
  • 用iOS代码获取APP启动页图片

    用iOS代码获取APP启动页图片

    这篇文章主要为大家详细介绍了用iOS代码获取APP启动页图片的相关资料,感兴趣的小伙伴们可以参考一下
    2016-08-08
  • iOS 本地存储NSUserDefaults封装代码

    iOS 本地存储NSUserDefaults封装代码

    下面小编就为大家分享一篇iOS 本地存储NSUserDefaults封装代码,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-01-01
  • 详解iOS应用程序内购/内付费(一)

    详解iOS应用程序内购/内付费(一)

    这篇文章主要介绍了详解iOS应用程序内购/内付费(一),小编觉得挺不错的,现在分享给大家,也给大家做个参考。
    2016-12-12
  • iOS的音频文件的格式转换示例

    iOS的音频文件的格式转换示例

    这篇文章主要介绍了iOS的音频文件的格式转换示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • 如何在iOS中高效的加载图片详解

    如何在iOS中高效的加载图片详解

    这篇文章主要给大家介绍了关于如何在iOS中高效的加载图片的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用iOS具有一定的参考学习价值,需要的朋友可以参考下
    2021-10-10

最新评论