使用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就是这么简单:)
