iOS视觉差Parallax效果简析

何为视觉差,当初找效果的时候,也不知道如何搜索,后来知道了视差Parallax这个词,我这里写的效果是,在页面滚动的时候,每个cell中的图片也会产生位置上的变化,给人一种视觉差得感觉.废话不多说,先上一个效果图.

 

FJSParallax.gif

我们来简单阐述下,所谓视距差如此高逼格的效果的本质和构成,也就是说如何会出现这样的效果.
1.普通的滚动列表大家一定都会写.这时候图片的大小和我们cell的大小完全一致.不会发生滚动.
2.想要出现滚动,首先图片的上下都要超出你的cell,也就是说比你的cell要高.但是如果高了,不就会图片重叠么?

 

屏幕快照 2016-06-24 下午5.54.44_MarkMan.png

3.设置cell的self.clipsToBounds = YES;使得超出cell的视图都无法显示,被截取掉.这样看起来图片就和cell一样大,然而却并未展示完全.
4.根据scrollview中每个cell的中心点偏移量改变变化,来改变图片的中心点的位置,向上或者向下.如果想要简单的效果,那么不需要复杂的计算,只要保证图片移动上下不超过我们设定的偏移量途中为63px就可以.
5.提供一种思路,图片中心点的移动范围为: 0 ~ 屏幕高度(如果你Navi不透明,你可以考虑减去64或者带tabBar减去49,个人觉得这个不需要过于精准),
图片中心点移动,-kCenterOffset ~ kCenterOffset.
效果:
1)如果图片中心点刚刚进入屏幕,也就是说最底下的图片出现一半了的时候,可以看到图片的上面全部图片.

 

屏幕快照 2016-06-24 下午6.23.27.png

2)图片中心点移动到屏幕中心的时候,图片刚好展示中间部分.

 

屏幕快照 2016-06-24 下午6.25.48.png

3)图片中心点移动到屏幕最上面,也就是说最上面图片一半从屏幕消失的时候,你可以看到他的下面全部图片.

 

屏幕快照 2016-06-24 下午6.25.15.png

可以得出公式:
CGFloat centerOffSetY = (2 * kCenterOffset / ScreenHeight) * cellOffSetY - kCenterOffset;
ScreenHeight:屏幕高度 cellOffSetY:图片中心点的相对于window的位置.
6.最后就是什么时候触发,怎么找到哪些cell需要触发.
在UIViewControlelr中,实现scrollview的delegate的scrollViewDidScroll方法,一旦scrollview滑动就会触发这个方法,在这个方法中实时的传递偏移量给对应的cell,让它改变imageView的中心点位置.
通过collectionView的[self.collectionView visibleCells]方法,可以获取到当前屏幕上显示的cell的数组,遍历数组,进行传递偏移量.
for (FJSParallaxCollectionViewCell * cell in [self.collectionView visibleCells]) {
cell.cellOffSetY = [cell convertPoint:CGPointMake(cell.bounds.size.width * 0.5, cell.bounds.size.height * 0.5) toView:self.view].y;
}

到这里位置,视觉差的主要思想都已经知道了,对于如何去偏移,大家可以根据大家的思想进行发挥.
附上github地址,看到的小伙伴,请不要吝啬你们的星星,这将鼓励我继续努力的写文章,在这里先谢过啦.
https://github.com/BestJoker/FJSParallaxCollectionView.git
github中还有很多Demo,有兴趣的小伙伴也可以去查看咯.

作者：BestJoker
链接：https://www.jianshu.com/p/792bd33e5ddd
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。