iOS 下拉刷新动画的实现实例

时间:2021-11-23 15:15:06

先上完整的效果图:

iOS 下拉刷新动画的实现实例

接下去动画分步实现,首先先实现如下效果:

iOS 下拉刷新动画的实现实例

思路是这样的,在偏移值小于等于100的时候绘制一个矩形,当偏移值大于100的时候,底部直线变成曲线,主要是利用cashapelayer和uibezierpath来实现,代码如下

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
#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;
}

其次,实现绘制太阳,效果如下:

iOS 下拉刷新动画的实现实例

主要用到的是cashapelayer的path和strokeend属性,首先绘制一个太阳,代码如下:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
#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属性逐步显示太阳,代码如下:

?
1
2
3
4
5
6
7
8
9
10
11
#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;
  }
}

其次,让绘制完的太阳随着拽动而旋转,效果图如下:

iOS 下拉刷新动画的实现实例

主要思想是在绘制完毕之后,通过affinetransform属性,让太阳图层旋转,代码如下:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
#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,代码如下

?
1
2
3
4
5
6
7
8
9
-(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滚动到顶部,代码如下:

?
1
2
3
4
5
-(void)p_stop {
  self.tableview.scrollenabled = yes;
  [self.tableview setcontentoffset:cgpointmake(0, 0) animated:yes];
  [self.circlelayer removeallanimations];
}

源代码传送门

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

原文链接:http://www.jianshu.com/p/153f6af7871f?utm_source=tuicool&utm_medium=referral#