本文翻譯自這里
上一篇中我寫了如何來創(chuàng)建一個自定義轉場動畫.
但僅限于屏幕的整個frame的轉場,而我們經常需要頁面中的元素也有動畫...
Menu-8.gif
這篇文章我將從0到1教你如何來實現頁面元素的轉場.
照例,你可以在這里來下載初始項目文件.
當你一步步完成這篇教程的時候,你就可以了解其中的原理并能輕松地寫出自己的轉場動畫了:)
- 設置storyboard
示例將創(chuàng)建一個我前段日子非常喜歡的app中類似的按鈕列表. - 設置頁面和內容
首先創(chuàng)建一個新的項目并在storyboard中創(chuàng)建一個列表頁面和按鈕頁面,創(chuàng)建必要的控件和設置相應的約束.
在主界面和按鈕頁面之間創(chuàng)建一個modal segue,設置退出到主頁面的segue,完成后的storyboard如下圖:
Storyboard.png
在storyboard設置這些東西是有些費時,所以你可以直接下載已經為你準備好的初始項目文件.
當你運行示例項目后,點擊"+"按鈕時,會以sliding up的動畫從屏幕底部彈出.
Menu-1.gif
- 使按鈕透明
第一步我們要使按鈕頁面透明,以便看到下面的內容.
設置按鈕頁面的背景View的顏色為半透明.
我們設置的時候要確保你設置的是View的半透明顏色而非alpha的值.
storyboard-background-color.png
運行項目你會發(fā)現頁面彈出的時候背景頁面可以看到,但當彈出結束的時背景頁面消失了,取而代之的是漆黑一片.
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
- 創(chuàng)建一個轉場
接下來我們要創(chuàng)建一個按鈕頁面的自定義轉場動畫.
如果你不熟悉如何來創(chuàng)建一個轉場過渡管理類可以參考這篇文章,和接下來的非常相似.
你可以先嘗試使按鈕頁面創(chuàng)建一個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
- 探尋頁面進入的方法
我們將創(chuàng)建第一列按鈕從左側滑入而第二列按鈕從右側滑入的動畫.
我們在嘗試新事物的時候盡量分成多個小步驟去做而不是一步到位.
所以我們先嘗試在第一列的兩個元素Text和Photo上使用動畫.
在我們使用頁面上的元素時我們首先需要建立對它們的引用.就像第一篇動畫教程中所做的點擊拖動從storyboard到我們的swift文件中創(chuàng)建@IBAction一般,我們需要點擊拖動頁面中動畫所需的元素創(chuàng)建@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方法里我們首先要探尋從漸顯動畫轉變?yōu)閮蓚€元素的的逐漸滑入動畫:
我們要首先準備按鈕頁面的動畫:
// 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動畫那將會有很多代碼.在準備和顯示動畫的代碼中我們有許多重復.
開發(fā)者中有句熟語叫DRY,意思是不要重復,而現在我們有許多:(
雖然沒多大關系,但這會在設置大量重復動畫時使效率大打折扣.
因此,讓我們來重構下代碼來減少重復.
我們需要創(chuàng)建兩個新方法:
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還需要我們繼續(xù)重構.
我們需要創(chuàng)建一個輸入數字返回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
- 交換滑入順序
如果我想下面的元素先出現,中間和上面的元素接下來出現,變?yōu)閺牡撞緽utton開始的的頁面轉換.
很簡單,只需交換下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天
