iOS 下拉刷新动画的实现实例
时间:2019-03-30
本文章向大家介绍iOS 下拉刷新动画的实现实例,主要包括iOS 下拉刷新动画的实现实例使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
先上完整的效果图:
接下去动画分步实现,首先先实现如下效果:
思路是这样的,在偏移值小于等于100的时候绘制一个矩形,当偏移值大于100的时候,底部直线变成曲线,主要是利用CAShapeLayer和UIBezierPath来实现,代码如下
#pragma mark - UIScrollViewDelegate -(void)scrollViewDidScroll:(UIScrollView *)scrollView { CGFloat height = -scrollView.contentOffset.y; UIBezierPath *path = [UIBezierPath bezierPath]; [path moveToPoint:CGPointMake(0, 0)]; [path addLineToPoint:CGPointMake(self.view.width, 0)]; if (height <= 100) { //偏移值小于等于100的时候,底部绘制直线 [path addLineToPoint:CGPointMake(self.view.width, height)]; [path addLineToPoint:CGPointMake(0, height)]; }else{ //偏移值大于100的时候,底部绘制曲线 [path addLineToPoint:CGPointMake(self.view.width, 100)]; [path addQuadCurveToPoint:CGPointMake(0, 100) controlPoint:CGPointMake(self.view.center.x, height)]; } [path closePath]; self.shapeLayer.path = path.CGPath; }
其次,实现绘制太阳,效果如下:
主要用到的是CAShapeLayer的path和strokeEnd属性,首先绘制一个太阳,代码如下:
#pragma mark - private method -(void)p_initCircle { self.circleLayer.frame = CGRectMake(0, 0, self.view.width, 100); self.circleLayer.fillColor = nil; self.circleLayer.strokeColor = [UIColor whiteColor].CGColor; self.circleLayer.lineWidth = 2.0; CGPoint center = CGPointMake(self.view.center.x, 50); UIBezierPath *path = [UIBezierPath bezierPath]; [path moveToPoint:CGPointMake(self.view.center.x, 35)]; [path addArcWithCenter:center radius:15 startAngle:-M_PI_2 endAngle:M_PI * 1.5 clockwise:YES]; CGFloat r1 = 17.0; CGFloat r2 = 22.0; for (int i = 0; i < 8 ; i++) { CGPoint pointStart = CGPointMake(center.x + sin((M_PI * 2.0 / 8 * i)) * r1, center.y - cos((M_PI * 2.0 / 8 * i)) * r1); CGPoint pointEnd = CGPointMake(center.x + sin((M_PI * 2.0 / 8 * i)) * r2, center.y - cos((M_PI * 2.0 / 8 * i)) * r2); [path moveToPoint:pointStart]; [path addLineToPoint:pointEnd]; } self.circleLayer.path = path.CGPath; }
其次在拖拽的过程中,利用strokeEnd属性逐步显示太阳,代码如下:
#pragma mark - UIScrollViewDelegate -(void)scrollViewDidScroll:(UIScrollView *)scrollView { CGFloat height = -scrollView.contentOffset.y; if (height <= 100) { //偏移值小于等于100的时候,绘制对应的路径 self.circleLayer.strokeEnd = height / 100.0; }else{ //偏移值大于100的时候,绘制全路径 self.circleLayer.strokeEnd = 1.0; } }
其次,让绘制完的太阳随着拽动而旋转,效果图如下:
主要思想是在绘制完毕之后,通过affineTransform属性,让太阳图层旋转,代码如下:
#pragma mark - UIScrollViewDelegate -(void)scrollViewDidScroll:(UIScrollView *)scrollView { CGFloat height = -scrollView.contentOffset.y; [CATransaction begin]; [CATransaction setDisableActions:YES]; if (height <= 100) { //偏移值小于等于100的时候,不旋转 self.circleLayer.affineTransform = CGAffineTransformIdentity; }else{ //偏移值小于等于100的时候,旋转 self.circleLayer.affineTransform = CGAffineTransformMakeRotation(-(M_PI / 720 * height - 100)); } [CATransaction commit]; }
其中要注意的地方是需要禁止隐式动画,不然每次修改affineTransform都会自动带上隐式动画效果。
最后就是释放后,让tableView滚动到固定位置,然后让太阳持续旋转,屏蔽tableView的拖拽事件,主要用到的是CABaseAnimation,代码如下
-(void)p_rise { self.tableView.scrollEnabled = NO; CABasicAnimation *anim = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"]; anim.duration = 0.15; anim.toValue = @(M_PI / 4.0); anim.repeatCount = MAXFLOAT; [self.circleLayer addAnimation:anim forKey:nil]; }
最后在经过一定时间后,移除图层动画,取消屏蔽tableView的拖拽事件,并且让tableView滚动到顶部,代码如下:
-(void)p_stop { self.tableView.scrollEnabled = YES; [self.tableView setContentOffset:CGPointMake(0, 0) animated:YES]; [self.circleLayer removeAllAnimations]; }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
- TensorFlow从0到1 | 第十二章:TensorFlow构建3层NN玩转MNIST
- 如何通过预加载器提升网页加载速度
- 分钟学会正则表达式(译)
- TensorFlow从0到1 | 第十一章 74行Python实现手写体数字识别
- 让浏览器不再显示 https 页面中的 http 请求警报
- 跨域访问和防盗链基本原理
- 【翻译】MongoDB指南/CRUD操作(一)
- 【直播】我的基因组50:从测序深度和位点间距来看SNV分布情况
- 【翻译】MongoDB指南/CRUD操作(二)
- 【翻译】MongoDB指南/CRUD操作(三)
- 为什么 Laravel 会成为最成功的 PHP 框架?
- 【生信菜鸟经】如何系统入门Perl
- 【翻译】MongoDB指南/CRUD操作(四)
- R包终极解决方案
- java教程
- Java快速入门
- Java 开发环境配置
- Java基本语法
- Java 对象和类
- Java 基本数据类型
- Java 变量类型
- Java 修饰符
- Java 运算符
- Java 循环结构
- Java 分支结构
- Java Number类
- Java Character类
- Java String类
- Java StringBuffer和StringBuilder类
- Java 数组
- Java 日期时间
- Java 正则表达式
- Java 方法
- Java 流(Stream)、文件(File)和IO
- Java 异常处理
- Java 继承
- Java 重写(Override)与重载(Overload)
- Java 多态
- Java 抽象类
- Java 封装
- Java 接口
- Java 包(package)
- Java 数据结构
- Java 集合框架
- Java 泛型
- Java 序列化
- Java 网络编程
- Java 发送邮件
- Java 多线程编程
- Java Applet基础
- Java 文档注释
- 浅谈sklearn中predict与predict_proba区别
- 解决Keras中循环使用K.ctc_decode内存不释放的问题
- PDO::getAvailableDrivers讲解
- PDO::_construct讲解
- Yii2.0实现的批量更新及批量插入功能示例
- PDO::inTransaction讲解
- 小程序前后端交互使用JWT
- python文件操作seek()偏移量,读取指正到指定位置操作
- 使用OpenCV去除面积较小的连通域
- 使用vs code编辑调试php配置的方法
- Python OpenCV去除字母后面的杂线操作
- PDO::rollBack讲解
- PyTorch的torch.cat用法
- keras在构建LSTM模型时对变长序列的处理操作
- Discuz不使用插件实现简单的打赏功能