思路： 我们通过监听 tableView 的下拉偏移量，通过偏移量的大小相应的改变顶部图片的 frame 而由于照片的填充模式，就会产生一个放大的效果！同时根据偏移量我们去修改毛玻璃的透明度就会营造出由模糊到清晰的视觉效果！
代码如下:
@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;
//对照片超出的部分要进行剪裁
_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];
}
//监控tableview的滚动,下来的时候让图片变大,毛玻璃效果减弱
- (void)scrollViewDidScroll:(UIScrollView *)scrollView{
//向下的话,为负数
CGFloat off_y = scrollView.contentOffset.y;
NSLog(@"-------%f",off_y);
CGFloat KHeight = [UIScreen mainScreen].bounds.size.height;
//下拉的时候超过照片的高度的时候
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;
//对应调整毛玻璃的效果
self.effctView.alpha = 1 + (off_y + 200)/KHeight;
}
}
网友评论