BG :

最近在研究一些APP的過程中 , 發(fā)現(xiàn)很多APP都會在tableViewHeaderView上做一些交互式的動畫效果 , 這些簡單的交互式的動畫能明顯的增強用戶在滑動tableView時的體驗 . 所以趁著最近工作不忙 , 著手用一直在學的swift寫了一個集成四種較為常見的交互效果的PanAnimationTableView:

幾種效果分別為:

.Follow : 即普通的headerView跟隨效果

.FollowAndStretch : 普通跟隨效果 , 當往下滑動tableView時 , 會有縮放效果

.Hold : 固定headerView

.HoldAndStretch : 固定headerView , 當往下滑動tableView時 , 會有縮放效果

demo項目的下載地址 : PanAnimationTableView ----- 戳我?

思路原理

由于tableView無法通過直接改變headerView的frame來改變headerView的顯示效果 , 想要實現(xiàn)交互式的動畫效果 , 我的想法是傳入一個要顯示的topView? , 根據(jù)settingInfo的actualHeight(顯示高度)來創(chuàng)建一個透明的實際headerView , 然后再根據(jù)actualHeight 和 hiddenHeight(初始狀態(tài)需要隱藏的高度)來創(chuàng)建當做headerView用來顯示的topView (即偽tableViewHeaderView) ,
然后便可以根據(jù)tableView的contentOffSet的y值變化改變topView的frame , 從而做出對應的動畫效果

關鍵代碼 :

scrollViewDidScroll: 根據(jù)設置的animationType進行不同處理

以hold和holdAndStretch為例

項目使用 :

定義tableView , 設置滾動到topView最底部的回調函數(shù) (可不設置) , 設置settingInfo的animationType (動畫類型 , default -> holdAndStretch)? ;? actualHeight (始終顯示的高度 , default -> 150)? ;? hiddenHeight (拉伸才可顯示的高度 , default -> 40) ;? stretchType (拉伸效果的類型 , default -> SameRate(比例拉伸))

部分項目需要在會變化的headerView上添加不變固定的view , 而直接在topView上添加view會導致view也會發(fā)生變化 , 添加view應調用addContentView方法

小結 :

這種交互式的tableViewHeaderView效果實現(xiàn)起來并不復雜 , 只是簡單的通過contentOffSet.y計算topView的frame , 但由于項目中頁面繁多 , 所需要的實際效果多樣 , 將其中的交互邏輯抽象封裝起來還是十分有必要的 . 這樣我們在開發(fā)具體頁面的時候 , 只需要關注交互效果的類型就可以了 ~~ .? 當然 , 具體效果的種類千千萬 , 我這邊只是列舉了我個人認為比較常見的四種類型 , 以后如果遇到新的項目需求或看到別的app中比較好的效果時 , 我會再更新這個demo的 ~