开源项目:MMParallaxCell

前言


MMParallaxCell其实是个很简单的东西 首次使用是在最美创意里 起因是某次改版的时候 想把之前的timeline的展现调整一下

timeline

参考了很多APP的设计之后 把UI改成了现在的parallax这个样子

parallax

这次修改 对于我自己来说 还是满意的 对比一下有没有一种立刻高大上了的感觉呢 ヽ(✿゚▽゚)ノ

不过由于各种各样的原因 最美创意在很长一段时间内估计也不会更新了

介绍


MMParallaxCellUITableviewCell的子类 用于在UITableview中呈现滑动视差的一个效果 特点是简单易用 不同于同类型的其他项目 MMParallaxCell不需要在代码中做额外的操作 像普通的UITableviewCell使用就okay了

建议使用cocoapod安装

1
pod 'MMParallaxCell'

使用方式也很简单

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
static NSString* cellIdentifier = @"CellIdentifier";

//用MMParallaxCell代替UITableviewCell
MMParallaxCell* cell = [tableView dequeueReusableCellWithIdentifier:cellIdentifier];
if (cell == nil)
{
cell = [[MMParallaxCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:cellIdentifier];
}

//设置视差的image就行了
[cell.parallaxImage sd_setImageWithURL:[NSURL URLWithString:[NSString stringWithFormat:@"http://lorempixel.com/400/400/technics/%ld/",indexPath.row]]];

//你也可以根据你的需求来设置视差图的比例(视差图的高度/cell的高度)
cell.parallaxRatio = 1.2f;

return cell;
}

原理


我们通过一张模拟图来看一下滑动视差是怎么回事

滑动视差模拟

可以仔细看一下滑动到不同位置时 图片的差别 (尤其是张和第四张的差别)

再看看其内部是怎样的

滑动视差模拟

是的 其实就是在滑动的同时 移动图片的位置 造成一种视差的效果

那么稍微想一下 应该就可以发现 图片的位移量 其实是由以下几个值决定的

位移量依赖

其公式 大概是

1
parallaxOffset = (parrallaxHeight-cellHeight)*(scrollOffset/(cellHeight+tableHeight));

小结


基本的细节就介绍到这里 其实还有一些东西没有细讲 比如MMParallaxCell并没有使用接口形式对tableview的contentOffset进行监控(其他的同类型的代码基本都是在scrollViewDidScroll里对cell进行更新) 而是采用了KVO的形式对tableview进行观察 使得整个代码很简洁易用

具体的内容都在代码里 如果想知道可以抽几分钟看一下 :)