iOS UIView動畫實踐（三）：Transition Animation

時間  2019-11-06
標籤 ios uiview 動畫 實踐 transition animation 欄目 iOS 简体版
原文   原文鏈接

前言

在上兩篇文章中向你們介紹瞭如何建立基於動畫屬性的視圖動畫，好比位置、透明度等。可是你們有沒有想過添加或刪除一個視圖時怎樣添加相應的動畫呢？ios

固然咱們能夠用第一篇文章中對用戶名、密碼輸入框的處理辦法，可是還有更好的辦法處理這種情況。那就是在這篇文章中將向你們介紹的過渡轉變（Transition）動畫。web

過渡轉變更畫是Apple預約義的動畫集，它沒有更改視圖某屬性起始值和終止值的概念，而只須要你設定不一樣的動畫選項便可。swift

添加新視圖

在進行示例以前，你們須要注意一點過渡轉變更畫與動畫屬性動畫的不一樣之處。咱們在建立動畫屬性動畫時只須要在animations閉包中添加對視圖動畫屬性修改的代碼便可，它沒有做用域或做用視圖的概念。而在過渡轉變更畫中有做用視圖的概念，也就是說咱們調用過渡轉變更畫方法時須要指定一個做用視圖。閉包

明確這點不一樣以後，咱們對做用視圖再做進一步的說明。過渡轉變更畫中的做用視圖並非咱們的目標視圖，而是目標視圖的容器視圖，那麼你們不難想象，若是該容器視圖中有多個子視圖，那麼這些子視圖都會有過渡轉變更畫效果。下面用示例像你們說明。app

先看看一個簡單的視圖結構：iview

 

很明顯，咱們添加了一個視圖做爲容器視圖，而且尺寸等於屏幕尺寸。在ViewController.swift中有該容器視圖的Outlet以及一個圖片視圖：iphone

[cpp] view plaincopyide

  1. @IBOutlet weak var containerView: UIView!  學習

  2. let ipadView = UIImageView(frame: CGRectMake(100, 100, 200, 151.5))  動畫

在viewDidLoad()方法中給ipadView指定圖片：

[cpp] view plaincopy

  1. ipadView.image = UIImage(named: "ipad")  

而後在viewDidAppear()方法中添加以下代碼：

[cpp] view plaincopy

  1. UIView.transitionWithView(self.containerView, duration: 1.5, options: .TransitionFlipFromBottom, animations: {  

  2.     self.containerView.addSubview(self.ipadView)  

  3. }, completion: nil)  

上述代碼就是咱們今天的主角，過渡轉變方法之一，它一樣是UIView的類方法，共有五個參數：

  • view：第一個參數，也就是做用視圖，通常都是容器視圖。

  • duration：動畫持續時間。

  • options：過渡轉變更畫選項，由它來肯定過渡轉變的具體展示形式。

  • animations：動畫閉包。

  • completion：動畫結束後執行該閉包中的代碼。

除了第一個參數，其餘四個參數你們應該都不會陌生。這段代碼用文字解釋出來就是將容器視圖（containerView）添加子視圖（ipadView）的過程使用.TransitionFlipFromBottom類型的過渡轉變更畫展現出來，持續時間爲1.5秒。編譯運行看看效果：

                                        

咱們再來添加一個子視圖（該子視圖的初始化代碼再也不累贅）：

[cpp] view plaincopy

  1. UIView.transitionWithView(self.containerView, duration: 1.5, options: .TransitionFlipFromBottom, animations: {  

  2.     self.containerView.addSubview(self.ipadView)  

  3.     self.containerView.addSubview(self.iphoneView)  

  4. }, completion: nil)  

編譯運行看看效果：

                                        

你們能夠看到這兩個子視圖都依託與它們的容器視圖進行了過渡轉變更畫。下面的列表是全部過渡轉變更畫的動畫選項，你們能夠在大家本身的項目中逐個實驗：

  • .TransitionFlipFromLeft

  • .TransitionFlipFromRight

  • .TransitionCurlUp

  • .TransitionCurlDown

  • .TransitionCrossDissolve

  • .TransitionFlipFromTop

  • .TransitionFlipFromBottom

若是咱們有多個目標視圖，想進行不一樣的過渡轉變更畫怎麼辦？那咱們就建立多個目標視圖的容器視圖，尺寸與目標視圖一致，放置在合適的位置：

 

從上圖中能夠看出，咱們在屏幕上放置了四個容器視圖，顯而易見，咱們要分別對這四個容器視圖添加過渡轉變更畫。固然容器視圖裏要添加什麼樣的視圖隨我的喜愛。

在viewDidLoad()方法中添加以下代碼：

[cpp] view plaincopy

  1. UIView.transitionWithView(self.ipadContainerView, duration: 1.5, options: [.CurveEaseOut, .TransitionFlipFromBottom], animations: {  

  2.     self.ipadContainerView.addSubview(self.ipadView)  

  3. }, completion: nil)  

  4.   

  5. UIView.transitionWithView(self.iphoneContainerView, duration: 1.5, options: [.CurveEaseOut, .TransitionFlipFromLeft], animations: {  

  6.     self.iphoneContainerView.addSubview(self.iphoneView)  

  7. }, completion: nil)  

  8.   

  9. UIView.transitionWithView(self.webContainerView, duration: 1.5, options: [.CurveEaseOut, .TransitionFlipFromRight], animations: {  

  10.     self.webContainerView.addSubview(self.webView)  

  11. }, completion: nil)  

  12.   

  13. UIView.transitionWithView(textContainerView, duration: 2, options: [.CurveEaseOut, .TransitionCrossDissolve], animations: {  

  14.     self.textContainerView.addSubview(self.textView)  

  15. }, completion: nil)  

經過上述代碼能夠看出，咱們對四個容器視圖分別添加了過渡轉變更畫，而且options參數使用了.CurveEaseOut和不一樣的過渡轉變更畫選項。編譯運行看看效果：

                                        

是否是有點兒意思！不過細心的朋友應該發現了，過渡轉變更畫的方法沒有delay這個頗有用的屬性，這就致使過渡轉變更畫都是同時發生，不能設置延遲時間。不過咱們能夠曲線救國，本身寫一個delay方法：

[cpp] view plaincopy

  1. func delay(seconds: Double, completion:()->()) {  

  2.     let popTime = dispatch_time(DISPATCH_TIME_NOW, Int64( Double(NSEC_PER_SEC) * seconds ))  

  3.     dispatch_after(popTime, dispatch_get_main_queue()) {  

  4.         completion()  

  5.     }  

  6. }  

而後咱們修改viewDidLoad()方法中的代碼以下：

[cpp] view plaincopy

  1. delay(0, completion: {  

  2.    UIView.transitionWithView(self.ipadContainerView, duration: 1.5, options: [.CurveEaseOut, .TransitionFlipFromBottom], animations: {  

  3.        self.ipadContainerView.addSubview(self.ipadView)  

  4.    }, completion: nil)  

  5. })  

  6.   

  7. delay(1, completion: {  

  8.             UIView.transitionWithView(self.iphoneContainerView, duration: 1.5, options: [.CurveEaseOut, .TransitionFlipFromLeft], animations: {  

  9.                 self.iphoneContainerView.addSubview(self.iphoneView)  

  10.                 }, completion: nil)  

  11.  })  

  12.           

  13. delay(2, completion: {  

  14.             UIView.transitionWithView(self.webContainerView, duration: 1.5, options: [.CurveEaseOut, .TransitionFlipFromRight], animations: {  

  15.                 self.webContainerView.addSubview(self.webView)  

  16.                 }, completion: nil)  

  17. })  

  18.   

  19. delay(3, completion: {  

  20.             UIView.transitionWithView(self.textContainerView, duration: 2, options: [.CurveEaseOut, .TransitionCrossDissolve], animations: {  

  21.                 self.textContainerView.addSubview(self.textView)  

  22.                 }, completion: nil)  

  23.  })  

咱們將每一個過渡轉變更畫延遲1秒進行，編譯運行看看效果：

                                        

如今的效果是否是更好了呢！ : ]

移除視圖

過渡轉變更畫一樣能夠用來移除視圖。咱們在屏幕底部添加一個UIButton，當點擊這個按鈕的時候，經過過渡轉變更畫移除按鈕上方的那兩排字，而且改變屏幕背景色。go()方法是按鈕鏈接在代碼中的Touch Up Inside方法，在該方法中添加以下代碼：

[cpp] view plaincopy

  1. UIView.animateWithDuration(0.5, animations: {  

  2.             self.view.backgroundColor = UIColor(red: 252.0/255.0, green: 155.0/255.0, blue: 65.0/255.0, alpha: 1)  

  3. })  

編譯運行看看效果：

                                        

替換視圖

在這一節咱們將要學習過渡轉變更畫的另外一個方法，替換視圖方法。我設計的場景是當點擊Go按鈕後，除了上一節中的動畫效果之外，iPad、iPhone、Web視圖也會移位而且替換爲別的視圖，咱們繼續在go()方法中的添加以下代碼：

[cpp] view plaincopy

  1. UIView.animateWithDuration(1, delay: 0, options: [], animations: {  

  2.      self.iphoneView.frame = CGRectMake(0, 0, 334, 72)  

  3.      self.iphoneContainerView.frame = CGRectMake(26, 130, 334, 72)  

  4.   }, completion: {  

  5.         (flag: Bool) in  

  6.                 if flag {  

  7.                         UIView.transitionFromView(self.iphoneContainerView, toView: self.supportIphone, duration: 0.33, options: .TransitionCrossDissolve, completion: nil)  

  8.                 }  

  9.  })  

  10.           

  11. UIView.animateWithDuration(1, delay: 1, options: [], animations: {  

  12.     self.ipadView.frame = CGRectMake(0, 0, 334, 72)  

  13.     self.ipadContainerView.frame = CGRectMake(26, 242, 334, 72)  

  14.   }, completion: {  

  15.         (flag: Bool) in  

  16.                 if flag {  

  17.                         UIView.transitionFromView(self.ipadContainerView, toView: self.supportIpad, duration: 0.33, options: .TransitionCrossDissolve, completion: nil)  

  18.                 }  

  19. })  

  20.           

  21. UIView.animateWithDuration(1, delay: 2, options: [], animations: {  

  22.     self.webView.frame = CGRectMake(0, 0, 334, 72)  

  23.     self.webContainerView.frame = CGRectMake(26, 354, 334, 72)  

  24. }, completion: {  

  25.         (flag: Bool) in  

  26.                 if flag {  

  27.                         UIView.transitionFromView(self.webContainerView, toView: self.supportWeb, duration: 0.33, options: .TransitionCrossDissolve, completion: nil)  

  28.                 }  

  29. })  

咱們來解釋一下上述的代碼，拿iPhone視圖爲例，首先經過動畫屬性動畫改變它的尺寸大小和位置。而後在completion閉包中添加替換視圖方法，該方法有五個參數：

  • fromView：被替換的視圖。

  • toView：替換以後的視圖。

  • duration：動畫持續時間。

  • options：動畫選項。

  • completion：動畫執行結束後執行該閉包中的代碼。

要注意的是該方法的做用視圖能夠是容器視圖，也能夠是目標視圖。編譯運行看看效果：

                                        

顯示/隱藏視圖

過渡轉變更畫也能夠用於顯示或隱藏視圖，這裏給出僞代碼供參考：

[cpp] view plaincopy

  1. UIView.transitionWithView(self.someContainerView, duration: 1.5, options: [.CurveEaseOut, .TransitionFlipFromBottom], animations: {  

  2.     self.someView.hidden = true  

  3.     // self.someView.hidden = false  

  4. }, completion: nil)  

結束語

過渡轉變更畫有不少動畫選項，你們能夠自行試試，找出本身喜歡的或最合適的過渡轉變更畫選項，而且能夠嘗試過渡轉變更畫和屬性動畫的組合，可使大家的App更加有趣。好了今天就到這裏。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程