思路： 我們通過監(jiān)聽 tableView 的下拉偏移量掷匠，通過偏移量的大小相應(yīng)的改變頂部圖片的 frame 而由于照片的填充模式滥崩，就會產(chǎn)生一個(gè)放大的效果！同時(shí)根據(jù)偏移量我們?nèi)バ薷拿ＡУ耐该鞫染蜁I造出由模糊到清晰的視覺效果讹语！
代碼如下:
@property (nonatomic ,strong)UITableView * tableView;//下面的tableView
@property (nonatomic,strong)UIImageView * topImageView;//頂部的imageView
@property (nonatomic,strong)UIVisualEffectView * effctView;//毛玻璃
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
[self createUI];
}
- (void)createUI{
self.tableView = [[UITableView alloc]initWithFrame:self.view.bounds style:UITableViewStylePlain];
self.tableView.delegate = self;
self.tableView.dataSource = self;
[self.tableView registerClass:[UITableViewCell class] forCellReuseIdentifier:@"cell"];
//留出頭部的imageView 的高度
self.tableView.contentInset = UIEdgeInsetsMake(200, 0, 0, 0);
[self.view addSubview:self.tableView];
self.topImageView = [[UIImageView alloc]initWithFrame:CGRectMake(0,-200, self.view.frame.size.width, 200)];
_topImageView.image = [UIImage imageNamed:@"a.jpg"];
//照片要按照自己的比例去添加
_topImageView.contentMode = UIViewContentModeScaleAspectFill;
//對照片超出的部分要進(jìn)行剪裁
_topImageView.clipsToBounds = YES;
[self.tableView addSubview:self.topImageView];
//添加毛玻璃效果
UIBlurEffect * blur = [UIBlurEffect effectWithStyle:UIBlurEffectStyleLight];
UIVisualEffectView * effctView = [[UIVisualEffectView alloc]initWithEffect:blur];
effctView.frame = _topImageView.frame;
_effctView = effctView;
[self.tableView addSubview:_effctView];
}
//監(jiān)控tableview的滾動(dòng),下來的時(shí)候讓圖片變大,毛玻璃效果減弱
- (void)scrollViewDidScroll:(UIScrollView *)scrollView{
//向下的話,為負(fù)數(shù)
CGFloat off_y = scrollView.contentOffset.y;
NSLog(@"-------%f",off_y);
CGFloat KHeight = [UIScreen mainScreen].bounds.size.height;
//下拉的時(shí)候超過照片的高度的時(shí)候
if (off_y < - 200) {
CGRect? frame = self.topImageView.frame;
//這里的思路就是改變頂部的照片的frame
self.topImageView.frame = CGRectMake(0, off_y, frame.size.width, -off_y);
self.effctView.frame = self.topImageView.frame;
//對應(yīng)調(diào)整毛玻璃的效果
self.effctView.alpha = 1 + (off_y + 200)/KHeight;
}
}
