使用UITableView实现图片视差效果
使用UITableView实现图片视差效果
视差效果如下:
原理:
根据偏移量计算不同的移动速度,so easy!
// // RootTableViewController.h // TableView // // Copyright (c) 2014年 Y.X. All rights reserved. // #import <UIKit/UIKit.h> @interface RootTableViewController : UITableViewController @end
// // RootTableViewController.m // TableView // // Copyright (c) 2014年 Y.X. All rights reserved. // #import "RootTableViewController.h" #import "ImageCell.h" #import "UIImage+ImageEffects.h" #import "FrameAccessor.h" #define IMAGE [UIImage imageNamed:@"girl"] #define IMAGE_HEIGHT [IMAGE scaleWithFixedWidth:320.f].size.height @interface RootTableViewController ()<UIScrollViewDelegate> @property (nonatomic, strong) ImageCell *showImageCell; @property (nonatomic, strong) UIImage *rootImage; @end @implementation RootTableViewController - (void)viewDidLoad { [super viewDidLoad]; _rootImage = [IMAGE scaleWithFixedWidth:320.f]; } #pragma mark - Table view data source - (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView { // Return the number of sections. return 1; } - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section { // Return the number of rows in the section. return 10; } - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath { if (indexPath.row == 0) { static NSString *reusedLableImage = @"Image"; ImageCell *cell = [tableView dequeueReusableCellWithIdentifier:reusedLableImage]; if (cell == nil) { cell = [[ImageCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:reusedLableImage]; } _showImageCell = cell; cell.showImageView.image = _rootImage; cell.showImageView.viewSize = _rootImage.size; return cell; } else { static NSString *reusedLableOne = @"Normal"; UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:reusedLableOne]; if (cell == nil) { cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:reusedLableOne]; cell.backgroundColor = [UIColor whiteColor]; cell.textLabel.text = @"YouXianMing"; cell.textLabel.font = [UIFont fontWithName:@"HelveticaNeue-Thin" size:20.f]; } return cell; } } - (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath { // 返回图片高度 if (indexPath.row == 0) { return [IMAGE scaleWithFixedWidth:320.f].size.height; } return 70; } - (void)scrollViewDidScroll:(UIScrollView *)scrollView { // 防止出现bug if (scrollView.contentOffset.y <= 0) { _showImageCell.layer.masksToBounds = NO; } else { _showImageCell.layer.masksToBounds = YES; } // 计算偏移量 _showImageCell.showImageView.y \ = calculateSlope(0, 0, 200, 100)*scrollView.contentOffset.y + calculateConstant(0, 0, 200, 100); } CGFloat calculateSlope(CGFloat x1, CGFloat y1, CGFloat x2, CGFloat y2) { return (y2 - y1) / (x2 - x1); } CGFloat calculateConstant(CGFloat x1, CGFloat y1, CGFloat x2, CGFloat y2) { return (y1*(x2 - x1) - x1*(y2 - y1)) / (x2 - x1); } @end
// // ImageCell.h // TableView // // Copyright (c) 2014年 Y.X. All rights reserved. // #import <UIKit/UIKit.h> @interface ImageCell : UITableViewCell @property (nonatomic, strong) UIImageView *showImageView; @end
// // ImageCell.m // TableView // // Copyright (c) 2014年 Y.X. All rights reserved. // #import "ImageCell.h" #import "FrameAccessor.h" @implementation ImageCell - (id)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier { self = [super initWithStyle:style reuseIdentifier:reuseIdentifier]; if (self) { _showImageView = [[UIImageView alloc] init]; _showImageView.frame = (CGRect){CGPointZero, CGSizeZero}; [self addSubview:_showImageView]; } return self; } @end
好吧,止足于这种效果的话就太简单了,来点复杂的:)
// // RootTableViewController.h // TableView // // Copyright (c) 2014年 Y.X. All rights reserved. // #import <UIKit/UIKit.h> @interface RootTableViewController : UITableViewController @end
// // RootTableViewController.m // TableView // // Copyright (c) 2014年 Y.X. All rights reserved. // #import "RootTableViewController.h" #import "ImageCell.h" #import "UIImage+ImageEffects.h" #import "FrameAccessor.h" #define IMAGE [UIImage imageNamed:@"girl"] #define IMAGE_HEIGHT [IMAGE scaleWithFixedWidth:320.f].size.height @interface RootTableViewController ()<UIScrollViewDelegate> @property (nonatomic, strong) ImageCell *showImageCell; @property (nonatomic, strong) UIImage *rootImage; @property (nonatomic, strong) UIImage *rootBlurImage; @end @implementation RootTableViewController - (void)viewDidLoad { [super viewDidLoad]; _rootImage = [IMAGE scaleWithFixedWidth:320.f]; _rootBlurImage = [[IMAGE scaleWithFixedWidth:320.f] grayScale]; } #pragma mark - Table view data source - (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView { // Return the number of sections. return 1; } - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section { // Return the number of rows in the section. return 10; } - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath { if (indexPath.row == 0) { static NSString *reusedLableImage = @"Image"; ImageCell *cell = [tableView dequeueReusableCellWithIdentifier:reusedLableImage]; if (cell == nil) { cell = [[ImageCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:reusedLableImage]; } _showImageCell = cell; cell.showImageView.image = _rootImage; cell.showImageView.viewSize = _rootImage.size; cell.showBlurImageView.image = _rootBlurImage; cell.showBlurImageView.viewSize = _rootBlurImage.size; return cell; } else { static NSString *reusedLableOne = @"Normal"; UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:reusedLableOne]; if (cell == nil) { cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:reusedLableOne]; cell.backgroundColor = [UIColor whiteColor]; cell.textLabel.text = @"YouXianMing"; cell.textLabel.font = [UIFont fontWithName:@"HelveticaNeue-Thin" size:20.f]; } return cell; } } - (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath { // 返回图片高度 if (indexPath.row == 0) { return [IMAGE scaleWithFixedWidth:320.f].size.height; } return 70; } - (void)scrollViewDidScroll:(UIScrollView *)scrollView { // 防止出现bug if (scrollView.contentOffset.y <= 0) { _showImageCell.layer.masksToBounds = NO; } else { _showImageCell.layer.masksToBounds = YES; } // 计算偏移量 _showImageCell.showImageView.y \ = calculateSlope(0, 0, 200, 100)*scrollView.contentOffset.y + calculateConstant(0, 0, 200, 100); // 计算偏移量 _showImageCell.showBlurImageView.y \ = calculateSlope(0, 0, 200, 100)*scrollView.contentOffset.y + calculateConstant(0, 0, 200, 100); // 计算偏移量 _showImageCell.showBlurImageView.alpha \ = calculateSlope(0, 0, 200, 1)*scrollView.contentOffset.y + calculateConstant(0, 0, 200, 1); } CGFloat calculateSlope(CGFloat x1, CGFloat y1, CGFloat x2, CGFloat y2) { return (y2 - y1) / (x2 - x1); } CGFloat calculateConstant(CGFloat x1, CGFloat y1, CGFloat x2, CGFloat y2) { return (y1*(x2 - x1) - x1*(y2 - y1)) / (x2 - x1); } @end
// // ImageCell.h // TableView // // Copyright (c) 2014年 Y.X. All rights reserved. // #import <UIKit/UIKit.h> @interface ImageCell : UITableViewCell @property (nonatomic, strong) UIImageView *showImageView; @property (nonatomic, strong) UIImageView *showBlurImageView; @end
// // ImageCell.m // TableView // // Copyright (c) 2014年 Y.X. All rights reserved. // #import "ImageCell.h" #import "FrameAccessor.h" @implementation ImageCell - (id)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier { self = [super initWithStyle:style reuseIdentifier:reuseIdentifier]; if (self) { _showImageView = [[UIImageView alloc] init]; _showImageView.frame = (CGRect){CGPointZero, CGSizeZero}; [self addSubview:_showImageView]; _showBlurImageView = [[UIImageView alloc] init]; _showBlurImageView.frame = (CGRect){CGPointZero, CGSizeZero}; _showBlurImageView.alpha = 0.f; [self addSubview:_showBlurImageView]; } return self; } @end
就是这么简单:)