当前位置：首页 > 编程日记 > 正文

贝塞尔曲线动画demo（仿美人相机效果）

编程日记 2024-08-19 19:10:00

效果如图：
这里写图片描述

仿美人相机，手势滑动隐藏顶部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;//向上恢复viewif (y < minDisappearDistance) {endY = self.originY;}//向下隐藏viewelse{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];}];
}

完整代码：https://github.com/dolacmeng/JXBezierDemo

https://www.dkcj.cn/info/14984.html

贝塞尔曲线动画demo（仿美人相机效果）

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

二、初始化图形

三、添加手势

四、revertFormY：恢复形变方法

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

相关文章：

算法---001

IOS笔记 #pragma mark的用法

shell脚本api接口考虑并发问题的可行性操作

ZOJ 2110 Tempter of the Bone（DFS）

java 16 -12 静态导入

Quartz 2D Programming Guide笔记

有关运维面试重点

微信应用号开发知识贮备之altjs官方实例初探

Oracle DMP 操作笔记之根据DMP逆向推导出导出的表空间名称

【iOS】中间透明的引导蒙层

python连接数据库，处理数据结果后生成excel文件

WhyGL:一套学习OpenGL的框架,及翻写Nehe的OpenGL教程

iOS与JS交互的4种方法

UDP打洞原理

五款常用协议分析处理工具推荐

【转】android电池（四）：电池电量计(MAX17040)驱动分析篇

hihoCoder#1384 : Genius ACM

微信小程序开发笔记

简单两行，实现无线WiFi共享上网，手机抓包再也不用愁了

用C#实现的条形码和二维码编码解码器

【iOS】通过NSURLProtocol提高Web加载速度

rand()和srand()关系很简单——一看就明白(通过一个可移植的源码)

Windows下Python 3.6 安装BeautifulSoup库

struts2配置详解

Xcode调试技巧

MiniGUI - UNIX Domain Socket 封装

RSA加密算法破解及原理

SpringMvc之@RequestParam详解

MLeaksFinder简单实现原理

CSipSimple 工程分析 1