Leader非常中意这个特效,说要在我们app中使用,问我能不能实现,我一看这个特效,卧槽,涉及了好多技术点,实现难度很大。如果是自己做特效还好,模仿别人的特效,做的粗糙没什么,如果要做得好,就得考虑好多细节。身为男人,怎么能说不行,自己给自己安排时间,偷偷搞,经过了几天的艰苦奋战,终于完成了,开森。
能够完成这个特效,感谢她,感谢他,感谢一如既往支持我的人。
进入正题
先看下新浪的特效(版本 v6.6.0)
先分析一下这个滚动特效,有3种方式控制滚动:
1、1个是手指上下滑动整个表格,中间的滚动视图会跟着一起动。
2、1个是左右滑动中间的滚动视图,滚动视图会快速滑动。
3、1个是左右晃动手机,根据角度不同,滚动视图跟着一起动。
需要解决很多问题:
1、中间的滚动视图是一块一块移动的,停止时距离中间最近的卡片会自动滑动到中间,居中对齐。
2、中间的滚动视图在滑动的时候发现卡片是叠在一起的,中间的在上层,其他部分在下层,根据距离中间位置的远近来区别上下层。
3、中间的滚动视图在滑动的时候发现卡片大小不一致,中间的最大,越靠近边框越小。
4、中间的滚动视图在滑动的时候发现滑动的距离和卡片移动的距离并不是成正比,而是按照不断变化的加速度移动的。
5、中间的滚动视图滑到左右边缘时视图透明度改变。
6、循环滚动方案的实现
7、上下滑动表格时,中间的滚动视图要跟着一起滑动,上滑时向左移动,下滑时向右移动。
8、左右晃动手机时,中间的滚动视图要跟着一起滑动,向左晃动时卡片向左移动,向右晃动时卡片向右移动。
9、需要保证刚才提到的3种控制方式互不干扰。