2. 程式人生 > >關於自定義轉場動畫，我都告訴你(上)

關於自定義轉場動畫，我都告訴你(上)

阿新 • • 發佈：2019-02-17

這篇文章，我將講述幾種轉場動畫的自定義方式，並且每種方式附上一個示例，畢竟程式碼才是我們的語言，這樣比較容易上手。其中主要有以下三種自定義方法，供大家參考：

  • Push & Pop

  • Modal

  • Segue

前兩種大家都很熟悉，第三種是 Stroyboard 中的拖線，屬於 UIStoryboardSegue 類，通過繼承這個類來自定義轉場過程動畫。

Push & Pop

首先說一下 Push & Pop 這種轉場的自定義，操作步驟如下：

建立一個檔案繼承自 NSObject, 並遵守 UIViewControllerAnimatedTransitioning協議。

實現該協議的兩個基本方法：

//指定轉場動畫持續的時長

func transitionDuration(transitionContext: UIViewControllerContextTransitioning) -> NSTimeInterval

//轉場動畫的具體內容      

func animateTransition(transitionContext: UIViewControllerContextTransitioning)

遵守 UINavigationControllerDelegate 協議，並實現此方法：

 func navigationController(navigationController: UINavigationController, animationControllerForOperation operation: UINavigationControllerOperation, fromViewController fromVC: UIViewController, toViewController toVC: UIViewController) -> UIViewControllerAnimatedTransitioning?

在此方法中指定所用的 UIViewControllerAnimatedTransitioning，即返回 第1步 中建立的類。

注意：由於需要 Push 和 Pop，所以需要兩套動畫方案。解決方法為：

在 第1步 中，建立兩個檔案，一個用於 Push 動畫，一個用於 Pop動畫，然後 第3步 中在返回動畫類之前，先判斷動畫方式（Push 或 Pop）, 使用 operation == UINavigationControllerOperation.Push 即可判斷，最後根據不同的方式返回不同的類。

到這裡就可以看到轉場動畫的效果了，但是大家都知道，系統預設的 Push 和 Pop 動畫都支援手勢驅動，並且可以根據手勢移動距離改變動畫完成度。幸運的是，Cocoa 已經集成了相關方法，我們只用告訴它百分比就可以了。所以下一步就是 手勢驅動。

在第二個 UIViewController 中給 View 新增一個滑動（Pan）手勢。建立一個 UIPercentDrivenInteractiveTransition 屬性。

在手勢的監聽方法中計算手勢移動的百分比，並使用 UIPercentDrivenInteractiveTransition 屬性的 updateInteractiveTransition() 方法實時更新百分比。

最後在手勢的 state 為 ended 或 cancelled 時，根據手勢完成度決定是還原動畫還是結束動畫，使用 UIPercentDrivenInteractiveTransition 屬性的 cancelInteractiveTransition() 或 finishInteractiveTransition() 方法。

實現 UINavigationControllerDelegate 中的另一個返回 UIViewControllerInteractiveTransitioning 的方法，並在其中返回 第4步 建立的 UIPercentDrivenInteractiveTransition 屬性。

至此，Push 和 Pop 方式的自定義就完成了，具體細節看下面的示例。

自定義 Push & Pop 示例

此示例來自 Kitten Yang 的blog 實現Keynote中的神奇移動效果，我將其用 Swift 實現了一遍，原始碼地址: MagicMove。

初始化

  • 建立兩個 ViewController，一個繼承自 UICollectionViewController，取名 ViewController。另一個繼承 UIViewController，取名 DetailViewController。在 Stroyboard 中建立並繫結。

  • 在 Stroyboard 中拖一個 UINavigationController，刪去預設的 rootViewController，使 ViewController 作為其 rootViewController，再拖一條從 ViewController 到 DetailViewController 的 segue。

  • 在 ViewController 中自定義 UICollectionViewCell，新增 UIImageView 和 UILabel。

  • 在 DetailViewController 中新增 UIImageView 和 UITextView

新增 UIViewControllerAnimatedTransitioning

  • 新增一個 Cocoa Touch Class，繼承自 NSObject，取名 MagicMoveTransion，遵守 UIViewControllerAnimatedTransitioning 協議。

  • 實現協議的兩個方法，並在其中編寫 Push 的動畫。 具體的動畫實現過程都在程式碼的註釋裡 :

func transitionDuration(transitionContext: UIViewControllerContextTransitioning) -> NSTimeInterval{

return0.5

}

func animateTransition(transitionContext: UIViewControllerContextTransitioning){

//1.獲取動畫的源控制器和目標控制器

let fromVC = transitionContext.viewControllerForKey(UITransitionContextFromViewControllerKey)as! ViewController

    let toVC = transitionContext.viewControllerForKey(UITransitionContextToViewControllerKey)as! DetailViewController

    let container = transitionContext.containerView()

//2.建立一個 Cell 中 imageView 的截圖，並把 imageView 隱藏，造成使使用者以為移動的就是 imageView 的假象

let snapshotView = fromVC.selectedCell.imageView.snapshotViewAfterScreenUpdates(false)

snapshotView.frame = container.convertRect(fromVC.selectedCell.imageView.frame,fromView: fromVC.selectedCell)

fromVC.selectedCell.imageView.hidden = true

//3.設定目標控制器的位置，並把透明度設為0，在後面的動畫中慢慢顯示出來變為1

toVC.view.frame = transitionContext.finalFrameForViewController(toVC)

toVC.view.alpha = 0

//4.都新增到 container 中。注意順序不能錯了

container.addSubview(toVC.view)

container.addSubview(snapshotView)

//5.執行動畫

UIView.animateWithDuration(transitionDuration(transitionContext),

相關推薦

關於自定義轉場動畫，我都告訴你(上)

這篇文章，我將講述幾種轉場動畫的自定義方式，並且每種方式附上一個示例，畢竟程式碼才是我們的語言，這樣比較容易上手。其中主要有以下三種自定義方法，供大家參考： Push & Pop Modal Segue 前兩種大家都很熟悉，第三種是 St

UINavigationController 自定義轉場動畫（模仿淘寶App跳轉）

imp dal iap 默認 自定義轉場動畫 ict oda ack 調用 制作目的 想要自定義系統轉場動畫速度 放棄不順暢的 NavigationBar 隱藏消失 幹脆直接幹掉每個頁面的 NavigationBar，在使用 UINavigationController

iOS開發 tabbar自定義轉場動畫

1.小記 關於自定義轉場動畫,只要你理清他的”套路”,你就可以隨心所欲地自定義了. 大體思路就是:遵守對應的代理協議,然後設定對應的代理,實現代理方法,這個代理方法要返回的值就是你要實現的動畫.(如果返回nil,就是預設效果) 以UITabBarController為例的

TransitionAnimation自定義轉場動畫

    在iOS 7之後，蘋果就開放了自定義轉場的相關api，現在都快iOS 12了，一直都沒有好好研究轉場動畫，一個是之前沒有重視，覺得花裡胡哨的，另外一個是所做的專案中沒有這樣的轉場動畫需求。這裡說的轉場動畫和上一篇CAAnimation 系統動畫中CATransition動畫不是一個概念，上一篇指的是單

iOS 關於自定義轉場動畫,以UITabBarController為例

1.小記 關於自定義轉場動畫,只要你理清他的”套路”,你就可以隨心所欲地自定義了. 大體思路就是:遵守對應的代理協議,然後設定對應的代理,實現代理方法,這個代理方法要返回的值就是你要實現的動畫.(如果返回nil,就是預設效果) 以UITabBarContro

iOS自定義轉場動畫

http://www.jianshu.com/p/45434f73019e 更新,更簡單的自定義轉場整合！ 寫在前面 這兩天閒下來好好的研究了一下自定義轉場，關於這方面的文章網路上已經很多了，作為新手，我想通過這篇文章把自己這幾天的相關學習心得記錄一下，方便加深印響和

iOS自定義轉場動畫（1）——自定義Push轉場動畫

版本：Xcode 7.0.1 語言：Objective-C 轉場動畫就是viewController之間切換的動畫。 主要有以下三種自定義方法： 列Push & Pop Modal Segue 第一種是UINavigationControl

iOS自定義轉場動畫（4）——自定義模態跳轉之dismiss與手勢驅動

Dismiss 效果： 1、新建PresentTransition繼承NSObject，並在.h中遵守UIViewControllerAnimatedTransitioning協議。 2、實現協議的兩個方法，並在其中編寫 Push 的動畫。類似Pr

自定義轉場詳解(一)

assign pda 好的 led hint ext hid case delegate 前言 本文是我學習了onevcat的這篇轉場入門做的一點筆記。 今天我們來實現一個簡單的自定義轉場，我們先來看看這篇文章將要實現的一個效果圖吧： 過程詳解 熱身準備 我們先創建一

有關連結串列的小技巧，我都給你總結好了

連結串列 連結串列是資料結構裡一個很基礎但是又很愛考的線性結構，連結串列的操作相對來說比較簡單，但是非常適合考察面試者寫程式碼的能力，以及對 corner case 的處理，還有指標的應用很容易引起 NPE (null pointer exception)。綜合以上原因，連結串列在面試中很重要。 提到連結串列

預測 “瘋狂三月” 冠軍的辦法，我只告訴你！

陣列 資深 ava .html evel 神經網絡 -a get 方式 如果你是一個資深的籃球迷，你或許可以通過之前賽季表現的統計匯總，大致判斷出喜愛的球隊將表現出的水平。然而面對這些龐大的數據量，你是不是也常常祈禱能有一種更簡單、更準確的方式？ 這個，可以有！神經網絡非常

關於Flutter初始化流程，我必須告訴你的是...

1. 引言 最近在做效能優化的時候發現，在混合棧開發中，第一次啟動Flutter頁面的耗時總會是第二次啟動Flutter頁面耗時的兩倍左右，這樣給人感覺很不好。分析發現第一次啟動Flutter頁面會做一些初始化工作，藉此，我梳理了下Flutter的初始化流程。 2. Flutter初始化時序 Flutt

剛入坑的程式設計師，我該告訴你點什麼？（高齡程式設計師的大實話）

現在網際網路越來越發達，導致越來越多的人加入了程式設計師這個行列，或者說入了這個坑。那麼剛入坑的程式設計師你應該知道些什麼呢？下面是大佬的一些建議：在這裡相信有許多想要學習前端的同學，關注小編文章最後面文字，可免費領取一整套系統的web前端學習教程！正文少說廢話，多寫程式碼廢

android進階4step1：Android動畫處理與自定義View——轉場動畫

以下都需要執行在5.0以上 一、揭露動畫效果 參考：使用Circular Reveal為你的應用新增揭露動畫效果 最主要的類Circular Reveal 官方將這一動畫稱為揭露效果，它在官網中的描述是這樣的： 當您顯示或隱藏一組 UI 元素時，揭露動畫可為使用者提供視覺

【轉】自定義presentviewcontroller和pushviewcontroller轉場動畫

自定義NavigationController動畫 首先，實現一個非常簡單的UINavigationController轉場，一般會這麼幹 實現FirstViewController，加到Window上（沒用storyboard和xib） 實現FirstViewCo

控制器轉場動畫自定義（2）：modal/dismiss的實現

大家好，我是KK黃凱展，這次繼上篇的push/pop轉場動畫自定義後，我們把目標瞄準modal和dismiss這兩個傢伙，照舊，還是先把效果圖和預設搬出來給大家look一look~ 這是預設modal和dismiss的效果 這是自定義push和po

自定義EL表達式，將對象轉成json格式，關鍵代碼

地址 .com rar json common onf jsp頁面 conf 標簽 做javaweb開發的最常用的一個東西el表達式，這個東西是個很好用的東西，但有些時候我們處理復雜的字符串操作，就有些相形見絀了，這個時候就需要用自定義的方法去實現更多簡潔方便的事情。下面自

vue2自定義分頁元件，可設定每頁顯示數量，指定跳轉具體頁面

分頁元件 <template> <div> <div class="page-helper" v-if="showPageHelper"> <div class="page-list">

【搭建react-native專案框架】4.自定義TabBar中間按鈕，實現播放時旋轉動畫

本節只講解如何自定義TabBar的中間按鈕，以及播放時旋轉動畫的實現。 還是先來看效果圖 其實思路很簡單，首先要使TabBar把中間按鈕的位置空出來，然後擺上一個懸浮的按鈕，就能實現中間按鈕了。 1.設定CustomTabBar的placeMiddle屬性為

jQuery基礎（常用插件 表單驗證，圖片放大鏡，自定義對象級，jQuery UI，面板折疊）

此外 cookie值 添加圖標 tor 列表 需要 droppable 使用 ddn 1.表單驗證插件——validate 該插件自帶包含必填、數字、URL在內容的驗證規則，即時顯示異常信息，此外，還允許自定義驗證規則，插件調用方法如下： $(form).vali