iOS视觉差Parallax效果简析
何为视觉差，当初找效果的时候,也不知道如何搜索，后来知道了视差Parallax这个词，我这里写的效果是，在页面滚动的时候，每个cell中的图片也会产生位置上的变化，给人一种视觉插得感觉.废话不多说，先上一个效果图。
我们来简单阐述下,所谓视距差如此高逼格的效果的本质和构成,也就是说如何会出现这样的效果
1.普通的滚动列表大家一定都会写.这时候图片的大小和我们cell的大小完全一致.不会发生滚动.
2.想要出现滚动,首先图片的上下都要超出你的cell,也就是说比你的cell要高.但是如果高了,不就会图片重叠么?
3.设置cell的self.clipsToBounds = YES;使得超出cell的视图都无法显示,被截取掉.这样看起来图片就和cell一样大,然而却并未展示完全.
4.根据scrollview中每个cell的中心点偏移量改变变化,来改变图片的中心点的位置,向上或者向下.如果想要简单的效果,那么不需要复杂的计算,只要保证图片移动上下不超过我们设定的偏移量途中为63px就可以.
5.提供一种思路,图片中心点的移动范围为: 0 ~ 屏幕高度(如果你Navi不透明,你可以考虑减去64或者带tabBar减去49,个人觉得这个不需要过于精准),
图片中心点移动,-kCenterOffset ~ kCenterOffset.
效果:
1)如果图片中心点刚刚进入屏幕,也就是说最底下的图片出现一半了的时候,可以看到图片的上面全部图片.
2)图片中心点移动到屏幕中心的时候,图片刚好展示中间部分.
3)图片中心点移动到屏幕最上面,也就是说最上面图片一半从屏幕消失的时候,你可以看到他的下面全部图片.
可以得出公式:
CGFloat centerOffSetY = (2kCenterOffset / 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,有兴趣的小伙伴也可以去查看咯。
正文到此结束
热门推荐
相关文章
近期评论
-
文章和留言都翻到11页了 没有OOM
-
-
朋友，翻页到11页，及以后，会出现OOM，无法访问
-
-
搞个gitee的项目
-
-
版本号是多少，你可以下载哪个代码仓库，jdk选1.8 直接跑就行
-
-
-
Loading...
![[HBLOG]公众号](https://www.liuhaihua.cn/img/qrcode_gzh.jpg)
