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