首先欣赏下demo的效果图
大家可以到我的github下载代码，自己跑一下效果会更好哟(__)
parallax.gif
我们追求的视差效果
- 当我们的cell滚动到屏幕中间的时候，所展示的图片也应该刚好处于中心
- 当一个cell从底部滚动到顶部的过程，cell中的图片位置应该从偏高滚动偏低（偏高、偏低是针对图片自己来说的）
如何去实现
既然我们要随着tableView的滚动而更新cell中图片的位置，必然会使用到tableView的contentOffset,然后为了性能着想，我们更新图片位置的cell不应该是全部，而应该是当前屏幕中的cell，所以又想到了tableView的visibleCells属性
Just do it！！！
为了方便移植使用，我创建了基类cell ParallaxCell,然后新建一个cell继承于它就可以使用视差化子视图的特性了；
首先看一下ParallaxCell.h文件
//初始化cell的时候记得先用注册哟！！！且仅针对cell的高度是一样的cell
@interface ParallaxCell : UITableViewCell
/**
* 重置视差化状态，因为cell的重用机制，重用之后要刷新状态
*/
- (void)resetParallaxState;
/**
* 设置可视差化的子视图，以及centerY上偏移的值和centerY下偏移的值
*
* @param view 允许被可视差化的视图
* @param minNum centerY上偏移的值
* @param maxNum centerY下偏移的值
*/
- (void)parallaxWithView:(UIView *)view offsetUp:(CGFloat)offsetUp offsetDown:(CGFloat)offsetDown;
/**
* 通过传入scrollview就更可以根据滚动的情况，更新之前需要视差化的视图的位置
*
* @param scrollView scrollView
*/
- (void)updateViewFrameWithScrollView:(UIScrollView *)scrollView;
再看一下ParallaxCell.m文件
static NSString *const kParallaxView = @"kParallaxView";
static NSString *const kParallaxOriginalCenterY = @"kParallaxOriginalCenterY";
static NSString *const kParallaxOffsetUp = @"kParallaxOffsetUp";
static NSString *const kParallaxOffsetDown = @"kParallaxOffsetDown";
@interface ParallaxCell ()
@property (nonatomic, strong) NSMutableArray *originalCenterYArray;//用于记录视差化视图的原始中心Y值
@property (nonatomic, strong) NSMutableArray *parallaxViewArray;//记录视差化的视图
@property (nonatomic, assign) BOOL hasInited;//为了应付重用，用于只记录alloc出来的，重用出来的需要重置状态
@end
@implementation ParallaxCell
- (void)resetParallaxState
{
self.parallaxViewArray = [NSMutableArray array];
}
- (void)parallaxWithView:(UIView *)view offsetUp:(CGFloat)offsetUp offsetDown:(CGFloat)offsetDown
{
if (!self.hasInited) {
if (!self.originalCenterYArray) {
self.originalCenterYArray = [NSMutableArray array];
}
[self.originalCenterYArray addObject:@(view.center.y)];
}
NSDictionary *dict = @{kParallaxView : view,
kParallaxOriginalCenterY : self.originalCenterYArray[self.parallaxViewArray.count],
kParallaxOffsetUp : @(offsetUp),
kParallaxOffsetDown : @(offsetDown)};
[self.parallaxViewArray addObject:dict];
}
- (void)updateViewFrameWithScrollView:(UIScrollView *)scrollView
{
self.hasInited = YES;
//（cell的origin.y 加上 一个cell的高度 减去 当前滚动的偏移Y值 ）除以 （屏幕的高度 加上 一个cell的高度）这个下面有画图解释
CGFloat percent = (self.frame.origin.y + self.frame.size.height - scrollView.contentOffset.y)/([UIScreen mainScreen].bounds.size.height+self.frame.size.height);
[self updateViewFrameWithPercent:percent];
}
- (void)updateViewFrameWithPercent:(CGFloat)percent
{
for (NSInteger index = 0; index < self.parallaxViewArray.count; index ++) {
NSDictionary *dataDict = self.parallaxViewArray[index];
UIView *view = dataDict[kParallaxView];
CGFloat originalCenterY = [dataDict[kParallaxOriginalCenterY] floatValue];
CGFloat offsetUp = [dataDict[kParallaxOffsetUp] floatValue];
CGFloat offsetDown = [dataDict[kParallaxOffsetDown] floatValue];
view.center = CGPointMake(view.center.x, [self interpolateFrom:originalCenterY - offsetUp to:originalCenterY + offsetDown percent:percent]);
}
}
/**
* 插值计算（线性），设置一个值的起始值与结束值，然后根据传入的百分比返回当前对应的值
*
* @param from 起始值
* @param to 结束值
* @param percent 百分比
*
* @return 当前值
*/
- (CGFloat)interpolateFrom:(CGFloat)from to:(CGFloat)to percent:(CGFloat)percent
{
if (percent > 1) {
return to;
}
if (percent < 0) {
return from;
}
return (to - from)*percent + from;
}
@end
最需要注意的地方：
- 就是cell 的重用机制，当cell从重用队列取出cell的时候，这个时候它的状态还是之前cell的状态，比如我们之前对它图片的位置进行的修改也保留了下来，如果我们重用之后不进行重置，就会以之前的状态进行处理，这当然不是我们想要的；
- 然后又因为我使用
- (void)parallaxWithView:(UIView *)view offsetUp:(CGFloat)offsetUp offsetDown:为需要视差化的控件，逐一添加，而不是一次性添加所有需要视差化的控件，所以内部不好判断时机去重置cell的状态，所以我就添加了一个- (void)resetParallaxState方法去重置； - 然后就是percent的计算原理，如下图所示：
QQ20151214-1.png
cell的位置相对于视差化范围height的percent ，和cell中视差化视图的位置相对于移动范围的percent是相同的。比如说最上面即将离开屏幕cell在视差化范围的percent接近于0，那么cell中的图片也就处于可移动范围中最偏下的位置；同理，最下面即将进入屏幕cell在视差化范围percent接近于1，那么cell中图片也就处于可移动范围中最偏上的位置。
自定义cell的使用
自定义一个cell继承于ParallaxCell,并且把需要可视差化的控件暴露在.h文件，这里代码需要注意布局，如果用masonry代码约束，或者xib约束，可能出现异常；然后就是cell的真实高度和宽度获取，在初始化的时候是获取不到的，所以布局的时候使用[UIScreen mainScreen].bounds.size.width来获取宽度，高度就类方法+ (CGFloat)getHeight来获取；其实我想说的是，如果你用ParallaxCell来实现视差化，如果出现异常，麻烦看看自定义cell的布局；
ViewController中的使用
-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
CustomScrollCell *cell = [tableView dequeueReusableCellWithIdentifier:@"CustomScrollCell" forIndexPath:indexPath];
[cell resetParallaxState];
cell.headerImageView.image = [UIImage imageNamed:[self.imageNameArray objectAtIndex:indexPath.row]];
[cell parallaxWithView:cell.headerImageView offsetUp:50 offsetDown:50];
[cell parallaxWithView:cell.nameLabel offsetUp:10 offsetDown:10];
[cell updateViewFrameWithScrollView:tableView];
return cell;
}
- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
for (CustomScrollCell *cell in self.tableView.visibleCells) {
[cell updateViewFrameWithScrollView:scrollView];
}
}
注意调用方法顺序：
- 第一要先调用
[cell resetParallaxState]; - 第二调用
[cell parallaxWithView:cell.headerImageView offsetUp:50 offsetDown:50]; - 第三调用
[cell updateViewFrameWithScrollView:tableView]; - 在
cellForRow和scrollViewDidScroll方法里面都要调用[cell updateViewFrameWithScrollView:scrollView];
写在最后
自己参考过两个demo，代码质量与实现方法有高低之分；而且别人的代码总有取巧的方法，如果你不能完全明白作者的意图，可能会思考一段时间才会想通；所以你觉得不错的，多花点时间耐心的看下去总会懂的；
第一个参考DiceTableViewCell;这个有点low，不过至少实现了一些基本效果但是问题很多，可以喵一眼；
第二个参考MJParallaxCollectionView;我的思路大体和它相同，其中有一些取巧的地方需要自己甄别一下；但是我觉得它没有进行封装，所以进行了大量优化；
最最后，如果描述中出现错误，抑或实现思路有问题，麻烦各位大神多多指正！！！
