iOS视觉差Parallax效果简析

分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友 微信微信
查看查看144 回复回复6 收藏收藏 分享淘帖 转播转播 分享分享 微信
查看: 144|回复: 6
收起左侧

iOS视觉差Parallax效果简析

[复制链接]
代码买卖 发表于 2016-7-28 01:15:35 | 显示全部楼层 |阅读模式
快来登录
获取最新的苹果动态资讯
收藏热门的iOS等技术干货
拷贝下载Swift Demo源代码
本帖最后由 代码买卖 于 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

都看到这里了,就把这篇资料推荐给您的好朋友吧,让他们也感受一下。

回帖是一种美德,也是对楼主发帖的尊重和支持。

*声明:敏捷大拇指是全球最大的Swift开发者社区、苹果粉丝家园、智能移动门户,所载内容仅限于传递更多最新信息,并不意味赞同其观点或证实其描述;内容仅供参考,并非绝对正确的建议。本站不对上述信息的真实性、合法性、完整性做出保证;转载请注明来源并加上本站链接,敏捷大拇指将保留所有法律权益。如有疑问或建议,邮件至marketing@swifthumb.com

*联系:微信公众平台:“swifthumb” / 腾讯微博:@swifthumb / 新浪微博:@swifthumb / 官方QQ一群:343549891(满) / 官方QQ二群:245285613 ,需要报上用户名才会被同意进群,请先注册敏捷大拇指

嗯,不错!期待更多好内容,支持一把:
支持敏捷大拇指,用支付宝支付10.24元 支持敏捷大拇指,用微信支付10.24元

评分

参与人数 1金钱 +10 收起 理由
Anewczs + 10 推送上首页了~分享到朋友圈微博QQ空间吧~.

查看全部评分

tuorsrui 发表于 2016-7-28 09:45:42 | 显示全部楼层
想法不错额,我去试试看
数学家 发表于 2016-7-28 14:47:52 | 显示全部楼层
能否提炼成库文件?
救世主 发表于 2016-7-30 01:40:39 | 显示全部楼层
这种视差是什么时候开始流行起来的?
我是90后 发表于 2016-8-5 07:33:58 | 显示全部楼层
tuorsrui 发表于 2016-7-28 09:45
想法不错额,我去试试看

试验的怎么样?
tuorsrui 发表于 2016-8-9 09:06:09 | 显示全部楼层

效果已实现,很不错!
firefighter 发表于 2016-8-9 15:02:11 | 显示全部楼层
tuorsrui 发表于 2016-8-9 09:06
效果已实现,很不错!

求整体项目代码
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

做任务,领红包。
我要发帖

分享扩散

都看到这里了,就把这资料推荐给您的好朋友吧,让他们也感受一下。
您的每一位朋友访问此永久链接后,您都将获得相应的金钱积分奖励
热门推荐

合作伙伴

Swift小苹果

  • 北京治世天下科技有限公司
  • ©2014-2016 敏捷大拇指
  • 京ICP备14029482号
  • Powered by Discuz! X3.1 Licensed
  • swifthumb Wechat Code
  •   
快速回复 返回顶部 返回列表