起因及需求:做过阅读器的朋友应该知道,一般的阅读器都会有仿真、平移等特效。最近赶上真空期,项目不忙,有点时间,于是想抓起来,总结点干货。

仿真翻页及平滑翻页的基本实现:

仿真翻页,使用系统自带的UIPageViewController可以轻松实现流畅的翻页效果,这里暂不详述,后面会专门做一期UIPageViewController实现中实现自定义手势翻页的专题。

平滑(或覆盖)翻页,有能力的可以自定义封装一个controller,用来抓取数据及回调事件,简单说一下实现步骤。

  1.controller中主要包含两控制器,一个正在显示的,另一个待显示的

  2.自定义tap及pan手势,实现相应的动画

  3.待显示的控制器由外界传入,tap动画及pan(交互)动画过程中及结束时可以向外界传出相应的状态

  4.动画结束后,记得将状态还原

(效果图暂且不附,免得影响主次)

进入正题,如何实现滚动翻页?

效果图先附一张

关于实现前的误区:

  1.章节内容如何无缝拼接?

    之前思维一直局限于仿真、平滑的设计思路,就是控制器中包含两控制器,一个当前显示、另一个待显示,然后通过切换数据的方式来实现前后翻页。其实滚屏也可以设计成这种,也就是把每章都分隔开来,滚到底部或顶部时加载另一章,然后显示新的内容即可。这样做能满足大致要求,但是达不到流畅的章节翻页效果。

  2.章节拼接后如何实现流畅的滚动?

    之前一直陷于一个思维误区,是搬数据还是搬视图?

    搬数据:scrollView中仅仅显示一个内容视图,每次切换章节,将新的内容替换,并默默改变scrollview的偏移量,形成无缝切章节的效果。具体来讲内容分上中下三块,快滑到顶部时,底部内容置空,加载上一章,加载出来后,重新拼接上中下内容,此时注意修改scrollView的偏移量;快滑到底部时,一样的处理方式。

    搬视图:scrollView中显示三个内容视图,内容视图中可嵌套别的视图,每次切换章节时,替换新内容,同样默默修改scrollView的偏移量,达成效果。

    这两种其实本质一样,都能达成效果。但是搬视图能显示类型不一样的视图,具有更好的扩展性。但是这两种方式都需要结合scrollView滑动的代理,做细致的处理,比较难以实现。

仔细看过的同学应该已经发现,搬视图的方式不就是一个CollectionView就搞定了吗???何必去定义多个视图,我直接写几个cell出来复用不就完事了吗?省的自己还得为内存做优化。并且章节由cell隔开也能做一些更细致的处理,比如估算页码等。

代码等我后期写个demo吧,因为目前直接在SVN分支上修改的,公司的代码,你懂的。

关于scrollview的无限滚动效果实现的更多相关文章

  1. (转)15个非常棒的jQuery无限滚动插件【瀑布流效果】

    原文地址:http://www.cnblogs.com/lyw0301/archive/2013/06/19/3145084.html 现在,最热门的网站分页趋势之一是jQuery的无限滚动(也即瀑布 ...

  2. 15个非常棒的jQuery无限滚动插件【瀑布流效果】

    现在,最热门的网站分页趋势之一是jQuery的无限滚动(也即瀑布流).如果你碰巧观察Pinterest的网站,如Facebook,Twitter和deviantART的,你会发现无限滚动的动作,当旧的 ...

  3. HTML5+CSS3制作无限滚动与文字跳动效果

    ㈠用HTML5+CSS3做无限滚动效果 ⑴逻辑分析 ⑵实践示例 前5张图片为所有图片显示区,假设总长度为1100px: 后面出现的五张图片为克隆区,只是将前面的图片拷贝了一份: 然后将前五张和后五张的 ...

  4. jquery实现无限滚动瀑布流实现原理

    现在类似于pinterest这类的表现效果很火,其实我比较中意的是他的布局效果,而不是那种瀑布流. 虽然我不是特别喜欢这种瀑布流的表现样式,但是还是写了几篇关于无限滚动瀑布流效果的文章,Infinit ...

  5. unity 背景无限循环滚动效果

    背景无限循环滚动效果如下示: 步骤如下: 导入背景图片后,设置图片的格式,如下图: 2.图片格式也可以设置是Texture格式,但是Wrap Mode 一定要是Repeat[重复发生]:然后记得App ...

  6. Unity3d—做一个年月日选择器(Scroll Rect拖动效果优化)— 无限滚动 + 锁定元素

    最近..... 废话不多说上效果图 用的是UGUI 我先说思路 通过判断元素的位置信息来改变Hierarchy的顺序 实现无限滚动 改变位置的同时也要不断的调整Content的位置防止乱跳 元素锁定就 ...

  7. js 实现图片无限横向滚动效果

    门户网站好多都有产品无线滚动展现的效果: 测试demo1 -- 非无缝滚动(可以看出来从头开始的效果): css样式如下: .box{ width: 1000px; border: 1px solid ...

  8. iOScollectionView广告无限滚动(Swift实现)

    今天公司里的实习生跑过来问我一般App上广告的无限滚动是怎么实现的,刚好很久没写博客了,就决定写下了,尽量帮助那些处于刚学iOS的程序猿. 做一个小demo,大概实现效果如下图所示: 基本实现思路: ...

  9. iOS开发——高级篇——图片轮播及其无限循环效果

    平时APP中的广告位.或者滚动的新闻图片等用到的就是图片轮播这种效果,实现方式主要有两种,一种是ScrollView+ImageView,另一种则是通过CollectionView,今天总结的是Scr ...

随机推荐

  1. Redis SWAPDB 命令背后做了什么

    Redis SWAPDB 命令背后做了什么 目录 Redis SWAPDB 命令背后做了什么 0x00 摘要 0x01 SWAPDB 基础 1.1 命令说明 1.2 演示 0x02 预先校验 0x03 ...

  2. 西门子 S7200 以太网模块连接力控组态方法

    产品简介:北京华科远创科技有限研发的远创智控ETH-YC模块,以太网通讯模块型号有MPI-ETH-YC01和PPI-ETH-YC01,适用于西门子S7-200/S7-300/S7-400.SMART ...

  3. Linux(CentOS7)下Nginx安装

    记录一下 Linux(CentOS7) 下 Nginx 安装过程 一.准备工作 版本说明: Linux版本:CentOS 7 64位 Nginx版本:nginx-1.20.0 1. 下载安装文件 采用 ...

  4. 通过CSS设计模式搭建自己系统的CSS架构

    theme: qklhk-chocolate 传统的CSS书写风格是随意命名,堆叠样式,造成了混乱不堪的结果,复杂页面的样式书写通常会出现几百行甚至上千行的代码,CSS设计模式在实际应用中的横空出世拯 ...

  5. node.js学习(5)读写文件(同步异步)

    1 导入文件系统库 # 同步的 读文件 写文件 # 异步 需要用异步处理耗时

  6. Git 快速控制

    Git 快速控制 聊聊学习 Git 那些事 现在回想起来,其实接触 Git 的时候是在大一的时候表哥带入门的.当时因为需要做一个项目,所以他教如何使用 Git 将写好的代码推送到 GitHub 上,然 ...

  7. 视频系列:RTX实时射线追踪(下)

    视频系列:RTX实时射线追踪(下) Key things from part 4 光线有效载荷是从一个着色器传递到另一个着色器的结构. 这一切都发生在RTX的引擎下. 更小的有效载荷要好得多! 新的D ...

  8. 如何运行具有奇点的NGC深度学习容器

    如何运行具有奇点的NGC深度学习容器 How to Run NGC Deep Learning Containers with Singularity 高性能计算机和人工智能的融合使新的科学突破成为可 ...

  9. Hash源码注释解析

    部分代码注释解析: 1 import java.io.IOException; 2 import java.io.InvalidObjectException; 3 import java.io.Se ...

  10. 【NX二次开发】点到矢量或直线的垂点

    已知p1.p2.v1求p0 求解: 通过P1点和P2点,先求出v2: 使用 UF_VEC3_dot(),v1点乘v2得到P0与P2之间的距离: 使用UF_VEC3_unitize()将v1单位化: p ...