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

完整代码

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

时间: 2021-08-24

快速上手IOS UIBezierPath(贝塞尔曲线)

UIBezierPath主要用来绘制矢量图形,它是基于Core Graphics对CGPathRef数据类型和path绘图属性的一个封装,所以是需要图形上下文的(CGContextRef),所以一般UIBezierPath在drawRect中使用. 使用方法 UIBezierPath 是对 CGPathRef 的封装.创建矢量图形时,拆解成一或多条线段,拼接起来,每条线段的终点都是下一条线段的起点. 具体地: 1.创建一个 UIBezierPath 对象 2.用 moveToPoint: 设置初

iOS贝塞尔曲线画哆啦A梦的代码实例

看到这张图,是不是觉得挺萌的,那是如何实现的呢?在iOS中有一个类叫UIBezierPath(贝塞尔曲线),这两天研究了一下UIBezierPath和CAShapeLayer,根据别人分享的教程,画了这个萌萌的哆啦A梦. UIBezierPath: UIBezierPath是在 UIKit 中的一个类,继承于NSObject,可以创建基于矢量的路径.此类是Core Graphics框架关于path的一个OC封装.使用此类可以定义常见的圆形.多边形等形状 .我们使用直线.弧(arc)来创建复杂的曲

IOS 贝塞尔曲线(UIBezierPath)属性、方法整理

IOS 贝塞尔曲线详解         开发IOS的朋友都知道IOS 贝塞尔曲线的重要性,由于经常会用到这样的东西,索性抽时间就把相应所有的属性,方法做一个总结. UIBezierPath主要用来绘制矢量图形,它是基于Core Graphics对CGPathRef数据类型和path绘图属性的一个封装,所以是需要图形上下文的(CGContextRef),所以一般UIBezierPath在drawRect中使用. UIBezierPath的属性介绍: 1.CGPath:将UIBezierPath类转

ios 贝塞尔曲线切割圆角的方法

ios 系统框架已经给我们提供了相应的切割圆角的方法, 但是如果在一个见面有很多控件切割的话会出现卡顿和个别不切得现在 /* 创建一个Button */ UIButton * button = [UIButton buttonWithType:(UIButtonTypeSystem)]; [button setFrame:CGRectMake(100, 100, 100, 100)]; [self addSubview:button]; /* 正厂的圆角需求处理方法 */ button.laye

iOS常用组件之高效切圆角的方法汇总

前言 圆角(RounderCorner)是一种很常见的视图效果,相比于直角,它更加柔和优美,易于接受.但很多人并不清楚如何设置圆角的正确方式和原理. iOS 客户端开发中,经常碰到圆角视图的需求,本文简单总结一下 UIView 及其子类的一些切圆角方法,并且保证避免出现离屏渲染.下面话不多说了,来一起看看详细的介绍吧. UIView(不包括其子类) UIView *view = [[UIView alloc] init]; view.backgroundColor = [UIColor blac

IOS设置按钮为圆角的示例代码

iOS中很多时候都需要用到指定风格的圆角按钮,以下是UIButton提供的创建圆角按钮方法 设置按钮的4个角: 左上:UIRectCornerTopLeft 左下:UIRectCornerBottomLeft 右上:UIRectCornerTopRight 右下:UIRectCornerBottomRight 示例代码: UIButton *button = [[UIButton alloc] initWithFrame:CGRectMake(50, 60, 80, 40)]; button.b

Android中贝塞尔曲线的绘制方法示例代码

贝塞尔曲线,很多人可能不太了解,什么叫做贝塞尔曲线呢?这里先做一下简单介绍:贝塞尔曲线也可以叫做贝济埃曲线或者贝兹曲线,它由线段与节点组成,节点是可拖动的支点,线段像可伸缩的皮筋.一般的矢量图形软件常利用贝塞尔曲线来精确画出曲线. 上面的介绍中,"线段像可伸缩的皮筋"这句话非常关键,但也特别好理解.至于贝塞尔曲线的详细内容大家可以查阅相关资料.        Android提供的贝塞尔曲线绘制接口 在Android开发中,要实现贝塞尔曲线其实还是很简单的,因为Android已经给我们提

iOS设置可选择圆角方向的控件圆角

前言 这篇文章主要给大家介绍利用iOS如何设置可选择圆角方向的控件圆角,话不多说,以下是实现的示例代码,一起来看看吧. 示例代码 一.通过设置控件layer的cornerRadius来设置圆角 self.view.layer.cornerRadius =10.f;//如果设置圆角角度为半圆,则数值为控件高度的一半 self.view.layer.masksToBounds = YES;//是否删除多余的位置 二.通过贝塞尔曲线来设置圆角 UIBezierPath *maskPath = [UIB

ios实现UITableView之间圆角和间隙

ios实现UITableView之间圆角和间隙效果,上图 实现UITableView 之间的圆角和间隙 废话不多说,直接上代码 第一步 去除系统默认tableview分割线 [self.homeView.tableOrder setSeparatorStyle:UITableViewCellSeparatorStyleNone]; 第二步 //cell自定义 -(id)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSStr

iOS 实现跑马灯效果的方法示例

在网页开发当中跑马灯是常用到的,用来显示通知等,在游戏开发当中也如此. 首先来看看效果图: 接下来就简单看看这效果是怎么实现的. 实现方法 1.首先我们从这个图片里面能联想到如果实现这个效果必然需要使用到动画,或者还有有用scrollView的思路,这里我是用的动画的方式实现的. 2..h文件 自定义一个继承UIView的LGJAutoRunLabel类,在.h文件中: @class LGJAutoRunLabel; typedef NS_ENUM(NSInteger, RunDirection