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

源代码传送门 

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

# ios  # 下拉刷新动画  # ios下拉刷新动画效果  # 下拉刷新实现  # IOS swift中的动画的实例详解  # ios基于MJRefresh实现上拉刷新和下拉加载动画效果  # 利用iOS开发实现翻转扑克牌动画的方法  # iOS中利用CAEmitterLayer实现粒子动画详解  # iOS 实现简单的加载等待动画示例（思路与实现）  # IOS 中动画的暂停与继续播放的详解  # 的是  # 拖拽  # 图层  # 是在  # 隐式  # 是这样  # 要注意  # 来实现  # 源代码  # 大家多多  # 移除  # 过程中  # 接下去  # 主要是  # 传送门  # addQuadCurveToPoint  # lt  # whiteColor  # controlPoint  # UIColor 

相关文章： 建站主机SSH密钥生成步骤及常见问题解答？  黑客如何通过漏洞一步步攻陷网站服务器？  如何使用Golang安装API文档生成工具_快速生成接口文档  Android使用GridView实现日历的简单功能  娃派WAP自助建站：免费模板+移动优化，快速打造专业网站  如何在建站宝盒中设置产品搜索功能？  高端建站三要素：定制模板、企业官网与响应式设计优化  如何用已有域名快速搭建网站？  如何选择适配移动端的WAP自助建站平台？  网站视频怎么制作,哪个网站可以免费收看好莱坞经典大片？  湖北网站制作公司有哪些,湖北清能集团官网？  建站之星IIS配置教程：代码生成技巧与站点搭建指南  北京制作网站的公司排名,北京三快科技有限公司是做什么？北京三快科技？  网站制作新手教程,新手建设一个网站需要注意些什么？  合肥制作网站的公司有哪些,合肥聚美网络科技有限公司介绍？  如何设计高效校园网站？  c# 服务器GC和工作站GC的区别和设置  如何实现建站之星域名转发设置？  制作网站的软件免费下载,免费制作app哪个平台好？  东莞市网站制作公司有哪些,东莞找工作用什么网站好？  linux top下的 minerd 木马清除方法  深圳网站制作公司好吗,在深圳找工作哪个网站最好啊？  大型企业网站制作流程,做网站需要注册公司吗？  SQL查询语句优化的实用方法总结  如何用西部建站助手快速创建专业网站？  如何在Ubuntu系统下快速搭建WordPress个人网站？  怎么用手机制作网站链接,dw怎么把手机适应页面变成网页？  香港服务器网站生成指南：免费资源整合与高速稳定配置方案  如何在香港免费服务器上快速搭建网站？  建站之星收费标准详解：套餐费用及年费价格表一览  如何在IIS服务器上快速部署高效网站？  存储型VPS适合搭建中小型网站吗？  如何在IIS7中新建站点？详细步骤解析  深圳网站制作平台,深圳市做网站好的公司有哪些？  香港服务器网站推广：SEO优化与外贸独立站搭建策略  宠物网站制作html代码,有没有专门介绍宠物如何养的网站啊？  制作网页的网站有哪些,电脑上怎么做网页？  公司网站制作价格怎么算,公司办个官网需要多少钱？  太原网站制作公司有哪些,网约车营运证查询官网？  教程网站设计制作软件,怎么创建自己的一个网站？  如何用搬瓦工VPS快速搭建个人网站？  重庆市网站制作公司,重庆招聘网站哪个好？  山东云建站价格为何差异显著？  完全自定义免费建站平台：主题模板在线生成一站式服务  ,南京靠谱的征婚网站？  高配服务器限时抢购：企业级配置与回收服务一站式优惠方案  建站主机CVM配置优化、SEO策略与性能提升指南  深圳网站制作案例,网页的相关名词有哪些？  成都网站制作价格表,现在成都广电的单独网络宽带有多少的，资费是什么情况呢？  购物网站制作费用多少,开办网上购物网站，需要办理哪些手续？