iOS TableView上拉下拉刷新控件（一）

注：此刷新控件的效果是来自KittenYang的一个GIF图，他有很多动画分析和写得都不错，大家可以关注一下~

推荐一个非常好的动画效果网站：UI Movement，里面很多设计出的动画效果都非常好，都可以一一实现看看哦

话不多说，先看下我要讲的刷新控件效果：

1.无导航栏的刷新控件效果图：

2.有导航栏的刷新控件效果图：

好了，进入正题。

首先看到这个控件的时候，我们要去分析，这个控件是由哪几部分组成的，可以看到这个控件是只是由一个loading圆圈和label提示文字组成的，而label比较简单，在这里我就不具体说怎么实现了，大家可以直接看源码，这篇文章，我主要讲怎么实现这个loading圆圈的转圈效果。

首先这个转圈分成两部分，我们将它分成0.0-0.5和0.5-1.0这两个阶段。

在0.0-0.5这个过程的动画是这样的：

以左边的线为例，上顶点为B点，下顶点为A点，实际上这个过程只是，A，B两点的y值在随着progress的变化而变化，x是不变的，所以我们可以得到A，B两点的坐标

1 2	CGPoint leftA = CGPointMake(kCenterX - kLineLength, kCenterY + 2kLineLength - self.progress/0.5kLineLength); CGPoint leftB = CGPointMake(leftA.x, leftA.y - kLineLength);

然后我们用贝塞尔曲线，将两点连起来，从A点到B点

1 2	[leftPath moveToPoint:leftA]; [leftPath addLineToPoint:leftB];

那这个尖角怎么办呢？我们利用以前学过的数学知识，假设尖角的角度是30°，那x值就是leftB.x-kArrowLengthsin(kArrowAngle)，y值就是leftB.y+kArrowLengthcos(kArrowAngle)，假设这个点是C点，最后就是将C点和B点相连

1
2
3

[arrowPath moveToPoint:leftB];
[arrowPath addLineToPoint:CGPointMake(leftB.x - kArrowLength*sin(kArrowAngle), leftB.y + kArrowLength*cos(kArrowAngle))];
[leftPath appendPath:arrowPath];

这样我们就完成了0.0-0.5的动画，这个一部分还是比较简单的。

下面是0.5-1.0的动画过程：

当到达0.5的时候，原先的B点开始保持不动，它的位置始终是CGPointMake(kCenterX-kLineLength,kCenterY)，而A点也渐渐向B点靠近，CGPointMake(kCenterX-kLineLength,kCenterY+kLineLength- (self.progress-0.5)/0.5*kLineLength)，那这个圆弧是怎么出来的？

1	- (void)addArcWithCenter:(CGPoint)center radius:(CGFloat)radius startAngle:(CGFloat)startAngle endAngle:(CGFloat)endAngle clockwise:(BOOL)clockwise NS_AVAILABLE_IOS(4_0);

在绘制贝塞尔曲线里面，有一个绘制圆弧的方法，center是以某一个点为圆心绘制圆弧，

radius是半径，startAngle是开始角度，endAngle是结束角度，clockwise是是否以顺时针绘制，ok，我们就用这个来绘制我们的圆弧

1
2
3

[leftPath moveToPoint:leftA];
[leftPath addLineToPoint:leftB];
[leftPath addArcWithCenter:CGPointMake(kCenterX, kCenterY) radius:kLineLength startAngle:M_PI endAngle:M_PI+M_PI*(self.progress - 0.5)/0.5*9/10 clockwise:YES];

恩，圆弧也画好了，那我们的尖角是不是也按照刚才的那样写就可以了？恩，差不多哦，只是我们在原有尖角30°的基础上，需要加上我们圆弧旋转的角度，才是真正尖角与圆弧顶点的切线角度

1	CGPointMake(leftPath.currentPoint.x - kArrowLengthsin(kArrowAngle+M_PI(self.progress - 0.5)/0.59/10),leftPath.currentPoint.y + kArrowLengthcos(kArrowAngle+M_PI(self.progress - 0.5)/0.59/10))

好了，尖角顶点也知道了，那连接只要和原来一样就可以了

[arrowPath moveToPoint:leftPath.currentPoint];
[arrowPath addLineToPoint:CGPointMake(leftPath.currentPoint.x - kArrowLength*sin(kArrowAngle+M_PI*(self.progress - 0.5)/0.5*9/10),
                                              leftPath.currentPoint.y + kArrowLength*cos(kArrowAngle+M_PI*(self.progress - 0.5)/0.5*9/10))];
[leftPath appendPath:arrowPath];

好了，左边的动画是这样，右边的只要对称即可~

是不是看上去比较复杂的动画，将它分解开来，就变得简单了呢？

下一篇，我会讲怎么将这个动画和tableview结合起来使用~