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

本文详细介绍了如何在iOS应用中实现新浪新闻首页的卡片滚动特效,包括手势控制、视图叠加、卡片大小变化等难点,通过UICollectionViewFlowLayout进行布局设计,结合UIScrollView和陀螺仪实现不同操作下的平滑滚动效果。
摘要由CSDN通过智能技术生成

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


能够完成这个特效,感谢她,感谢他,感谢一如既往支持我的人。


进入正题


先看下新浪的特效(版本 v6.6.0)


先分析一下这个滚动特效,有3种方式控制滚动:


1、1个是手指上下滑动整个表格,中间的滚动视图会跟着一起动。

2、1个是左右滑动中间的滚动视图,滚动视图会快速滑动。

3、1个是左右晃动手机,根据角度不同,滚动视图跟着一起动。


需要解决很多问题:


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

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

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

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

5、中间的滚动视图滑到左右边缘时视图透明度改变。

6、循环滚动方案的实现

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

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

9、需要保证刚才提到的3种控制方式互不干扰。

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值