实现图片下拉放大和简书导航栏头像缩放效果

---

引言：一直觉得简书的导航栏头像的缩放效果很好玩，于是找了一些资料，实现了一下，感谢MJ大神和标哥的无私分享。经验和脑洞大开才是开发人员该有的......

---

效果如下：

下拉放大.gif 导航头像缩放.gif

一、图片的下拉放大

• 1.分析
  如果将图片放到UITableView的HeadView中，效果并不好，下拉的时候，会随着UITableView的滑动而滑动，需要实时改变HeadView的大小，显然这不是我们要费心思的事情。
• 2.结论
  将图片添加到UITableView上，然后设置UITableView的contentInset的值，使UITableView初始的时候就向下移动一定距离，以便显示图片。
  代码很简单，实现如下：

#import "ZBPulllistViewController.h"

#define k_imageViewHeight [UIScreen mainScreen].bounds.size.width

const CGFloat NavHeight = 64;

@interface ZBPulllistViewController (){
    UIImageView         *_headImgeView;
}
@end

@implementation ZBPulllistViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    
    //设置tableView的内边距
    self.tableView.contentInset = UIEdgeInsetsMake(k_imageViewHeight * 0.5 - NavHeight, 0, 0, 0);
    //初始化顶部图片
    if (_headImgeView == nil) {
        _headImgeView = [[UIImageView alloc] initWithFrame:CGRectMake(0, - k_imageViewHeight, k_imageViewHeight, k_imageViewHeight)];
        _headImgeView.image = [UIImage imageNamed:@"神同步.JPG"];
        //设置图片的填充方式
        _headImgeView.contentMode = UIViewContentModeScaleAspectFill;
        //添加图片到tableView顶部(直接addSubView，当下拉的时候会覆盖cell)
        [self.tableView insertSubview:_headImgeView atIndex:0];
    }
    
}

#pragma mark - Table view data source
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
    return 10;
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"listCell"];
    return cell;
    
}

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

#pragma mark - UIScrollView代理方法
- (void)scrollViewDidScroll:(UIScrollView *)scrollView{
    
    //计算往下拖拽的高度
    CGFloat down = -(k_imageViewHeight * 0.5) - scrollView.contentOffset.y;
    //小于0直接返回
    if(down < 0) return;
    CGRect frame = _headImgeView.frame;
    frame.size.height = k_imageViewHeight + down * 1;
    _headImgeView.frame = frame;
    
}   
@end

需要注意的是：
1、[self.tableView insertSubview:_headImgeView atIndex:0];将图片插入到TableView的后面，不然在下拉的时候cell会被遮挡。
2、当下拉的时候ScrollView的contentOffset y值为负数。

二、类似简书导航栏头像的缩放

• 1.分析
  需要将图片添加到导航栏上，可以自定义图片View，也可以利用导航栏的TitleView。
• 2.结论
  由于个人比较喜欢自定义，所以......(纯属瞎搞...)
  和图片的下拉放大效果实现几乎一样，唯一不同的是这里需要用到CGAffineTransformMakeScale去缩放图片。
  代码实现如下：

#import "ZBScaleIconViewController.h"
#define k_iconHeight 88

@interface ZBScaleIconViewController (){
    UIImageView         *_iconImageView;
}
@end

@implementation ZBScaleIconViewController
- (void)viewDidLoad {
    
    [super viewDidLoad];
    self.navigationController.title = nil;
    
    if (_iconImageView == nil) {
        _iconImageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, k_iconHeight, k_iconHeight)];
        _iconImageView.center = CGPointMake([UIScreen mainScreen].bounds.size.width * 0.5, self.navigationController.navigationBar.frame.size.height);
        _iconImageView.image = [UIImage imageNamed:@"神同步.JPG"];
        CGFloat corner = 5;
        _iconImageView.layer.cornerRadius = corner;
        _iconImageView.layer.masksToBounds = YES;
        
        self.tableView.contentInset = UIEdgeInsetsMake(k_iconHeight, 0, 0, 0);
        [self.navigationController.navigationBar addSubview:_iconImageView];
    }
}

#pragma mark - Table view data source
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
    return 20;
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"iconList"];
    if (cell == nil) {
        cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:@"iconList"];
    }
    return cell;
}

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

#pragma mark - UIScrollView代理方法
- (void)scrollViewDidScroll:(UIScrollView *)scrollView{
    
    //计算往下拖拽的高度
    CGFloat down = scrollView.contentOffset.y + scrollView.contentInset.top;
    
    CGFloat scale = 1.0;
    // 放大
    if (down < 0) {
        scale = MIN(1.0, 1 - down / k_iconHeight);
    } else if (down > 0) { // 缩小
        scale = MAX(0.45, 1 - down / k_iconHeight);
    }
    
    _iconImageView.transform = CGAffineTransformMakeScale(scale, scale);
    
    // 保证缩放后y坐标不变
    CGRect frame = _iconImageView.frame;
    frame.origin.y = -_iconImageView.layer.cornerRadius / 2;
    _iconImageView.frame = frame;
    
}
@end

需要注意的是：
1、自定义图片缩放的最大与最小缩放系数（根据自己的需求定义),也就是放大的限值和缩小的限值。这里我根据简书的效果，定义的初始值就是图片原大小，最大限值也是图片原大小，缩小的限值为试验出来的结果，由于没有审美细胞，就依个人喜好设置了。
2、首次实现过程中，我还是利用了改变图片宽高的方法，并在改变的过程中，平移图片，虽然能够实现目的，但是代码繁琐并且存在bug，当scrollView滚动过快的时候，图片不是平滑缩放，而是出现卡顿的现象，这和scrollView滚动的数值有关，过快的时候数值并不是连续的，而是跳跃的。
再次感谢MJ大神以及标哥，标哥的博客介绍的很详细，我就不多啰嗦了，注意点同学们注意一下就好了。
查看标哥博客请点击“偶”