iOS新浪新闻首页卡片滚动特效实现浅谈

Leader非常中意这个特效,说要在我们app中使用,问我能不能实现,我一看这个特效,卧槽,涉及了好多技术点,实现难度很大。如果是自己做特效还好,模仿别人的特效,做的粗糙没什么,如果要做得好,就得考虑好多细节。身为男人,怎么能说不行,自己给自己安排时间,偷偷搞,经过了几天的艰苦奋战,终于完成了,开森。

1、中间的滚动视图是一块一块移动的,停止时距离中间最近的卡片会自动滑动到中间,居中对齐。

2、中间的滚动视图在滑动的时候发现卡片是叠在一起的,中间的在上层,其他部分在下层,根据距离中间位置的远近来区别上下层

3、中间的滚动视图在滑动的时候发现卡片大小不一致,中间的最大,越靠近边框越小。

4、中间的滚动视图在滑动的时候发现滑动的距离和卡片移动的距离并不是成正比,而是按照不断变化的加速度移动的。

7、上下滑动表格时,中间的滚动视图要跟着一起滑动,上滑时向左移动,下滑时向右移动。

8、左右晃动手机时,中间的滚动视图要跟着一起滑动,向左晃动时卡片向左移动,向右晃动时卡片向右移动。

完成这个特效之前,首先是要选择实现工具,实现工具的选择很重要,相当于方向,方向选对了,才能使上大力气。

第一种,使用自定义滚动视图,亲自去Github上面找了不少关于自定义滚动视图的demo,觉得难度不是一般的难,而是二班的难呐,想着新浪的iOS开发水平应该也没那么强,肯定不是这种方案,就Pass了第一种。

那么看下第二种,使用UIScrollView,苹果自己弄的UIScrollView,可以分页是可以分页,但是只能整个视图分页,无法做到区域分页,看了不少的Demo,实现效果也差强人意,无奈Pass了第二种。

那么第三种呢?使用UICollectionView,在网上找到了不少可以提供灵感的Demo,感觉上是可行的,然后伟哥给了类似的Demo告诉我这种方案的可行性。可以的,那就用这种方式搞起。

问题1:中间的滚动视图是一块一块移动的,停止时距离中间最近的卡片会自动滑动到中间,居中对齐。

UICollectionView有个布局类叫做UICollectionViewFlowLayout,可以在里面实现卡片效果,通过计算每个可见Cell到中间位置,来计算出偏移量,得出CollectionView最终停留的位置,实现自动滑动到中间,居中对齐的效果。实现以下方法:

问题2:中间的滚动视图在滑动的时候发现卡片是叠在一起的,中间的在上层,其他部分在下层,根据距离中间位置的远近来区别上下层。

看UICollectionViewFlowLayout布局文件,通过计算可见Cell到中心点位置,来确定Cell的位置,达到叠加的效果。上下层的概念则是通过z轴的不同来实现,搞过游戏的朋友可能会更清楚一些,三维坐标系中有x轴,y轴,z轴,通过z轴确定视图的上下层次。实现以下方法:

问题3:中间的滚动视图在滑动的时候发现卡片大小不一致,中间的最大,越靠近边框越小。

在UICollectionViewFlowLayout布局文件中解决,设置好垂直缩放系数,根据距离的远近进行放大处理,距离中间的放到最大。

问题4:中间的滚动视图在滑动的时候发现滑动的距离和卡片移动的距离并不是成正比,而是按照不断变化的加速度移动的。

在UICollectionViewFlowLayout布局文件中解决,根据可见Cell到中心的不同位置设置移动距离,不同的距离使用不同的加速度。

在UICollectionViewFlowLayout布局文件中解决,通过计算边缘距离,来动态改变透明度。

关于循环滚动方案,网上的说法层出不穷。我以前也搞过循环滚动,中间呈现3个,使用5个视图进行循环滚动。但这种方案计算比较复杂,功力不够的小伙伴还是不要尝试的好。还有一种方案是可以让它滚动到最后一格的时候,跳转到第一格,这种方案有点不是很流畅。最终我采用了中间定位法实现了循环滚动,需要使用下面的方法:

问题7:上下滑动表格时,中间的滚动视图要跟着一起滑动,上滑时向左移动,下滑时向右移动。

问题8:左右晃动手机时,中间的滚动视图要跟着一起滑动,向左晃动时卡片向左移动,向右晃动时卡片向右移动。

晃动手机,涉及到硬件支持。iPhone手机内配置了各种传感器,其中一个就是重力感应。通过了解重力感应,知道了加速器,使用加速器来控制晃动偏移量,发现效果不好,抖动特别厉害,在网上也没有特别好的例子说明。那么改用陀螺仪,苹果的陀螺仪做的非常精致,效果也很好,非常稳定,但是又发现了新问题,就是运动停止不了。最终在加速器和陀螺仪的配合之下,终于完美的解决了问题。

涉及到条件判断,不仅需要在表格的UIScrollView代理方法做控制,还要在UICollection代理方法做控制,保证效果互不干扰。

如果是按照新浪新闻的还简单一点,但是问题是,我们的产品总是会搞点花样,比如修改透明度,修改圆角呀,等等,所以实现的难度就增加了不少。总之,兵来将挡水来土掩,完成就是了

尾记:有人说服务端比客户端强,并非如此。闻道有先后,术业有专攻,不同的人,Level也不同。做接口考虑大数据,考虑数据库结构,查询优化等等,这些说白了无非还是工具、数学、逻辑思维、数据结构、算法,跟客户端差不多。客户端也要考虑代码框架设计、网络框架设计、数据库设计、特效空间数学计算、逻辑处理、数据结构、算法等等。客户端做的强的人,转到服务端也是分分钟搞定的事。

Author: admin

发表回复

您的电子邮箱地址不会被公开。