swift中的轉場

本文翻譯自這里
上一篇中我寫了如何來創建一個自定義轉場動畫.
但僅限于屏幕的整個frame的轉場,而我們經常需要頁面中的元素也有動畫...

Menu-8.gif

這篇文章我將從0到1教你如何來實現頁面元素的轉場.
照例,你可以在這里來下載初始項目文件.
當你一步步完成這篇教程的時候,你就可以了解其中的原理并能輕松地寫出自己的轉場動畫了:)

  • 設置storyboard
    示例將創建一個我前段日子非常喜歡的app中類似的按鈕列表.
  • 設置頁面和內容
    首先創建一個新的項目并在storyboard中創建一個列表頁面和按鈕頁面,創建必要的控件和設置相應的約束.
    在主界面和按鈕頁面之間創建一個modal segue,設置退出到主頁面的segue,完成后的storyboard如下圖:

Storyboard.png

在storyboard設置這些東西是有些費時,所以你可以直接下載已經為你準備好的初始項目文件.
當你運行示例項目后,點擊"+"按鈕時,會以sliding up的動畫從屏幕底部彈出.

Menu-1.gif
  • 使按鈕透明
    第一步我們要使按鈕頁面透明,以便看到下面的內容.
    設置按鈕頁面的背景View的顏色為半透明.
    我們設置的時候要確保你設置的是View的半透明顏色而非alpha的值.
storyboard-background-color.png

運行項目你會發現頁面彈出的時候背景頁面可以看到,但當彈出結束的時背景頁面消失了,取而代之的是漆黑一片.

Menu-2.gif

修復此問題只需在modal segue中做些調整.
選中Segue,使presentation的值從'Default'換為'Over Full Screen'.

segue-presentation.png

而當前有個不能退出的bug.如果我們不修復就會造成點擊取消按鈕時無法退出的情況.
修復很簡單,只需添加退出的代碼即可.

@IBAction func unwindToMainViewController (sender: UIStoryboardSegue){
        // bug? exit segue doesn't dismiss so we do it manually... 
        self.dismissViewControllerAnimated(true, completion: nil)
}

再次運行項目,會看到當轉場動畫結束后背景頁面仍然能夠看見.

Menu-3.gif
  • 創建一個轉場
    接下來我們要創建一個按鈕頁面的自定義轉場動畫.
    如果你不熟悉如何來創建一個轉場過渡管理類可以參考這篇文章,和接下來的非常相似.
    你可以先嘗試使按鈕頁面創建一個alpha值從0到1漸顯的動畫.大膽去做,即使不行回退即可.
    本文的示例與上一篇文章中的最大不同是在animateTransition方法里有獨立的許多元素,而上一篇是整個頁面.
    我們無需立馬完成這些,不過需要替換獲取頁面views的方法:
transitionContext.viewForKey(UITransitionContextFromViewKey)!

我們將用如下方法獲取頁面的view controllers:

transitionContext.viewControllerForKey(UITransitionContextFromViewControllerKey)!

另外,因為按鈕頁面的view controller會在From ViewController和ToViewController交替變換(取決于是調用presenting還是dismissing方法).我們將用一個元組來暫存,并通過presenting標記true或false來指派menuViewController和bottomViewController.

// create a tuple of our screens
let screens : (from:UIViewController, to:UIViewController) = (transitionContext.viewControllerForKey(UITransitionContextFromViewControllerKey)!, transitionContext.viewControllerForKey(UITransitionContextToViewControllerKey)!)
// assign references to our menu view controller and the 'bottom' view controller from the tuple
// remember that our menuViewController will alternate between the from and to view controller depending if we're presenting or dismissing
let menuViewController = !self.presenting ? screens.from as MenuViewController : screens.to as MenuViewController
let bottomViewController = !self.presenting ? screens.to as UIViewController : screens.from as UIViewController
let menuView = menuViewController.view
let bottomView = bottomViewController.view

沒有特殊的東西,但卻為復雜動畫做了些基礎工作.

Menu-4.gif
  • 探尋頁面進入的方法
    我們將創建第一列按鈕從左側滑入而第二列按鈕從右側滑入的動畫.
    我們在嘗試新事物的時候盡量分成多個小步驟去做而不是一步到位.
    所以我們先嘗試在第一列的兩個元素Text和Photo上使用動畫.
    在我們使用頁面上的元素時我們首先需要建立對它們的引用.就像第一篇動畫教程中所做的點擊拖動從storyboard到我們的swift文件中創建@IBAction一般,我們需要點擊拖動頁面中動畫所需的元素創建@IBOutlet.
create-IBOutlets.gif

當我們完成時,我們一共有12個IBOutlets,每個連接相對應的icon和text label.

@IBOutlet weak var textPostIcon: UIImageView!
@IBOutlet weak var textPostLabel: UILabel!

@IBOutlet weak var photoPostIcon: UIImageView!
@IBOutlet weak var photoPostLabel: UILabel!

@IBOutlet weak var quotePostIcon: UIImageView!
@IBOutlet weak var quotePostLabel: UILabel!

@IBOutlet weak var linkPostIcon: UIImageView!
@IBOutlet weak var linkPostLabel: UILabel!

@IBOutlet weak var chatPostIcon: UIImageView!
@IBOutlet weak var chatPostLabel: UILabel!

@IBOutlet weak var audioPostIcon: UIImageView!
@IBOutlet weak var audioPostLabel: UILabel!

依然在animateTransition方法里我們首先要探尋從漸顯動畫轉變為兩個元素的的逐漸滑入動畫:
我們要首先準備按鈕頁面的動畫:

// setup 2D transitions for animations 
let offstageLeft = CGAffineTransformMakeTranslation(-150, 0)
let offstageRight = CGAffineTransformMakeTranslation(150, 0)

// prepare the menu
if (self.presenting){
    
    // prepare menu to fade in
    menuView.alpha = 0
    
    // prepare menu items to slide in
    menuViewController.textPostIcon.transform = offstageLeft
    menuViewController.textPostLabel.transform = offstageLeft
    
    menuViewController.photoPostIcon.transform = offstageRight
    menuViewController.photoPostLabel.transform = offstageRight
    
}

然后在我們動畫block中:

if (self.presenting){
    // fade in
    menuView.alpha = 1
    
    // onstage items: slide in
    menuViewController.textPostIcon.transform = CGAffineTransformIdentity
    menuViewController.textPostLabel.transform = CGAffineTransformIdentity
    
    menuViewController.photoPostIcon.transform = CGAffineTransformIdentity
    menuViewController.photoPostLabel.transform = CGAffineTransformIdentity
    
}
else {
    // fade out
    menuView.alpha = 0
    
    // offstage items: slide out
    menuViewController.textPostIcon.transform = offstageLeft
    menuViewController.textPostLabel.transform = offstageLeft
    
    menuViewController.photoPostIcon.transform = offstageRight
    menuViewController.photoPostLabel.transform = offstageRight
    
}

我們可以在元素的正常位置下設置transform的屬性為CGAffineTransformIdentity或者移動它們遠離屏幕通過offstageLeft和offstageRight來改變.
運行項目,我們可以看到兩個元素滑入滑出的動畫:

Menu-5.gif
  • 重構
    你也許注意到如果按以上方法完成12個IBOutlets動畫那將會有很多代碼.在準備和顯示動畫的代碼中我們有許多重復.
    開發者中有句熟語叫DRY,意思是不要重復,而現在我們有許多:(
    雖然沒多大關系,但這會在設置大量重復動畫時使效率大打折扣.
    因此,讓我們來重構下代碼來減少重復.
    我們需要創建兩個新方法:
func offStageMenuController(menuViewController: MenuViewController){
    menuViewController.view.alpha = 0
    // setup 2D transitions for animations
    let offstageLeft = CGAffineTransformMakeTranslation(-150, 0)
    let offstageRight = CGAffineTransformMakeTranslation(150, 0)

    menuViewController.textPostIcon.transform = offstageLeft
    // etc for all 12 IBOutlets...
}
func onStageMenuController(menuViewController: MenuViewController){
    // prepare menu to fade in
    menuViewController.view.alpha = 1
    menuViewController.textPostIcon.transform = CGAffineTransformIdentity
    // etc for all 12 IBOutlets...
}

此時,動畫block里的代碼會精簡許多,只需調用這些方法即可:

// perform the animation!
UIView.animateWithDuration(duration, delay: 0.0, usingSpringWithDamping: 0.7, initialSpringVelocity: 0.8, options: nil, animations: {
    
        if (self.presenting){
            self.onStageMenuController(menuViewController) // onstage items: slide in
        }
        else {
            self.offStageMenuController(menuViewController) // offstage items: slide out
        }

    }, completion: { finished in
        
        // tell our transitionContext object that we've finished animating
        transitionContext.completeTransition(true)
        
        // bug: we have to manually add our 'to view' back http://openradar.appspot.com/radar?id=5320103646199808
        UIApplication.sharedApplication().keyWindow?.addSubview(screens.to.view)
})

運行程序,我們將看到12個元素隨著頁面的轉變都有滑入滑出動畫:

Menu-6.gif
  • 錯開滑入的時間
    所有元素都在同一時間進入會有些不自然,如果這些元素能以不同速度滑入會更加自然.
    由于我們重構了offstaging transitions,所以原來24個地方需要修改的地方現在縮減為12處.然而transition right還需要我們繼續重構.
    我們需要創建一個輸入數字返回2D translation的方法:
func offStage(amount: CGFloat) -> CGAffineTransform {
        return CGAffineTransformMakeTranslation(amount, 0)
}

在我們的offstaging幫助方法里我們使用:

// setup parameters for 2D transitions for animations
let topRowOffset  :CGFloat = 50
let middleRowOffset :CGFloat = 150
let bottomRowOffset  :CGFloat = 300
menuViewController.textPostIcon.transform = self.offStage(-topRowOffset)
menuViewController.textPostLabel.transform = self.offStage(-topRowOffset)
menuViewController.quotePostIcon.transform = self.offStage(-middleRowOffset)
menuViewController.quotePostLabel.transform = self.offStage(-middleRowOffset)
menuViewController.chatPostIcon.transform = self.offStage(-bottomRowOffset)
menuViewController.chatPostLabel.transform = self.offStage(-bottomRowOffset)
menuViewController.photoPostIcon.transform = self.offStage(topRowOffset)
menuViewController.photoPostLabel.transform = self.offStage(topRowOffset)
menuViewController.linkPostIcon.transform = self.offStage(middleRowOffset)
menuViewController.linkPostLabel.transform = self.offStage(middleRowOffset)
menuViewController.audioPostIcon.transform = self.offStage(bottomRowOffset)
menuViewController.audioPostLabel.transform = self.offStage(bottomRowOffset)

我們用每個元素的動畫時間相同,替換使用我們分成的三個組里元素具有相同距離,而當時間相同,元素距離越短就會越早出現.
運行項目,我們將看到交錯的效果:

Menu-7.gif
  • 交換滑入順序
    如果我想下面的元素先出現,中間和上面的元素接下來出現,變為從底部Button開始的的頁面轉換.
    很簡單,只需交換下Offset的值即可:
// setup paramaters for 2D transitions for animations
let topRowOffset :CGFloat = 300
let middleRowOffset :CGFloat = 150
let bottomRowOffset :CGFloat = 50
Menu-8-2.gif

運行項目,我們會看到從底部向上漸入的效果.

Girl學iOS100天 第4天

最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 前言的前言 唐巧前輩在微信公眾號「iOSDevTips」以及其博客上推送了我的文章后，我的 Github 各項指標...
    VincentHK閱讀 5,431評論 3贊 44
  • 在iOS中隨處都可以看到絢麗的動畫效果，實現這些動畫的過程并不復雜，今天將帶大家一窺ios動畫全貌。在這里你可以看...
    每天刷兩次牙閱讀 8,572評論 6贊 30
  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 173,420評論 25贊 708
  • 在iOS中隨處都可以看到絢麗的動畫效果，實現這些動畫的過程并不復雜，今天將帶大家一窺iOS動畫全貌。在這里你可以看...
    F麥子閱讀 5,141評論 5贊 13
  • 曾經說的每一字每一句，每天重溫四張截圖，只為懷念過去的自己，和現在截然不同的自己！
    淺恨閱讀 230評論 0贊 0