导航栏透明度和CGAffineTransform的一个动画特效

经常会看到一种效果就是导航栏的透明度可以随着页面的高度变化而改变透明度的效果。那么是怎么实现的呢？

2017-05-25 17_42_14.gif

导航栏实现思路：

• 首先把原来的导航栏隐藏起来
• 然后自定义一个导航栏（就是一个view啦），然后在里面添加你想要的控件。
• 接着监控视图下滑的高度，根据高度来变化自定义的导航栏的透明度即可

好啦，看一下假的导航栏的创建

解析一下动画效果的实现过程

• 首先要设置一下tableview的contentInset属性的top值，设置为图片的高度，为添加图片预留出空间
• 然后将图片是添加在tableview上面，注意这里图片的Y坐标是负图片的高度，这样才能将图片加载在tableview的头部，类似tableview的headerView。
• 动画效果是用CGAffineTransform中的放大和平移叠加来实现的
  具体的CGAffineTransform使用可以看我上一篇CGAffineTransform详解

这里简单解释一下吧，根据偏移量来得到一个缩放比，判断缩放比是否大于1，如果小于1，那么就设为1就好了，这里我们要的是放大效果。这里创建一个缩放转换
CGAffineTransform transform = CGAffineTransformMakeScale(scaleTopView,scaleTopView);
这样我们就有图片的缩放动画了
然后因为我们的图片是加在tableview上面，tableview下拉的时候，我们的图片也在下载，而我们的放大效果导致图片也向下延伸覆盖了了tableview的一定高度，所以我们就需要把图片向上移动这个高度。
高度放大倍数的偏移量：(scaleTopView - 1) * headerHeight/2
计算偏移参数
CGFloat ty = (scaleTopView - 1) * headerHeight/2/scaleTopView;

//创建假的导航条
-(void)createNaView
{
    self.naView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, 64)];
    self.naView.backgroundColor = [UIColor orangeColor];
    //开始设为透明
    self.naView.alpha = 0.0;
    [self.view addSubview:self.naView];
    //添加返回按钮
    self.backBtn = [UIButton buttonWithType:UIButtonTypeCustom];
    self.backBtn.frame = CGRectMake(15, 30, 20, 20);
    [self.backBtn addTarget:self action:@selector(backButtonClick) forControlEvents:UIControlEventTouchUpInside];
    //加一个大一点的放回按钮
    UIButton *backButton = [[UIButton alloc] initWithFrame:CGRectMake(15, 20, 60, 40)];
    [backButton addTarget:self action:@selector(backButtonClick) forControlEvents:UIControlEventTouchUpInside];
    [self.view addSubview:backButton];
    [self.backBtn setImage:[UIImage imageNamed:@"zuofangxiangjiantou"] forState:UIControlStateNormal];
    [self.naView addSubview:self.backBtn];
  
    //标题
    self.titleLabel = [[UILabel alloc] initWithFrame:CGRectMake(40,25,40,30)];
    self.titleLabel.text = @"话题";
    self.titleLabel.textColor = [UIColor blackColor];
    self.titleLabel.textAlignment = NSTextAlignmentCenter;
    [self.naView addSubview:self.titleLabel];
    //下划线
    UIView *view = [[UIView alloc] initWithFrame:CGRectMake(0, 63.5, self.view.frame.size.width, 0.5)];
    view.backgroundColor = [UIColor grayColor];
    [self.naView addSubview:view];
}

监测scrollView滑动的高度变化来改变透明度

-(void)scrollViewDidScroll:(UIScrollView *)scrollView
{
    if (scrollView == self.tableView) {
        //最新一次的偏移量
        CGFloat scrollY = scrollView.contentOffset.y;
        //记录这次的偏移量
        self.offsetY = scrollY;
        //修改图片的位置
        //改变透明度
        CGFloat alpha =  (scrollY + headerHeight)/(250);
        self.naView.alpha = alpha;
        
        //实际的偏移量
        CGFloat actScrollY = scrollY + headerHeight;
        //得到缩放比
        CGFloat scaleTopView = 1 - (actScrollY) / 200;
        //判断缩放比是否大于1，如果小于1，那么就设为1就好了，这里我们要的是放大效果
        scaleTopView = scaleTopView > 1 ? scaleTopView : 1;
        //等比缩放
        CGAffineTransform transform = CGAffineTransformMakeScale(scaleTopView,scaleTopView);
       //高度放大倍数的偏移量(scaleTopView - 1) * headerHeight/2
       //计算偏移参数
        CGFloat ty = (scaleTopView - 1) * headerHeight/2/scaleTopView;
        self.imageView.transform = CGAffineTransformTranslate(transform, 0, -ty);

    }
}

-(UITableView *)tableView
{
    if (!_tableView) {
        _tableView = [[UITableView alloc] initWithFrame:CGRectMake(0, -20, [UIScreen mainScreen].bounds.size.width, [UIScreen mainScreen].bounds.size.height) style:UITableViewStylePlain];
        _tableView.delegate = self;
        _tableView.dataSource = self;
        _tableView.contentInset = UIEdgeInsetsMake(headerHeight,0, 0, 0);
        [_tableView addSubview:self.imageView];
    }
    return _tableView;
}
-(UIImageView *)imageView{
    if (!_imageView) {
        _imageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, -headerHeight, self.view.frame.size.width, headerHeight)];
        _imageView.image = [UIImage imageNamed:@"yoyo"];
    }
    return _imageView;
}