仿『即刻』首页滚动效果

2022年01月16日 阅读数:2
这篇文章主要向大家介绍仿『即刻』首页滚动效果,主要内容包括基础应用、实用技巧、原理机制等方面,希望对大家有所帮助。

 




前言




时间真快,两个月多都没有写东西了。这期间除了忙工做的事情,还有就是本身东搞搞西搞搞的。打算先从宽拓展路子,因此一直也在看安卓的东西。 可是iOS老本行不能忘啊~ios


『即刻』这个APP是我,想必也是你们十分喜欢的。在如今这个一言不合就开喷的网络环境里,微博早已经沦陷了,『即刻』就像是一股清流啊,可是如今即刻的评论区也渐渐的有评论区的“氛围”,不知道最后会不会沦陷到和微博同样。 扯远了~~~网络


优秀的应用老是值得咱们去模仿,即刻的​​首页的推荐主题内容滚动效果​​​和​​我的信息页面的头像拖动效果​​​,还有​​视频播放​​等效果都值得咱们去模仿和学习。 前段时间看到的巴巴巴巴巴巴掌的模仿首页滚动效果的安卓代码,而且分析实现的原理,因而便想着用iOS的代码也写一下。ide



实现效果学习





仿『即刻』首页滚动效果_数据




实现原理




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


仿『即刻』首页滚动效果_滚动效果_02



扩展




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



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


实现说明




执行动画效果是直接用的UIView自带的动画方法.spa

我是图片滚动再写到文字滚动,而后再包含到外边的动态数据传入.因此整个​JiKeScrollView​的项目结构以下,每一个文件都是一个单独的控件,均可以单独提取出来使用。3d


仿『即刻』首页滚动效果_数据_03


正常滚动效果



这部分和实现原理差很少,没什么说的.指针

须要注意的一个地方是:code

描述文字总共占据两行,若是当前显示的文字没有占满两行,只占了第一行的时候,这行文字也是在第一行显示的,而咱们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展现的时候,就考虑到了若是单个控件连续点击的执行问题. 确定要保证当前执行的动画完成以后再执行下一个动画.  增长状态标识,若是动画正在执行,那么按钮的点击事件是不响应的.



Demo



由于完整代码有点多,因此Demo中分为了三部分,除了完整代码,还有是把基础组件单个使用的的​JiKeScrollImageViewVC​​和​JiKeScrollLabelVC​.

仿『即刻』首页滚动效果_滚动效果_04

JiKeScrollLabelVC


仿『即刻』首页滚动效果_ios_05





JiKeScrollImageViewVC






 

 





POPULAR ARTICLES

你们都在看

 ​

 ​




仿『即刻』首页滚动效果_数据_06