iOS UITableView 下拉刷新果冻/弹力效果 + 自定
先上图🙃Demo在最下方
效果图.gif
这次主讲下拉果冻动画效果，自定义Refresh动画请自行下载最下面的Demo，若有算法上或者本文没看懂的问题，可文章下面留言❤️
1.隐藏自身NavigationBar，自定义View作为NavigationBar完成上图效果
2.自定义View与UITableView或者UIPanGestureRecognizer联动
3.UIBezierPath实现跟随下拉使View变形
4.松手后回弹效果（CADisplayLink实现）
image.png
明白上面4点后，下面的内容你可能会好消化一点=。=
如上图完成这个效果的重点在于用这5个点作为Path来完成一系列效果。而从Gif中不难看出，3号点是一个关键点，可以把它间接的理解为UIBezierPath中的ControlPoint（事实不是，后文解释）。
这里创建一个Layer作为容器来承载Path
@property (nonatomic, strong) CAShapeLayer *shapeLayer;
self.shapeLayer = [CAShapeLayer layer];
self.shapeLayer.fillColor = RGB(252, 157, 154).CGColor;
[self.layer addSublayer:self.shapeLayer];
然后创建一个ControlPoint，为了达到自然的效果，因为下拉变形距离如果跟随手势拖动位置直接变化会显得很不自然、突兀，所以用一个ControlPoint来比例缩小手势拉动距离（这里再创建一个像素View来更直观的看效果）,并且给ControlPoint添加KVO观察Value的变化来更新Path的变化
@property (nonatomic) CGPoint endAnimatePoint;
@property (nonatomic, strong) UIView *referencePointView;
self.referencePointView = [[UIView alloc] initWithFrame:CGRectMake(CGRectGetWidth(self.frame)/2.f-2, CGRectGetMaxY(self.frame)-2, 4, 4)];
self.referencePointView.backgroundColor = [UIColor redColor];
[self addSubview:self.referencePointView];
#define KVO_EndPoint @"endAnimatePoint"
- (void)setupKVO {
[self addObserver:self forKeyPath:KVO_EndPoint options:NSKeyValueObservingOptionNew context:nil];
self.endAnimatePoint = CGPointMake(CGRectGetWidth(self.frame)/2.f-2, CGRectGetMaxY(self.frame)-2);
}
-(void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary<NSString *,id> *)change context:(void *)context {
if ([keyPath isEqualToString:KVO_EndPoint]) {
[self updateShapeLayerPath];
}
}
ControlPoint.gif
从上图可以看到ControlPoint的作用，方便理解
这里我用UITableView联动作为例子（直接用UIPanGestureRecognizer就是这个版本的简化）
[self.jellyTableView.panGestureRecognizer addTarget:self action:@selector(handlePanAction:)];
- (void)handlePanAction:(UIPanGestureRecognizer *)pan {
CGPoint point = [pan translationInView:self.view];
[self.customNavigationBar animateStateChangeAtX:point.x y:point.y];
}
- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate {
[self.customNavigationBar animateStateEnd];
}
- (void)animateStateChangeAtX:(CGFloat)x y:(CGFloat)y {
if (!self.isAnimating) {
if ((y*0.7 + CGRectGetHeight(self.frame)) > CGRectGetHeight(self.frame)) {
//减缓手势变化达到更自然的效果
CGFloat mHeight = y*0.7 + CGRectGetHeight(self.frame);
CGFloat mWidth = x + CGRectGetWidth(self.frame)/2.f;
//改变ControlPoint的Value来执行KVO的方法
self.endAnimatePoint = CGPointMake(mWidth-2, mHeight-2);
self.referencePointView.frame = CGRectMake(mWidth-2, mHeight-2, 4, 4);
self.titleLabel.alpha = (Refresh_Height-y)/Refresh_Height;
self.loadingAnimationView.alpha = y/Refresh_Height;
}
if (y > Refresh_Height) {
self.refreshState = YES;
}
else {
self.refreshState = NO;
}
}
}
接下来是果冻效果的核心代码 注释都在代码里
- (void)updateShapeLayerPath {
UIBezierPath *tPath = [UIBezierPath bezierPath];
//移动点到1
[tPath moveToPoint:CGPointMake(0, 0)];
//连接1-5的线
[tPath addLineToPoint:CGPointMake(CGRectGetWidth(self.frame), 0)];
//连接5-4的线
[tPath addLineToPoint:CGPointMake(CGRectGetWidth(self.frame), CGRectGetHeight(self.frame))];
//连接4-2的线 其中3点用ConrolPoint来作为控制点连接
[tPath addQuadCurveToPoint:CGPointMake(0, CGRectGetHeight(self.frame)) controlPoint:CGPointMake(self.endAnimatePoint.x, self.endAnimatePoint.y)];
[tPath closePath];
self.shapeLayer.path = tPath.CGPath;
}
到此为止下拉已经可以看到效果了
接下来要实现回弹效果
这里我要用到CADisplayLink，这是作为跟着屏幕的刷新率更新界面UI的一个类似Timer的东西，详细属性和作用简书其他文章里也有很详细的介绍，这里就不多做解释了
@property (nonatomic, strong) CADisplayLink *displayLink;
self.displayLink = [CADisplayLink displayLinkWithTarget:self selector:@selector(updatePath:)];
self.displayLink.paused = YES;
[self.displayLink addToRunLoop:[NSRunLoop currentRunLoop] forMode:NSRunLoopCommonModes];
- (void)updatePath:(CADisplayLink *)displayLink {
CALayer *layer = self.referencePointView.layer.presentationLayer;
self.endAnimatePoint = CGPointMake(layer.position.x, layer.position.y);
}
//这里我要提一嘴，Mode一定要选择NSRunLoopCommonModes，原因可以自行搜索一下NSRunLoopCommonModes和NSDefaultRunLoopMode的区别，若选择后者会导致动画看不到或者只能看到最后一部分
这里CADisplayLink的作用就是，在我们松开手的那个刻，拿到最后一个ControlPoint，在利用系统自带的+ (void)animateWithDuration:(NSTimeInterval)duration delay:(NSTimeInterval)delay usingSpringWithDamping:(CGFloat)dampingRatio initialSpringVelocity:(CGFloat)velocity options:(UIViewAnimationOptions)options animations:(void (^)(void))animations completion:(void (^ __nullable)(BOOL finished))completion NS_AVAILABLE_IOS(7_0);方法，来做一个ControlPoint回到初始位置并带有弹性效果的动画，方法中usingSpringWithDamping属性可以理解为是用来控制弹性动画的，这样就可以做到随着屏幕的刷新率，一直改变ControlPoint的位置直到回到原点动画结束
- (void)animateStateEnd {
if (!self.isAnimating) {
self.isAnimating = YES;
self.displayLink.paused = NO;
[UIView animateWithDuration:1 delay:0 usingSpringWithDamping:0.5 initialSpringVelocity:0 options:UIViewAnimationOptionCurveEaseInOut animations:^{
self.referencePointView.frame = CGRectMake(CGRectGetWidth(self.frame)/2.f-2, CGRectGetMaxY(self.frame)-2, 4, 4);
if (!self.refreshState) {
self.titleLabel.alpha = 1;
self.loadingAnimationView.alpha = 0;
}
else {
self.titleLabel.alpha = 0;
self.loadingAnimationView.alpha = 1;
}
} completion:^(BOOL finished) {
if (finished) {
self.isAnimating = NO;
self.displayLink.paused = YES;
}
}];
if (self.refreshState) {
[self.loadingAnimationView startAnimate];
[self performSelector:@selector(stopAnimate) withObject:nil afterDelay:5];
}
}
}
到这里位置下拉刷新果冻/弹力效果就完成了
