iOS仿网易考拉弹簧效果

先上网易考拉的效果

1536738568152694.gif

思路是下拉的同时改变header视图的高度，主要代码在scrollViewDidScroll代理方法中

#import "ViewController.h"

@interface ViewController ()<UITableViewDelegate, UITableViewDataSource>

@property (nonatomic, strong)UITableView *myTableView;

@property (nonatomic, strong)UIView *headerContentView;

@property (nonatomic, strong)UIView *cardView;

@end

@implementation ViewController
{
    BOOL needAnimation;
}

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    
    [self createUI];
}

- (void)createUI {
    _myTableView = [[UITableView alloc]initWithFrame:CGRectMake(0, -220, self.view.frame.size.width, self.view.frame.size.height + 220)];
    _myTableView.backgroundColor = [UIColor whiteColor];
    _myTableView.delegate = self;
    _myTableView.dataSource = self;
    _myTableView.tableHeaderView = [self createHeaderView];
    [self.view addSubview:_myTableView];
}

- (UIView *)createHeaderView {
    UIView *headerView = [[UIView alloc]initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, 420)];
    headerView.backgroundColor = [UIColor redColor];
    headerView.clipsToBounds = YES;
    
    _headerContentView = [[UIView alloc]initWithFrame:headerView.bounds];
    _headerContentView.backgroundColor = [UIColor redColor];
    [headerView addSubview:_headerContentView];
    
    _cardView = [[UIView alloc]initWithFrame:CGRectMake(15, 400, self.view.frame.size.width - 30, 200)];
    _cardView.backgroundColor = [UIColor blackColor];
    [_headerContentView addSubview:_cardView];
    
    UILabel *cardLabel = [[UILabel alloc]init];
    cardLabel.text = @"你看我叼吗";
    cardLabel.textColor = [UIColor whiteColor];
    cardLabel.font = [UIFont boldSystemFontOfSize:20];
    [cardLabel sizeToFit];
    cardLabel.center = CGPointMake(_cardView.frame.size.width/2, _cardView.frame.size.height/2);
    [_cardView addSubview:cardLabel];
    
    return headerView;
}

- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
    //NSLog(@"%lf", scrollView.contentOffset.y);
    CGFloat downHight = -scrollView.contentOffset.y;//下拉的距离
    CGRect frame = _headerContentView.frame;
    if (downHight < 0) {
        frame.size.height = 420;
        _headerContentView.frame = frame;
        _cardView.frame = CGRectMake(15, 400, self.view.frame.size.width - 30, 200);
    }else if (downHight < 100) {
        frame.size.height = 420 + downHight;
        _headerContentView.frame = frame;
        _cardView.frame = CGRectMake(15, 400 - downHight, self.view.frame.size.width - 30, 200);
    }else {
        frame.size.height = 420 + 100;
        _headerContentView.frame = frame;
        _cardView.frame = CGRectMake(15, 400 - 100, self.view.frame.size.width - 30, 200);

        _myTableView.contentOffset = CGPointMake(0, -100);//最多往下拉动的距离，防止漏出白边
    }
    
    if (scrollView.contentOffset.y < -20 && needAnimation) {
        [self runAnimation];//抖动动画
    }
}

- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate {
    if (scrollView.contentOffset.y < -20) {
        needAnimation = YES;
    }
}

- (void)runAnimation {
    needAnimation = NO;
    
    [UIView animateWithDuration:0.4 animations:^{
        [self.myTableView setContentOffset:CGPointMake(0, -20)];
    } completion:^(BOOL finished) {
        [UIView animateWithDuration:0.3 delay:0 usingSpringWithDamping:0.2 initialSpringVelocity:8 options:UIViewAnimationOptionCurveEaseOut animations:^{
            [self.myTableView setContentOffset:CGPointMake(0, -15)];
        } completion:^(BOOL finished) {
            [UIView animateWithDuration:0.3 animations:^{
                [self.myTableView setContentOffset:CGPointMake(0, -20)];
            }];
        }];
    }];
}

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
    return 10;
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    static NSString *cellIdentifier = @"cell";
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:cellIdentifier];
    if (!cell) {
        cell = [[UITableViewCell alloc]initWithStyle:UITableViewCellStyleDefault reuseIdentifier:cellIdentifier];
    }
    
    cell.textLabel.text = [NSString stringWithFormat:@"%ld", indexPath.row];
    
    return cell;
}

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
    return 44;
}

中间有个抖动效果

[UIView animateWithDuration:0.3 delay:0 usingSpringWithDamping:0.2 initialSpringVelocity:8 options:UIViewAnimationOptionCurveEaseOut animations:^{
    [self.myTableView setContentOffset:CGPointMake(0, -15)];
} completion:^(BOOL finished) {
    [UIView animateWithDuration:0.3 animations:^{
        [self.myTableView setContentOffset:CGPointMake(0, -20)];
    }];
}];

最终效果

1536738569950076.gif