BG :
最近在研究一些APP的過程中 , 發(fā)現(xiàn)很多APP都會(huì)在tableViewHeaderView上做一些交互式的動(dòng)畫效果 , 這些簡單的交互式的動(dòng)畫能明顯的增強(qiáng)用戶在滑動(dòng)tableView時(shí)的體驗(yàn) . 所以趁著最近工作不忙 , 著手用一直在學(xué)的swift寫了一個(gè)集成四種較為常見的交互效果的PanAnimationTableView:
幾種效果分別為:
.Follow : 即普通的headerView跟隨效果
.FollowAndStretch : 普通跟隨效果 , 當(dāng)往下滑動(dòng)tableView時(shí) , 會(huì)有縮放效果
.Hold : 固定headerView
.HoldAndStretch : 固定headerView , 當(dāng)往下滑動(dòng)tableView時(shí) , 會(huì)有縮放效果
demo項(xiàng)目的下載地址 : PanAnimationTableView ----- 戳我?
思路原理
由于tableView無法通過直接改變headerView的frame來改變headerView的顯示效果 , 想要實(shí)現(xiàn)交互式的動(dòng)畫效果 , 我的想法是傳入一個(gè)要顯示的topView? , 根據(jù)settingInfo的actualHeight(顯示高度)來創(chuàng)建一個(gè)透明的實(shí)際headerView , 然后再根據(jù)actualHeight 和 hiddenHeight(初始狀態(tài)需要隱藏的高度)來創(chuàng)建當(dāng)做headerView用來顯示的topView (即偽tableViewHeaderView) ,
然后便可以根據(jù)tableView的contentOffSet的y值變化改變topView的frame , 從而做出對應(yīng)的動(dòng)畫效果
關(guān)鍵代碼 :
scrollViewDidScroll: 根據(jù)設(shè)置的animationType進(jìn)行不同處理
以hold和holdAndStretch為例
項(xiàng)目使用 :
定義tableView , 設(shè)置滾動(dòng)到topView最底部的回調(diào)函數(shù) (可不設(shè)置) , 設(shè)置settingInfo的animationType (動(dòng)畫類型 , default -> holdAndStretch)? ;? actualHeight (始終顯示的高度 , default -> 150)? ;? hiddenHeight (拉伸才可顯示的高度 , default -> 40) ;? stretchType (拉伸效果的類型 , default -> SameRate(比例拉伸))
部分項(xiàng)目需要在會(huì)變化的headerView上添加不變固定的view , 而直接在topView上添加view會(huì)導(dǎo)致view也會(huì)發(fā)生變化 , 添加view應(yīng)調(diào)用addContentView方法
小結(jié) :
這種交互式的tableViewHeaderView效果實(shí)現(xiàn)起來并不復(fù)雜 , 只是簡單的通過contentOffSet.y計(jì)算topView的frame , 但由于項(xiàng)目中頁面繁多 , 所需要的實(shí)際效果多樣 , 將其中的交互邏輯抽象封裝起來還是十分有必要的 . 這樣我們在開發(fā)具體頁面的時(shí)候 , 只需要關(guān)注交互效果的類型就可以了 ~~ .? 當(dāng)然 , 具體效果的種類千千萬 , 我這邊只是列舉了我個(gè)人認(rèn)為比較常見的四種類型 , 以后如果遇到新的項(xiàng)目需求或看到別的app中比較好的效果時(shí) , 我會(huì)再更新這個(gè)demo的 ~
