使用UITableView实现图片视差效果
视差效果如下:
原理:
根据偏移量计算不同的移动速度,so easy!
//// RootTableViewController.h// TableView//// Copyright (c) 2014年 Y.X. All rights reserved.//#import@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 ()@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@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@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 ()@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@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 就是这么简单:)