我们先看张 gif 图看一下效果 (LICEcap 录制的有点卡, 凑合看)
好像还是卡, 怼个视频演示链接吧: https://m.weibo.cn/1990517135/4398431764047996
我们先来分析一下页面结构, 然后分析具体动画实现.
页面结构: 可以将当前页面和下个页面复用, 下个作为作为当前页面的 chilldViewController, 大概长这个样子
那么项目目录大概长这样:
接下来就是给 baseView 添加对应的 tableView,refeshHeader 和 footer
下面来分析当前页滑动到底部, 切换下页的动画实现:
动画分解: 当前 view 滑出屏幕 + 下页 view 滑入屏幕,
那么如何通过 view 和 childView 完成切换呢?
先来说当前 view 滑出屏幕,
我们可以用一种 "欺骗" 式的把戏来完成, 既通过生成裁剪当前 view 生成的 screenShotview 添加到当前屏幕, 来完成当前 view 上滑的效果;
接下来是 childView 滑入屏幕,
当前 view 添加 childView 后, 可以给 childView 添加对应的 transform 动画, 从底部弹出, 就完成了弹出效果动画的实现.
上面动画做完后, 页面布局大概长这样:
下面给出动画实现关键代码:
首先判断 tableView 滑动偏移量达到了临界值:
通过 tableView 以下代理方法判断当前偏移量
临界值的判断如下:
下滑临界值:
上滑临界值:
当满足对应的临界值偏移量, 我们就要进行 view 切换.
view 中的代码处理 (下滑处理: 当前 view 滑出屏幕, childView 底部弹出; 上滑处理: 当前 view 滑出屏幕, 新 view 从顶部滑入屏幕)
childView 中的代码处理:
大概思路就是这样, 有需要 demo 的可以评论留言.
来源: https://www.cnblogs.com/jgCho/p/11253314.html