iOS UIView動畫詳解

iOS UIView動畫詳解

現在的iOS開發中，有很多的動畫架構可以使用，包括蘋果內建的CoreAnimation架構，Facebook的Pop等等，這些的確都是程式員的利器。但是如果我們僅僅是想要實現一些比較簡單的動畫呢？殺雞焉用牛刀。我們直接用UIView就可以了。今天我們就來好好聊聊UIView動畫，使用Swift編寫（大家可以看到我有時候用OC，有時候用Swift，現在的iOS學習的基本技能看著OC代碼能寫出Swift，照著Swift能寫出OC，哈哈）。本範例程式碼上傳至 https://github.com/chenyufeng1991/iOS-UIView-Animation 。

這裡方法的調用中常常會用到Swift中的閉包closure，類似於OC中的塊block。我簡單解釋一下：閉包是作為一個函數的某個參數出現的，但是在這個參數裡面可以執行一些語句，執行一定的邏輯。你可以把閉包理解為一個匿名函數。

 

()->Void:表示參數為空白，傳回值為Void，必須要實現這個閉包函數；((Bool) -> Void)?：表示參數為Bool類型，傳回值為Void，後面的？表示這個閉包函數可以為空白；

 

（1）位置動畫

PositionAnimation可以實現View的移動，最簡單的就是X軸，Y軸的移動。這裡實現幾個小方塊的移動。

 

import UIKitclass PositionViewController: UIViewController {      @IBOutlet weak var greenSquare: UIView!  @IBOutlet weak var redSquare: UIView!  @IBOutlet weak var blueSquare: UIView!    override func viewDidLoad() {    super.viewDidLoad()      }    override func viewDidAppear(animated: Bool) {            //閉包函數的定義；    //注意調用動畫的方法中的animations,completion使用的都是閉包函數；可以直接在外面定義，裡面調用，這樣代碼更加清晰；    //這裡的閉包需要傳入的參數是一個BOOl值；傳回值為空白；    //這個是動畫執行完成後的回調；    func completeGreen(v:Bool){      print(Green Completion)    }        func completeRed(v:Bool){      print(Red Completion)    }        func completeBlue(v:Bool){      print(Blue Completion)    }        //這裡的閉包參數為空白；    func animGreen(){      self.greenSquare.center.x = self.view.bounds.width - self.greenSquare.center.x    }        func animRed(){      self.redSquare.center.y = self.view.bounds.height - self.redSquare.center.y    }        func animBlue(){      self.blueSquare.center.y = self.view.bounds.height - self.blueSquare.center.y      self.blueSquare.center.x = self.view.bounds.width - self.blueSquare.center.x    }            //參數delay表示延遲，第一個參數表示動畫時間；    //注意調用閉包函數；    UIView.animateWithDuration(1, delay: 0, options: [], animations: animGreen, completion: completeGreen)    UIView.animateWithDuration(1, delay: 0.5, options: [], animations: animRed, completion: completeRed)    UIView.animateWithDuration(1, delay: 1, options: [], animations: animBlue, completion: completeBlue)       }}

 

（2）透明度動畫

透明度動畫可以讓某個View的透明度在0~1之間改變。透明度為1表示全透明，看不見了。透明度為1表示和正常情況下一樣。

 

import UIKitclass OpacityViewController: UIViewController {    @IBOutlet weak var greenSquare: UIView!      override func viewDidLoad() {        super.viewDidLoad()    }      override func viewDidAppear(animated: Bool) {        super.viewDidAppear(animated)              func anim(){            self.greenSquare.alpha = 0.2   //改變透明度到0.2        }        UIView.animateWithDuration(2, animations: anim)//時常為2s；    }  }

（3）縮放動畫

 

縮放動畫可以讓一個View的大小發生改變，按比例的放大縮小。

 

import UIKitclass ScaleViewController: UIViewController {        @IBOutlet weak var greenSquare: UIView!        override func viewDidLoad() {        super.viewDidLoad()    }        override func viewDidAppear(animated: Bool) {        super.viewDidAppear(animated)                func anim(){            self.greenSquare.transform = CGAffineTransformMakeScale(0.5, 0.5)//縮小為原來的0.5倍；        }        UIView.animateWithDuration(1, animations: anim)    }}

（4）顏色動畫

 

顏色動畫可以讓一個View在一個時間間隔內發生顏色的漸層，進行顏色的過渡。

 

import UIKitclass ColorViewController: UIViewController {    @IBOutlet weak var greenSquare: UIView!    @IBOutlet weak var swiftText: UILabel!      override func viewDidLoad() {        super.viewDidLoad()    }    override func viewDidAppear(animated: Bool) {        super.viewDidAppear(animated)                func anim(){            self.greenSquare.backgroundColor = UIColor.blackColor()            self.swiftText.textColor = UIColor.blueColor()        }        UIView.animateWithDuration(2, animations: anim)    }  }

（5）旋轉動畫

 

可以讓某個View繞圓點進行旋轉。

 

import UIKitclass RotationViewController: UIViewController {    @IBOutlet weak var wheel: UIImageView!      override func viewDidLoad() {        super.viewDidLoad()    }        func spin(){        UIView.animateWithDuration(1, delay: 0, options: .CurveLinear, animations: {            self.wheel.transform = CGAffineTransformRotate(self.wheel.transform, CGFloat(360))//第二個參數是角度；            }) {                //結束後仍舊調用spin()函數；                (finished)-> Void in                self.spin()        }            }//spin()        override func viewDidAppear(animated: Bool) {        super.viewDidAppear(animated)                self.spin()    }}

（6）重複動畫

 

該動畫可以讓某個動畫過程反覆執行。

 

import UIKit//重複動畫；class RepeatViewController: UIViewController {    @IBOutlet weak var blueSquare: UIView!  @IBOutlet weak var redSquare: UIView!  @IBOutlet weak var greenSquare: UIView!    override func viewDidLoad() {    super.viewDidLoad()      }    override func viewDidAppear(animated: Bool) {    super.viewDidAppear(animated);        UIView.animateWithDuration(1) { () -> Void in      self.blueSquare.center.x = self.view.bounds.width - self.blueSquare.center.x    }        UIView.animateWithDuration(1, delay: 0, options: UIViewAnimationOptions.Repeat, animations: { () -> Void in      self.redSquare.center.x = self.view.bounds.width - self.redSquare.center.x;      }, completion: nil)            //注意這裡options的運算式；    UIView.animateWithDuration(1, delay: 0, options:[UIViewAnimationOptions.Repeat ,UIViewAnimationOptions.Autoreverse], animations: { () -> Void in      self.greenSquare.center.x = self.view.bounds.width - self.greenSquare.center.x;      }, completion: nil)      }    }

（7）緩衝動畫

 

這裡主要使用了beisaier曲線的效果來改變View動畫的速率效果。大家可以實踐一下。

 

import UIKitclass EasingViewController: UIViewController {      @IBOutlet weak var blueSquare: UIView!  @IBOutlet weak var redSquare: UIView!  @IBOutlet weak var greenSquare: UIView!    @IBOutlet weak var yellowSquare: UIView!      override func viewDidLoad() {    super.viewDidLoad()      }    override func viewDidAppear(animated: Bool) {    super.viewDidAppear(animated);        UIView.animateWithDuration(1) { () -> Void in            self.blueSquare.center.x = self.view.bounds.width - self.blueSquare.center.x    }        UIView.animateWithDuration(1, delay: 0, options: UIViewAnimationOptions.CurveEaseIn, animations: { () -> Void in      self.redSquare.center.x = self.view.bounds.width - self.redSquare.center.x      }, completion: nil)        UIView.animateWithDuration(1, delay: 0, options: UIViewAnimationOptions.CurveEaseOut, animations: { () -> Void in      self.greenSquare.center.x = self.view.bounds.width - self.greenSquare.center.x      }, completion: nil)        UIView.animateWithDuration(1, delay: 0, options: UIViewAnimationOptions.CurveEaseInOut, animations: { () -> Void in      self.yellowSquare.center.x = self.view.bounds.width - self.yellowSquare.center.x      }, completion: nil)      }  }

（8）彈簧動畫

 

該動畫執行過程中類似彈簧的真實效果，你可以設定彈簧的阻尼和初始速度來達到非常逼真的彈簧抖動。

 

import UIKitclass SpringViewController: UIViewController {    @IBOutlet weak var blueSquare: UIView!  @IBOutlet weak var redSquare: UIView!  @IBOutlet weak var greenSquare: UIView!    override func viewDidLoad() {    super.viewDidLoad()      }      override func viewDidAppear(animated: Bool) {        UIView.animateWithDuration(1) { () -> Void in      self.blueSquare.center.x = self.view.bounds.width - self.blueSquare.center.x;    }        //第三個參數是阻尼，第四個參數是初始速度；第五個參數是動畫類型；    UIView.animateWithDuration(1, delay: 0, usingSpringWithDamping: 0.2, initialSpringVelocity: 0, options: UIViewAnimationOptions.TransitionNone, animations: { () -> Void in      self.redSquare.center.x = self.view.bounds.width - self.redSquare.center.x;      }) { (Bool) -> Void in    }        UIView.animateWithDuration(1, delay: 0, usingSpringWithDamping: 0.2, initialSpringVelocity: 1, options: UIViewAnimationOptions.TransitionNone, animations: { () -> Void in      self.greenSquare.center.x = self.view.bounds.width - self.greenSquare.center.x;      }) { (Bool) -> Void in    }      }  }

這裡實現的動畫都是非常的簡單，大家可以通過下載代碼自己嘗試一下。後續我會給大家講解更為進階炫酷的動畫。盡請期待。