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)属性、方法整理

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 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)来创建复杂的曲

用Python画一个LinkinPark的logo代码实例

这篇文章主要介绍了用Python画一个LinkinPark的logo代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 代码如下 # -*- coding: UTF-8 -*- from turtle import * width(17) right(25) circle(150,200,20) left(65) forward(240) left(120) forward(195) left(120) forward(135) left(

微信小程序使用二次贝塞尔曲线画波浪

这两周做一个新的项目,人员比较紧张,除了需求和UI,前端后端一个人来干. 在项目需求确定后,UI隔了几天设计出了UI界面,拿到UI效果图后见有一个界面有波浪效果的我当时就蒙圈了,这都啥玩意啊?转念想到了最近在IT圈挺火的那个事件:产品要求安卓程序员实现根据用户手机壳颜色自动更换APP主题的需求后,顿时觉得画个波浪这个压根就不是事啊. 二次贝塞尔曲线 在微信官方的二次贝塞尔曲线画法连接 画波浪 思路: 在屏幕左边画一个波,然后让它一直向屏幕右边平移过去.其X的值由负数变为正数依次增大:然后一直重复

JavaScript学习小结之使用canvas画“哆啦A梦”时钟

前言:今天看完了Js书的canvas画布那张,好开心~又是心爱的canvas~欧耶~ 之前看到有人建议我画蓝胖子,对哦,我怎么把童年最喜欢的蓝胖子忘了,为了表达我对蓝胖子的歉意,所以今天画了会动的hello world,也算是一种进步咯~ 好的各位,请上车的乘客往里走,请不要堵塞通道,谢谢.我们开车吧~ 正文: 今天先上图吧,看看效果再说 今天的蓝胖子长这样,看到它还是这么胖,我就放心了.这世界还是充满正能量的,总归还有人比我胖,哈哈哈 然后是上代码 html部分 <canvas id="

iOS应用开发中监听键盘事件的代码实例小结

1.注册监听键盘事件的通知 复制代码 代码如下: [[NSNotificationCenter defaultCenter] addObserver:self                                              selector:@selector(keyboardWillShow:)                                                  name:UIKeyboardWillShowNotification   

android贝塞尔曲线实现波浪效果

本文实例为大家分享了android贝塞尔曲线实现波浪效果的具体代码,供大家参考,具体内容如下 因为手机录制gif不知道下什么软件好,所以暂时就先忽略效果图了 我在屏幕外多画了1.5个波浪,延伸至屏幕内.然后不断的循环,向右边移动.就有一种波浪的效果. 所以现在只需要画出左边的波长,然后再通过循环添加所有的波长即可. 第一个曲线已经确定了控制点和终点的坐标, 第二条曲线也可以很明显的看出来终点是在x轴的0点坐标,Y轴不变,而控制点是在负的波长的1/4的位置 有了上下曲线以后,其他的就可以直接通过循

Android贝塞尔曲线实现填充不规则图形并随手指运动

贝塞尔曲线: 贝塞尔曲线于1962,由法国工程师皮埃尔·贝塞尔所广泛发表,他运用贝塞尔曲线来为汽车的主体进行设计.贝塞尔曲线最初由 Paul de Casteljau 于 1959 年运用 de Casteljau 演算法开发,以稳定数值的方法求出贝兹曲线.贝塞尔曲线主要用于二维图形应用程序中的数学曲线,曲线由起始点,终止点(也称锚点)和控制点组成,通过调整控制点,贝塞尔曲线的形状会发生变化. 在此举一个例子,实现贝塞尔曲线,基于以下场景: 上面的图片,我们可以见到一个白色的区域,边缘为弧形,这

java绘制哆啦A梦 超可爱

本文实例为大家分享了java绘制哆啦A梦的具体代码,供大家参考,具体内容如下 以下是画出哆啦a梦的代码 package com; import javax.swing.*; import java.awt.*; public class dlam extends JFrame{ public dlam() { this.setTitle("哆啦A梦"); this.setVisible(true); this.setSize(370,460); } public void paint(