iOS菜鸟部落动画设计学习iOS开发网络第三方库

视差化滚动cell

2015-12-14  本文已影响974人  开源者联盟

首先欣赏下demo的效果图

大家可以到我的github下载代码,自己跑一下效果会更好哟(__)

parallax.gif

我们追求的视差效果

如何去实现

既然我们要随着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

最需要注意的地方:

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];
}
}

注意调用方法顺序:

写在最后

自己参考过两个demo,代码质量与实现方法有高低之分;而且别人的代码总有取巧的方法,如果你不能完全明白作者的意图,可能会思考一段时间才会想通;所以你觉得不错的,多花点时间耐心的看下去总会懂的;
第一个参考DiceTableViewCell;这个有点low,不过至少实现了一些基本效果但是问题很多,可以喵一眼;
第二个参考MJParallaxCollectionView;我的思路大体和它相同,其中有一些取巧的地方需要自己甄别一下;但是我觉得它没有进行封装,所以进行了大量优化;
最最后,如果描述中出现错误,抑或实现思路有问题,麻烦各位大神多多指正!!!

上一篇下一篇

猜你喜欢

热点阅读