视差化滚动cell

首先欣赏下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;我的思路大体和它相同，其中有一些取巧的地方需要自己甄别一下；但是我觉得它没有进行封装，所以进行了大量优化；
最最后，如果描述中出现错误，抑或实现思路有问题，麻烦各位大神多多指正！！！