本帖最后由 代码买卖 于 2016-7-28 01:21 编辑

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

iOS视觉差Parallax效果简析 1

iOS视觉差Parallax效果简析 - 敏捷大拇指 - iOS视觉差Parallax效果简析 1

FJSParallax

我们来简单阐述下,所谓视距差如此高逼格的效果的本质和构成,也就是说如何会出现这样的效果。

1、普通的滚动列表大家一定都会写,这时候图片的大小和我们cell的大小完全一致,不会发生滚动。

2、想要出现滚动,首先图片的上下都要超出你的cell,也就是说比你的cell要高;但是如果高了,不就会图片重叠么?

iOS视觉差Parallax效果简析 2

iOS视觉差Parallax效果简析 - 敏捷大拇指 - iOS视觉差Parallax效果简析 2

MarkMan

3、设置cell的self.clipsToBounds = YES;使得超出cell的视图都无法显示,被截取掉。这样看起来图片就和cell一样大,然而却并未展示完全。

4、根据scrollview中每个cell的中心点偏移量改变变化,来改变图片的中心点的位置,向上或者向下。如果想要简单的效果,那么不需要复杂的计算,只要保证图片移动上下不超过我们设定的偏移量途中为63px就可以。

5、提供一种思路,图片中心点的移动范围为:0 ~ 屏幕高度(如果你Navi不透明,你可以考虑减去64或者带tabBar减去49,个人觉得这个不需要过于精准)。

图片中心点移动,-kCenterOffset ~ kCenterOffset。

效果:

1)如果图片中心点刚刚进入屏幕,也就是说最底下的图片出现一半了的时候,可以看到图片的上面全部图片。

iOS视觉差Parallax效果简析 3

iOS视觉差Parallax效果简析 - 敏捷大拇指 - iOS视觉差Parallax效果简析 3


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

iOS视觉差Parallax效果简析 4

iOS视觉差Parallax效果简析 - 敏捷大拇指 - iOS视觉差Parallax效果简析 4


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

iOS视觉差Parallax效果简析 5

iOS视觉差Parallax效果简析 - 敏捷大拇指 - iOS视觉差Parallax效果简析 5


可以得出公式:

[Swift] 纯文本查看 复制代码
CGFloat centerOffSetY = (2 kCenterOffset / ScreenHeight) cellOffSetY - kCenterOffset;


ScreenHeight:屏幕高度
cellOffSetY:图片中心点的相对于window的位置

6、最后就是什么时候触发,怎么找到哪些cell需要触发。

在UIViewControlelr中,实现scrollview的delegate的scrollViewDidScroll方法,一旦scrollview滑动就会触发这个方法,在这个方法中实时的传递偏移量给对应的cell,让它改变imageView的中心点位置。

通过collectionView的[self.collectionView visibleCells]方法,可以获取到当前屏幕上显示的cell的数组,遍历数组,进行传递偏移量。

[Swift] 纯文本查看 复制代码
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,有兴趣的小伙伴也可以去查看咯。




相关内容

iOS视觉差Parallax效果简析

模仿IMDb和格瓦拉的图片集混合排布展示效果




作者:BestJoker