寒雨連江夜入?yún)瞧戎矫魉涂统焦拢?lt;露力麗>
記錄一個(gè)簡(jiǎn)單的下拉頂部圖片放大的效果宪赶，再加個(gè)毛玻璃！
iOS8之后毛玻璃效果實(shí)現(xiàn)：
利用 UIVisualEffect這類實(shí)現(xiàn)毛玻璃效果脯燃， 這是一個(gè)抽象的類搂妻，不能直接使用,需通過(guò)它子類(UIBlurEffect, UIVibrancyEffect ) 外加 UIVisualEffectView 一起實(shí)現(xiàn);
UIBlurEffect *blur = [UIBlurEffect effectWithStyle:(UIBlurEffectStyleLight)];
UIVisualEffectView *effectView = [[UIVisualEffectView alloc] initWithEffect:blur];
effectView.frame = frame; // 加到相應(yīng)的位置即可```
>iOS7的實(shí)現(xiàn)依靠UIToolbar，創(chuàng)建一個(gè)UIToolbar實(shí)例辕棚，然后設(shè)置屬性 barStyle對(duì)應(yīng)的屬性值欲主，然后添加到父視圖上就好了邓厕！
>```code
UIToolbar *toolbar = [[UIToolbar alloc] initWithFrame:frame];
toolbar.barStyle = UIBarStyleBlackOpaque;// 設(shè)置毛玻璃樣式
效果圖：
思路： 我們通過(guò)監(jiān)聽(tīng) tableView 的下拉偏移量，通過(guò)偏移量的大小相應(yīng)的改變頂部圖片的 frame 而由于照片的填充模式扁瓢，就會(huì)產(chǎn)生一個(gè)放大的效果详恼！同時(shí)根據(jù)偏移量我們?nèi)バ薷拿ＡУ耐该鞫染蜁?huì)營(yíng)造出由模糊到清晰的視覺(jué)效果！
上代碼：
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"];
# 關(guān)鍵： 照片按照自己的比例填充滿
_topImageView.contentMode = UIViewContentModeScaleAspectFill;
# 關(guān)鍵： 超出 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：監(jiān)控 tableView 的滾動(dòng)引几， 下拉的時(shí)候讓圖片變大昧互，毛玻璃效果減弱
```code
- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
// 向下的話 為負(fù)數(shù)
CGFloat off_y = scrollView.contentOffset.y;NSLog(@"------->%f",off_y);
CGFloat kHeight = [UIScreen mainScreen].bounds.size.height;
// 下拉超過(guò)照片的高度的時(shí)候
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;
// 對(duì)應(yīng)調(diào)整毛玻璃的效果
self.effectView.alpha = 1 + (off_y + imageHeight) / kHeight ;
}
}
