2015-03-28

开源项目

开源项目:MMParallaxCell

前言

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

timeline

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

parallax

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

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

介绍

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

建议使用cocoapod安装

1	pod 'MMParallaxCell'

使用方式也很简单

- (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进行观察使得整个代码很简洁易用

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

里脊串的开发随笔

途有境而观无垠

开源项目:MMParallaxCell

前言

介绍

原理

小结