iOS-小Demo--下拉放大顶部图片+毛玻璃效果

寒雨连江夜入吴，平明送客楚山孤！<露力丽>

---

记录一个简单的下拉顶部图片放大的效果，再加个毛玻璃！

iOS8之后毛玻璃效果实现：
利用 UIVisualEffect这类实现毛玻璃效果， 这是一个抽象的类，不能直接使用,需通过它子类(UIBlurEffect, UIVibrancyEffect ) 外加 UIVisualEffectView 一起实现;

 UIBlurEffect *blur = [UIBlurEffect effectWithStyle:(UIBlurEffectStyleLight)];
 UIVisualEffectView *effectView = [[UIVisualEffectView alloc] initWithEffect:blur];
 effectView.frame = frame; // 加到相应的位置即可```

>iOS7的实现依靠UIToolbar，创建一个UIToolbar实例，然后设置属性 barStyle对应的属性值，然后添加到父视图上就好了！

>```code
 UIToolbar *toolbar = [[UIToolbar alloc] initWithFrame:frame];
 toolbar.barStyle = UIBarStyleBlackOpaque;// 设置毛玻璃样式

效果图：

思路： 我们通过监听 tableView 的下拉偏移量，通过偏移量的大小相应的改变顶部图片的 frame 而由于照片的填充模式，就会产生一个放大的效果！同时根据偏移量我们去修改毛玻璃的透明度就会营造出由模糊到清晰的视觉效果！

---

上代码：
1：定义属性

// 图片下面的 tableView
@property (strong, nonatomic) UITableView *tableView;
// 顶部的照片
@property (strong, nonatomic) UIImageView *topImageView;
// 毛玻璃
@property (strong, nonatomic) UIVisualEffectView *effectView;

2: 布局 TableView

self.tableView = [[UITableView alloc] initWithFrame:self.view.bounds style:(UITableViewStylePlain)];
self.tableView.dataSource = self;
self.tableView.delegate = self;
// 这里为了留出放照片的位置
self.tableView.contentInset = UIEdgeInsetsMake(imageHeight, 0, 0, 0); [self.view addSubview:_tableView];

3: 布局顶部的照片

self.topImageView = [[UIImageView alloc] initWithFrame:(CGRectMake(0, -imageHeight, self.view.frame.size.width, imageHeight))];
_topImageView.image = [UIImage imageNamed:@"lebron_raymone_james.jpg"];
# 关键： 照片按照自己的比例填充满
    _topImageView.contentMode = UIViewContentModeScaleAspectFill;
# 关键： 超出 imageView部分裁减掉
    _topImageView.clipsToBounds = YES;
[self.tableView addSubview:self.topImageView];

4: 加毛玻璃效果

UIBlurEffect *blur = [UIBlurEffect effectWithStyle:(UIBlurEffectStyleLight)];
UIVisualEffectView *effectView = [[UIVisualEffectView alloc] initWithEffect:blur];
effectView.frame = _topImageView.frame;
_effectView = effectView;
[self.tableView addSubview:_effectView];```
5：监控  tableView 的滚动， 下拉的时候让图片变大，毛玻璃效果减弱
```code
- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
    // 向下的话 为负数
    CGFloat off_y = scrollView.contentOffset.y;NSLog(@"------->%f",off_y);
    CGFloat kHeight = [UIScreen mainScreen].bounds.size.height;
// 下拉超过照片的高度的时候
    if (off_y < - imageHeight)
    {
        CGRect frame = self.topImageView.frame;
// 这里的思路就是改变 顶部的照片的 fram
        self.topImageView.frame = CGRectMake(0, off_y, frame.size.width, -off_y);
        self.effectView.frame = self.topImageView.frame;
// 对应调整毛玻璃的效果
        self.effectView.alpha = 1 + (off_y + imageHeight) / kHeight ;
    }   
}