自定義 push 和 pop 實現相冊翻開效果(下)

話接上篇,實現使用 pinch 手勢來控制 push 和 pop。這個下篇相對上篇沒有那么難啃。

交互動畫條件

從上一篇可知,實現可交互的 push 和 pop 動畫還需要提供交互控制器 Interaction Controller,其遵守UIViewControllerInteractiveTransitioning協議,不過這個協議其實沒什么用。

看下圖:


交互控制器與動畫控制器的協作過程如下,動畫控制器在其- animateTransition:中必須使用 UIView Animation 來實現需要的動畫,這也是上篇中不使用 Core Animation 的原因;然后交互控制器根據外部驅動如手勢控制或是其他事件來更新動畫的進度。注意:沒有動畫控制器的情況下交互控制器是無法工作的。

話雖如此,令人驚喜的是在自定義 transition 過程中的發生的所有動畫,不限于- animateTransition:里提交的動畫,都可以實現交互控制,而且 Core Animation 也支持。但為何蘋果的工程師說必須使用 UIView Animation 呢?交互動畫可以中斷,當外界的驅動比如手勢取消或是在某個階段中斷的話,后續的處理一般是根據進度來決定動畫繼續完成或是取消;而使用而 Core Animation 時,手勢中止時,動畫將停在當前位置。前面說到,沒有放在- animateTransition:的動畫也可以實現交互控制,比如你可能會在viewWillDisappear:里執行 UIView Animation,當手勢中止時,視圖會從當前狀態直接跳到動畫的最終值。另外,經嘗試發現,交互動畫只支持UIView block animation 的第一層次,completion Block 中添加的動畫會在第一層次的動畫結束后正常進行,但不能被交互控制器控制。所以,要想實現交互控制,老老實實把所有的動畫都放在動畫控制器的- animateTransition:里,而且要用 UIView Animation 實現。

UIViewControllerInteractiveTransitioning協議中的方法對于實現交互動畫幾乎沒什么用處,好在系統已經給我們打包好了一個交互控制器UIPercentDrivenInteractiveTransition,大部分的情況下我們使用這個類就足夠了。該類提供了以下幾個方法來控制交互的進度:

- updateInteractiveTransition://更新動畫的進度
– cancelInteractiveTransition  //取消交互,動畫回放至開始時的狀態
– finishInteractiveTransition   //完成轉場,動畫繼續直至 push 或 pop 完成

通過這三個方法,交互控制器就像一個視頻播放器將 push 或 pop 過程中發生的所有動畫當做一部影片來播放。外部的驅動比如手勢用來控制影片的播放進度;當手勢結束或取消時,可以設定影片繼續播放直至結束或是返回至影片開始時。

手勢驅動交互

回到SDENavigationControllerDelegate類里,實現下面的可選方法來提供交互控制器:

var interactive = false
private (set) var interactionController: UIPercentDrivenInteractiveTransition?

func navigationController(navigationController: UINavigationController, interactionControllerForAnimationController animationController: UIViewControllerAnimatedTransitioning) -> UIViewControllerInteractiveTransitioning? {
    // 只可以在 pinch 綁定的方法里才能修改這個屬性
    if interactive{
        return interactionController
    }

    return nil
}

這里添加了一個interactive屬性來標記是否當前動畫是否處于交互控制中,這是因為 pop 的動作還可以使用 navigationbar 上的 Back ButtomItem 來完成,此時若還提供交互控制器的話,會造成 pop transition 過程無法結束。不過你重寫相關方法,并使用finishInteractiveTransition來結束轉場動畫也是可以的。

接下來添加 pinch 手勢支持。對于 pop 過程,我在默認分支里實現了自動添加 pinch 手勢用于 pop;而對于 push 過程,需要創建新的控制器,而使用者的類未知,而且可能需要其他的初始化設置,因此無法實現自動支持,這也是為什么很多庫只能自動添加 pop 支持的緣故。而你需要 pinch 同時支持 push 和 pop 時,自動支持 pop 的機制就不能使用了。

使用 pinch 支持 push 和 pop 操作,首先在SDENavigationControllerDelegate里,添加isPush屬性用于在使用手勢的過程中判斷當前是在進行哪種操作:

var isPush = false
func navigationController(navigationController: UINavigationController, animationControllerForOperation operation: UINavigationControllerOperation, fromViewController fromVC: UIViewController, toViewController toVC: UIViewController) -> UIViewControllerAnimatedTransitioning? {
    animationController = SDEPushAndPopAnimationController(operation: operation)
    isPush = (operation == .Push)
    return animationController
}

UICollectionViewController類里添加下面的屬性和方法:

var transitionDelegate: SDENavigationControllerDelegate?
var pinchGestureRecognizer: UIPinchGestureRecognizer?{
    didSet(newValue){
        collectionView?.addGestureRecognizer(pinchGestureRecognizer!)
    }
}

override func viewDidLoad() {
    super.viewDidLoad()
    pinchGestureRecognizer = UIPinchGestureRecognizer(target: self, action: "handlePinch:")
}

func getIndexPathForGesture(gesture: UIPinchGestureRecognizer) -> NSIndexPath?{
    let location0 = gesture.locationOfTouch(0, inView: gesture.view)
    let location1 = gesture.locationOfTouch(1, inView: gesture.view)
    let middleLocation = CGPointMake((location0.x + location1.x)/2, (location0.y + location1.y)/2)
    let indexPath = collectionView?.indexPathForItemAtPoint(middleLocation)
    return indexPath
}

func handlePinch(gesture: UIPinchGestureRecognizer){
    switch gesture.state{
    case .Began:
        //設定 pinch 起始向外擴展時實現 push
        if gesture.scale >= 1.0{
            guard let indexPath = getIndexPathForGesture(gesture) else{
                return
            }
            //保存封面索引位置
            self.selectedIndexPath = indexPath

            if let toVC = storyboard?.instantiateViewControllerWithIdentifier("XXX"){
                transitionDelegate = navigationController?.delegate as? SDENavigationControllerDelegate
                transitionDelegate?.interactive = true//只在手勢里標記為 true,要求提供交互控制器
                navigationController?.pushViewController(toVC, animated: true)
            }
        }else{
            //如果是向內收縮則實現 pop
            //ViewController 被 pop 后,此時已經被移除出 navigation controller 的棧,通過 self.navigationController 返回的只是 nil,因為必須在 pop 前獲取 navigation controller delegate.
            transitionDelegate = self.navigationController?.delegate as? SDENavigationControllerDelegate
            transitionDelegate?.interactive = true//只在手勢里標記為 true,要求提供交互控制器
            self.navigationController?.popViewControllerAnimated(true)
        }
    case .Changed:
        guard transitionDelegate != nil else{
            return
        }
        guard let interactionController = transitionDelegate?.interactionController else{
            return
        }
        var progress = gesture.scale
        if transitionDelegate!.isPush{
            progress = gesture.scale - 1.0 >= 0.9 ? 0.9 : gesture.scale - 1.0
        }else{
            progress = 1.0 - gesture.scale
        }
        //根據手勢的擴張程度來更新動畫進度
        interactionController.updateInteractiveTransition(progress)
    case .Ended, .Cancelled:
        guard transitionDelegate != nil else{
            return
        }
        guard let interactionController = transitionDelegate?.interactionController else{
            return
        }

        var progress = gesture.scale
        if transitionDelegate!.isPush{
            progress = gesture.scale - 1.0 >= 0.9 ? 0.9 : gesture.scale - 1.0
        }else{
            progress = 1.0 - gesture.scale
        }
        //設定一個閾值,用來決定手勢停止或取消時是完成交互還是取消交互
        if progress >= 0.4{
            interactionController.finishInteractiveTransition()
        }else{
            interactionController.cancelInteractiveTransition()
        }
        //確保只在使用 pinch 手勢時才提供動畫的交互
        transitionDelegate?.interactive = false
    default:
        guard transitionDelegate != nil else{
            return
        }
        transitionDelegate?.interactive = false
    }
}

可以看出,雖然代碼太長的,但交互動畫的實現還是很簡單的。當然,這個前提是上篇里實現過場動畫時嚴格按照蘋果工程師說的那樣使用 UIView Animation 來實現動畫,而且必須在動畫控制器里的- animateTransition:里面提交動畫。

自動支持 pinch for pop

從使用角度講,使用 pinch 來 push 的操作是很不直觀的,除非界面沒有給你提供其他選擇,不過頂多不給你提供 NavigationBar,不能通過點擊而是通過 pinch 手勢進入下一級界面的設計顯然是腦殘行為。通過 pinch 來實現 pop 在如今無疑是個很自然的行為,如何實現自動添加 pinch 手勢來支持 pop 呢?顯然,要自動添加,我們就不能在UICollectionViewController里動手腳。在執行了navigationController?.pushViewController(toVC, animated: true)這條命令后,系統就會向navigationController的代理詢問動畫控制器和交互控制器,那么詢問動畫控制器時就是搞小動作的地方:

private (set) var interactionController: UIPercentDrivenInteractiveTransition?
func navigationController(navigationController: UINavigationController, animationControllerForOperation operation: UINavigationControllerOperation, fromViewController fromVC: UIViewController, toViewController toVC: UIViewController) -> UIViewControllerAnimatedTransitioning? {
    animationController = SDEPushAndPopAnimationController(operation: operation)
    if operation == .Push{
        if let toCollectionVC = toVC as? UICollectionViewController{
            interactionController =  SDEPopPinchInteractionController(toVC: toCollectionVC, holder: self)
        }
    }
    return animationController
}

新的交互控制器在初始化的時候在 toVC 上添加 pinch 手勢,注意避免引用循環:

import UIKit

class SDEPopPinchInteractionController: UIPercentDrivenInteractiveTransition {
    private var pinchGesture = UIPinchGestureRecognizer()
    private var topVC: UICollectionViewController
    private unowned var holder: SDENavigationControllerDelegate

    init(toVC topVC: UICollectionViewController, holder: SDENavigationControllerDelegate) {
        self.topVC = topVC
        self.holder = holder
        super.init()
        addPinchGestureOnView(self.topVC.view)
    }

    private func addPinchGestureOnView(view: UIView){
        pinchGesture.addTarget(self, action: "sde_handlePinch:")
        view.addGestureRecognizer(pinchGesture)
    }

    internal func sde_handlePinch(gesture: UIPinchGestureRecognizer){
        switch gesture.state{
        case .Began:
            if gesture.scale < 1.0{
                holder.interactive = true
                topVC.navigationController?.popViewControllerAnimated(true)
            }
        case .Changed:
            if gesture.scale < 1.0{
                let progress = 1.0 - gesture.scale
                self.updateInteractiveTransition(progress)
            }
        case .Ended:
            if gesture.scale < 1.0{
                let progress = 1.0 - gesture.scale
                if progress > 0.4{
                    self.finishInteractiveTransition()
                }else{
                    self.cancelInteractiveTransition()
                }
                holder.interactive = false
            }
        default:
            holder.interactive = false
        }
    }

    deinit{
        pinchGesture.view?.removeGestureRecognizer(pinchGesture)
    }
}

注意,由于 push 操作的特殊性,無法自動添加 pinch 手勢來支持 push 操作,如果你需要同時支持兩種操作,那么最好放棄自動添加 pinch 支持 pop 的方式,因為一種手勢不能添加兩種方法。也許你可能嘗試下,在 view 里添加 pinch 手勢用于 pop,在 collectionView 里添加 pinch 里用于 push,限制只能有一個起作用,似乎行不通,不過你可以試試。

我在 Demo 里實現了上述兩種模式:默認分支自動添加 pinch 實現 pop手動添加 pinch 同時支持 push 和 pop

后記:

objectivetoast.com 的《Custom Transitions on iOS》是我見過最好的關于 Custom Transition 的文章,甚至 objcc.io 上的兩篇關于 Custom Transition 的文章也不如這篇淺顯易懂,但是其隨后的一篇《Interactive Transition》寫得晦澀難懂,主要是作者的示例可以無限制地 push, 為此作者將 AnimationController、InteractiveController 和 NavigationControllerDelegate 都封裝了起來了,但是卻搞得過于復雜,不是個好的入門例子。

參考資料:
1.View Controller 轉場
2.Interactive Transition

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 228,156評論 6 531
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 98,401評論 3 415
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 176,069評論 0 373
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 62,873評論 1 309
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 71,635評論 6 408
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 55,128評論 1 323
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,203評論 3 441
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,365評論 0 288
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 48,881評論 1 334
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 40,733評論 3 354
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 42,935評論 1 369
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,475評論 5 358
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,172評論 3 347
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,582評論 0 26
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,821評論 1 282
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 51,595評論 3 390
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 47,908評論 2 372

推薦閱讀更多精彩內容

  • 效果預覽: 前言 蘋果自家應用 Photos 里點擊相冊后的動畫是非常精妙的,而且是可交互的。我有類似的動畫需求,...
    seedante閱讀 5,783評論 3 39
  • 發現 關注 消息 iOS 第三方庫、插件、知名博客總結 作者大灰狼的小綿羊哥哥關注 2017.06.26 09:4...
    肇東周閱讀 12,151評論 4 61
  • 早上七點入園,到班級里首先把生活區的工作簡單慮了一遍,看看那些工作需要及時上架,還有那些需要購買。那些工作需要補充...
    和艷紅閱讀 164評論 0 1
  • 試驗
    哈羅Mr閆閱讀 197評論 0 0