使用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:.f];
} #pragma mark - Table view data source - (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
{
// Return the number of sections.
return ;
} - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
// Return the number of rows in the section.
return ;
} - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
if (indexPath.row == )
{
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:.f];
} return cell;
}
} - (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
// 返回图片高度
if (indexPath.row == )
{
return [IMAGE scaleWithFixedWidth:.f].size.height;
} return ;
} - (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
// 防止出现bug
if (scrollView.contentOffset.y <= )
{
_showImageCell.layer.masksToBounds = NO;
}
else
{
_showImageCell.layer.masksToBounds = YES;
} // 计算偏移量
_showImageCell.showImageView.y \
= calculateSlope(, , , )*scrollView.contentOffset.y +
calculateConstant(, , , );
} 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:.f];
_rootBlurImage = [[IMAGE scaleWithFixedWidth:.f] grayScale];
} #pragma mark - Table view data source - (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
{
// Return the number of sections.
return ;
} - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
// Return the number of rows in the section.
return ;
} - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
if (indexPath.row == )
{
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:.f];
} return cell;
}
} - (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
// 返回图片高度
if (indexPath.row == )
{
return [IMAGE scaleWithFixedWidth:.f].size.height;
} return ;
} - (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
// 防止出现bug
if (scrollView.contentOffset.y <= )
{
_showImageCell.layer.masksToBounds = NO;
}
else
{
_showImageCell.layer.masksToBounds = YES;
} // 计算偏移量
_showImageCell.showImageView.y \
= calculateSlope(, , , )*scrollView.contentOffset.y +
calculateConstant(, , , ); // 计算偏移量
_showImageCell.showBlurImageView.y \
= calculateSlope(, , , )*scrollView.contentOffset.y +
calculateConstant(, , , ); // 计算偏移量
_showImageCell.showBlurImageView.alpha \
= calculateSlope(, , , )*scrollView.contentOffset.y +
calculateConstant(, , , );
} 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 = .f;
[self addSubview:_showBlurImageView];
}
return self;
} @end
就是这么简单:)