这个下拉控件是在Elastic view animation using UIBezierPath这篇博客上看到的，觉得效果还不错，自己也就OC简单实现了一下（原作者是用Swift写的），控件效果如下：
这是代码地址：https://github.com/Yuzeyang/GCLoadingAnimation/tree/master/GCLoadingAnimationTwo
这个控件的动画效果分为两个部分：
1.下拉的果冻效果
2.下拉进度圆圈的显示及旋转
0x00 下拉果冻状态实现思路
对于下拉的状态，我将其分为三种，然后在初始化的时候，将状态设置为正常状态
1
2
3
4
5
| typedef NS_ENUM(NSInteger, GCLoadingState) {
GCLoadingStateNormal, // 正常状态
GCLoadingStateLoading, // 加载中状态
GCLoadingStateCancelled // 取消加载状态
};
|
并且在初始化的时候，绘制曲线的初始样式
1
2
3
4
5
6
7
8
9
| - (void)drawOriginPath {
UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:CGPointMake(0, 0)];
[path addLineToPoint:CGPointMake(0, kGCLoadingViewMinHeight)];
[path addLineToPoint:CGPointMake(CGRectGetWidth(self.associatedScrollView.frame), kGCLoadingViewMinHeight)];
[path addLineToPoint:CGPointMake(CGRectGetWidth(self.associatedScrollView.frame), 0)];
self.loadLayer.path = path.CGPath;
}
|
那在手指拖动的过程中，我们该如果实现果冻拉伸的效果呢？
我们需要一个辅助视图centerHelperView，这个辅助视图是加在下面这条线的中间的，如图的小黑点：
在下拉时我们就根据这个centerHelperView的变化来不断的绘制我们的曲线，所以我们用到了CADisplayLink，这个应该在写动画的时候用的也是比较多了，是根据屏幕的刷新频率将内容绘制到屏幕的定时器，当我们将定时器加到runLoop里时，我们需要注意在设置mode时，如果将mode设置为NSDefaultRunLoopMode，那么在滑动的时候，定时器会暂停，直到停止滑动才会继续工作，所以我们需要将mode设置为NSRunLoopCommonModes，这样能保证定时器在滑动的过程中也能正常工作
1
2
3
4
5
6
7
8
| - (CADisplayLink *)displayLink {
if (!_displayLink) {
_displayLink = [CADisplayLink displayLinkWithTarget:self selector:@selector(displayLinkAction:)];
[_displayLink addToRunLoop:[NSRunLoop currentRunLoop] forMode:NSRunLoopCommonModes];
_displayLink.paused = YES;
}
return _displayLink;
}
|
然后在取出centerHelperView的原点，来不断绘制果冻的曲线
1
2
3
4
5
| - (void)displayLinkAction:(CADisplayLink *)displayLink {
CALayer *centerHelperViewLayer = (CALayer *)[self.centerHelperView.layer presentationLayer];
CGRect centerHelperViewRect = [[centerHelperViewLayer valueForKey:@"frame"] CGRectValue];
[self drawLoadLayerWithCenter:centerHelperViewRect.origin];
}
|
既然我们能够获取到centerHelperView在不同时间里的位置，那么我们就可以根据它来绘制我们的曲线
我们可以看到左右两边都是直线，调用- addLineToPoint方法即可，重要的是底下这条线，我们获取到centerHelperView的位置后，暂且用c来表示，我们在绘制曲线时，需要用到controlPoint1和controlPoint2，那我们就把底下的线分为三段，并且以c为中心店，左边取出l3、l2、l1，右边取出r3、r2、r1，曲线分为三条：
1
2
3
4
5
6
7
| UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:CGPointMake(0, 0)];
[path addLineToPoint:l3];
[path addCurveToPoint:l1 controlPoint1:l3 controlPoint2:l2];
[path addCurveToPoint:r1 controlPoint1:l1 controlPoint2:c];
[path addCurveToPoint:r3 controlPoint1:r1 controlPoint2:r2];
[path addLineToPoint:CGPointMake(CGRectGetWidth(self.associatedScrollView.frame), 0)];
|
果冻的曲线我们就完成了，然后我们就要开始对手势的状态来进行处理
在写控件调试的时候，你可以通过给目标视图添加UIPanGestureRecognizer，调用- translationInView:来获取到手指在屏幕上拖动时位置的变化，但是下拉刷新控件一般都是加在ScrollView上的，ScrollView自己是有一个只读的UIPanGestureRecognizer属性，所以我们不必自己再添加一个，我们只需要观察UIPanGestureRecognizer的state即可
1
| [self.associatedScrollView addObserver:self forKeyPath:@"panGestureRecognizer.state" options:NSKeyValueObservingOptionNew context:nil];
|
在取消拖动时，我们根据ScrollView的contentOffset来判断，是否是取消加载还是加载
0x01 下拉进度圆圈的显示及旋转
进度圆圈的显示主要是依赖于下拉的进度，然后改变progress，圆圈随之绘制就好
1
2
3
4
5
| if (contentOffset.y < 0) {
self.progress = MAX(0.0, MIN(fabs(contentOffset.y/kGCPullMaxDistance), 1.0));
} else {
self.progress = 0;
}
|
1
2
3
4
5
6
7
| - (void)drawRect:(CGRect)rect {
UIBezierPath *circlePath = [UIBezierPath bezierPath];
[circlePath moveToPoint:CGPointMake(0, - kGCLoadingCircleRadius)];
[circlePath addArcWithCenter:CGPointMake(0, 0) radius:kGCLoadingCircleRadius startAngle:-M_PI/2 endAngle:((M_PI*17/9)*self.progess - M_PI/2) clockwise:YES];
self.circleLayer.path = circlePath.CGPath;
}
|
当progress达到1之后，就开始旋转动画了，这个我们使用CABasicAnimation即可
1
2
3
4
5
6
7
| CABasicAnimation *rotationAnimation = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];
rotationAnimation.toValue = @(M_PI*2);
rotationAnimation.beginTime = CACurrentMediaTime();
rotationAnimation.duration = 1.0;
rotationAnimation.fillMode = kCAFillModeForwards;
rotationAnimation.repeatCount = HUGE_VALF;
[self.circleLayer addAnimation:rotationAnimation forKey:nil];
|
ok，大功告成~
