滑动tableView表单时cell图片的视差效果实现分析

最近在朋友的项目中看到了一个效果，在一个列表中，cell均显示为一张大图，在滑动tableView时，cell上的图片也跟着滑动，类似于一种有视差的视窗效果，截图示例如下：

第一张图（注意圣诞老人的位置）：

第二张图（注意圣诞老人的位置）：

第三张图（注意圣诞老人的位置）：

以上是tableView向上滑动时，不同位置对应的cell背景图三种不同的显示位置，我们发现再向上滑动tableView的过程中，cell的背景图也跟着向上显示的更多了（向下的效果也是如此）；

一开始看到时觉得这个效果很漂亮，比较适合于大图展示的表单中使用，但还是没想明白，“近水楼台”，向朋友请教了一下，仅需要这样一段代码：

看了半天，终于是想明白了，下面就解释一下原理，方便解释我画了一张图：

左边这张图作为一个tableView，其中阴影部分显示为一个cell；

右边这张图是一个cell，其中横向的矩形区域是cell的size，竖向的矩形区域是图片的显示区域，可以看出该图片的上下约束均为负值；

我们设定参数如下：

1）tableView的显示区域高度：L；

2）tableView显示区域高度的中心点P_Center 距离 当前阴影cell的上边距距离UpLine（注意这里的cell的frame是相对于tableView的父视图的，且要求该父视图的纵向的高度同tableView的高度）：l；

3）cell上图片上约束值H1和下约束值H2的和（H1和H2只是初始值，在cell加载之后的实际显示过程中，可以通过cell的frame来控制显示的位置变化，即H1和H2会不断变化）：H；

4）cell上图片的中心点image_center距离cell中心点p_center的距离：h；

这样就有了上图中下边的关系，从而得到了一个线性关系；

那么再让我们回来看看这段代码：（有几点说明：该段代码是cell的实例方法，第一个参数是cell所在的tableView，第二个参数是tableView所在的父视图，要求同上）

1）第一句代码我们转换了一下坐标，联合第二句代码我们求出了l，即distanceFromCenter；

2）第三句代码我们求出了H，即distance；

3）第四句代码就是上图中我们得出的线性关系，一个等比例的公式，move就是我们的h，l和h在计算过程中同符号；

4）之后的几句代码就是利用h这个偏移，重新修改图片的orgin.y的值，为了动态变化，该段代码需要在ViewController中的-(void)scrollViewDidScroll:(UIScrollView *)scrollView；代理方法中调用（一个for循环就行，当然，你很可能会用到这句代码NSArray * visibleCells = [tableView visibleCells];）；

这样就搞定了。

总结：一直以为写界面不就是一层一层往上放嘛，设置设置属性，分析了这段代码之后发现并非如此，界面的层次关系其实可以给我们很多发挥的空间，希望在控件的使用上多多进益吧。

特别感谢我的朋友，使这篇blog成为可能。