22- 仿『即刻』首页滚动效果

2016-11-23 本文已影响1421人春田花花幼儿园

22- 仿『即刻』首页滚动效果

前言

时间真快，两个月多都没有写东西了。这期间除了忙工作的事情，还有就是自己东搞搞西搞搞的。打算先从宽拓展路子，所以一直也在看安卓的东西。但是iOS老本行不能忘啊~

『即刻』这个APP是我，想必也是大家十分喜欢的。在现在这个一言不合就开喷的网络环境里，微博早已经沦陷了，『即刻』就像是一股清流啊，但是现在即刻的评论区也渐渐的有评论区的“氛围”，不知道最后会不会沦陷到和微博一样。扯远了~~~
优秀的应用总是值得我们去模仿，即刻的首页的推荐主题内容滚动效果和个人信息页面的头像拖动效果，还有视频播放等效果都值得我们去模仿和学习。前段时间看到的巴巴巴巴巴巴掌的模仿首页滚动效果的安卓代码，并且分析实现的原理，于是便想着用iOS的代码也写一下。
上边提到的文章地址:巴巴巴巴巴巴掌的《手摸手教你写炫酷控件》

实现效果

实现原理

实现原理其实真的没什么可以讲的,真的是太简单了.大家看一下上边的巴巴巴巴巴巴掌那篇文章,或者看下我从巴巴巴巴巴巴掌那里扣来的图,就一目了然了.

扩展

其实提不到扩展,只是在巴巴巴巴巴巴掌安卓实现效果的基础上,更加细化了一些功能.iOS这边,本着拿来即用,接近『即刻』原生的原则,实现的功能如下:

正常滚动效果
文字区域的叠影显示
数据驱动显示
图片显示内存优化

实现说明

执行动画效果是直接用的UIView自带的动画方法.
我是图片滚动再写到文字滚动，然后再包含到外边的动态数据传入.所以整个JiKeScrollView的项目结构如下，每个文件都是一个单独的控件，都可以单独提取出来使用。

正常滚动效果

这部分和实现原理差不多,没什么说的.
需要注意的一个地方是:
描述文字总共占据两行,如果当前显示的文字没有占满两行,只占了第一行的时候,这行文字也是在第一行显示的,而我们UIlabel的默认显示位置是居中的.
基本有三种可以解决这个问题的方法,我用的是加"\n"的方式

文字区域的叠影显示

我们仔细看『即刻』的显示效果的话,会发现文字滚动时候,有这么一个细节:

描述文字总共占据两行,假如当前的图片描述文字只占据了第一行的时候,那么下一个要显示文字滚动下来的时候,当前显示的文字是先做几毫米的停留的.
这样就出现了下一个显示文字的动画效果执行了一半（即如果下一行是两行文字的话，当完整显示处第一行文字的时候）,当前行的文字透明度降低,才开始向下滚动,直到离开所属的View区域,产生一种叠加的效果

上边的谍影实现效果也很简单，我们只需要把当前文字的开始执行动画效果的时间延迟值设置为下一行动画执行从开始到结束时间的1/2.

这里还有一点需要注意的是:

我把当前行和下一行显示的动画执行效果分开了,但是动画整体执行时间是以下一行为准的.也就是说当前行的执行时间(延迟时间+动画从开始到结束的时间)必须和下一行动画执行时间(不包括它的延迟时间)相同.

数据驱动显示

这个名字有点大了,其实就是就考虑到我们在实际使用时候怎么方便一点.我这里的逻辑是:

先传入初始化的信息,代码如下:

_myJikeScrollView.myFirstShowImageLinkArray = @[
                                                @[@"11",@"12"],
                                                @[@"13",@"14"],
                                                @[@"15",@"16"]
                                                ];
_myJikeScrollView.myFirstShowLabelDesArray = @[
                                               @[@"左边初始描述文字1",@"左边初始描述文字2"],
                                               @[@"中间初始描述文字3",@"中间初始描述文字4"],
                                               @[@"右边初始描述文字5",@"右边初始描述文字6"]
                                               ];

如果想要执行滚动的时候,我们只需要传入下一组数据就行了,如下代码:

_myJikeScrollView.myNextShowImageLinkArray = self.tempImageLinkDataArray[dataShowIndex];
_myJikeScrollView.myNextShowLabelDesArray = self.tempImageDesDataArray[dataShowIndex];

其实我们仔细观察『即刻』点击'换一换',左边是有个圆形指针再转的,我想这个时候是在请求下下次我们要显示的数据.这样便可以保持每次次点击'换一换'之后能够马上有数据滚动.

图片显示内存优化

这个是个问题,在快要写完的时候,我发现程序开跑之后程序吃紧的厉害.这么一个只作为控件显示的部分,跑起来就到了38M多. 之前一段时间就看到业界前辈们有关于图片优化处理,集中发布过各种,借此机会,正好优化下.

其他注意

怎么知道三个部分动画最终执行完毕的呢? 其实我没有可以的增加总体结束的标识.因为我前边说过，我是从小到大做的，在做单个UIImageView和UILabel展示的时候，就考虑到了如果单个控件连续点击的执行问题. 肯定要保证当前执行的动画完成之后再执行下一个动画. 增加状态标识，如果动画正在执行，那么按钮的点击事件是不响应的.