iOS下用一行代码实现tableview(collectionview)的parallax效果

时间：2014-08-02 12:51:23 阅读：231 评论：0 收藏：0 [点我收藏+]

标签：ios uiscrollview 一行代码 parallax效果

效果和https://github.com/jberlana/JBParallaxCell一样。实现cell的滚动视差。

原理很简单，就是一个等比公式

cell的图片位置／ cell图片可以滑动的总长＝ cell在table中的位置／ cell 可滑动总长

实现方法：

1》在cell的UIImageView上添加父视图UIView，clipsToBounds设置为yes，用来剪切UIImageView，为其限定大小。

2》在vc的

-(void)scrollViewDidScroll:(UIScrollView *)scrollView

中实时更新每个cell的图片位置。

代码如下

-(void)scrollViewDidScroll:(UIScrollView *)scrollView
{
    for(WELTableViewCell * cell in [self.tableView visibleCells])
    {
        cell.image.frame = CGRectOffset(cell.image.frame, 0, ((cell.image.frame.size.height - cell.imageFrameView.frame.size.height) * ((cell.frame.origin.y + cell.imageFrameView.frame.size.height - self.tableView.contentOffset.y) / (self.tableView.frame.size.height + cell.imageFrameView.frame.size.height * 2)) + cell.imageFrameView.frame.size.height - cell.image.frame.size.height) - cell.image.frame.origin.y);
    }
}

PS：确实是一行代码，哈哈。其实一行代码只是一个噱头，完全可以多写几行增加可读性。之所以写一行代码，是想表达这个效果其实蛮简单的。用算式算出偏移量，重设frame。

3》在tableView初次刷新完毕后，调用

[self scrollViewDidScroll:nil];

例如

-(void)viewDidAppear:(BOOL)animated

{

[super viewDidAppear:YES];

[self scrollViewDidScroll:nil];

}

最后，附上源代码demo（发帖不易，讨个积分，哈哈）

简单demo（附注释）

以上