Boss直聘轉場動畫的實現

發表於2016-12-18

先上效果圖

1156fb49dc34a33
仿Boss直聘的專場動畫.gif

在iOS7之後,開發者可以自定製轉場動畫,但是本人在開發過程中一直要相容iOS6,因此也沒能在專案中使用到這些新特性,本文旨在學習,參考資料在文末給出。以下下指示談談仿寫中的一些思路和誤區。

思路一

push動畫分為兩部分:

  1. push開始時先進行的是 fromVC.view 的縮放動畫,並且顯示一個遮罩層覆蓋掉你所點選的位置(例如:cell,demo中用Button代替)
  2. 緊接著將遮罩層進行放大到遮擋住整個螢幕,完成後移除掉次遮罩層

思路二

pop有兩個動畫效果:一個是通過tableView滑動到一定位置時開始pop的轉場動畫,一個是直接點選navigatioBar上的返回按鈕進行的介面下滑出螢幕的pop轉場動畫。因此我增加了一個 BOOL 值來判斷是哪種動畫。

對第二種動畫下過很容易就能做到,但是對於第一種動畫效果,本人計入了一個誤區。

誤區

做第一種pop動畫時,一開始以為是按照滑動距離來進行類似於進行手勢百分比返回的轉場動畫,但是當我進行實際編碼是發現如果是按百分比進行動畫,無論我怎麼寫都會出現 BUG 並且達不到我想要的效果,因此在深(shui)思(jiao)後,還是採用瞭如 push動畫一樣的截圖來實現(如果你能實現百分比返回,請收下我的膝蓋並告訴我?)

原始碼中的一處註釋的示意圖

1256fb4adcee4ee
註釋的示意圖.png

對仿寫的進一步補充

UICollectionView上整合了UITableView,來實現Boss直聘的互動效果

效果圖如下

1357061ef5e53d9
仿Boss的轉場和互動.gif

備註:由於最近離職時遇到了一些坑忙的焦頭爛額,因此一些小的地方還沒做處理:

  1. ViewController中左右滑動時,沒有通知FirstViewControllertableView滾動到對應的位置
  2. TestCollectionViewCell中進行的下載用的是 GCD 模仿的因此你在快速左右滑動時會出現一些小BUG
  3. 帶動畫的button沒來得及寫出來
  4. 最主要的是TestCollectionViewCell中的tableViewcell沒有寫,因此介面還是如此的醜?

Demo地址

  1. 仿Boss直聘的轉場動畫實現
  2. CollectionViewWithTableView

參考連結

  1. OneV’s Den 部落格 – iOS7中的ViewController切換 OneV’s Den
  2. ColinEberhardt的VCTransitionsLibrary
  3. Kitten’s 時間膠囊 – 實現Keynote中的神奇移動效果

相關文章