iOS 类知乎”分页”效果的实现?

咱们先看张gif图看一下效果(LICEcap录制的有点卡, 凑合看)

好像仍是卡, 怼个视频演示连接吧: m.weibo.cn/1990517135/…

咱们先来分析一下页面结构, 而后分析具体动画实现.

页面结构: 能够将当前页面和下个页面复用, 下个页面做为当前页面的chilldViewController, 大概长这个样子

那么项目目录大概长这样:

接下来就是给baseView添加对应的tableView,refeshHeader和footer

下面来分析当前页滑动到底部, 切换下页的动画实现:

动画分解: 当前view滑出屏幕 + 下页view滑入屏幕,

那么如何经过view和childView完成切换呢?

先来讲当前view滑出屏幕,

咱们能够用一种”欺骗”式的把戏来完成, 既经过裁剪当前view生成的screenShotview添加到当前屏幕, 来完成当前view上滑的效果;

接下来是childView滑入屏幕,

当前view添加childView后,能够给childView添加对应的transform动画, 从底部弹出, 就完成了弹出效果动画的实现.

上面动画作完后, 页面布局大概长这样:

下面给出动画实现关键代码:

首先判断tableView滑动偏移量达到了临界值:

经过tableView如下代理方法判断当前偏移量

临界值的判断以下:

下滑临界值:

上滑临界值:

当知足对应的临界值偏移量, 咱们就要进行view切换.

1. view中的代码处理(下滑处理:当前view滑出屏幕, childView底部弹出; 上滑处理: 当前view滑出屏幕, 新view从顶部滑入屏幕)

1. childView中的代码处理:

大概思路就是这样, demo地址: https://github.com/Winerywine/LikeZhiHuPage