iOS動畫編程-View動畫[ 1 ] 基礎View動畫

iOS中的動畫

iOS系統中的應用大多都靈活運用了各類各樣的動畫來讓本身的應用變的豐富多彩，一個App對動畫的運用直接影響了用戶體驗，學習iOS動畫編程是很是有用的

基礎View動畫

UIView中提供了最基礎的動畫
這裏來演示一下最基礎的幾個

UIView.animateWithDuration(_:, animations:)
UIView.animateWithDuration(_:, animations:, completion:)
UIView.animateWithDuration(_:, delay:, options:, animations:, completion:)

這裏來介紹一下各個參數的意義

1. duration: The duration of the animation.
   動畫執行的時間

2. delay: The amount of seconds UIKit will wait before it starts the animation.
   動畫開始前的延遲時間

3. options: A set of animation options allowing you to customize a number of aspects about your animation.
   一個數組，內容是動畫執行的選項，能夠爲空數組

4. animations: The closure expression to provide your animations.
   一個閉包，內容是具體要執行的動畫

5. completion: A code closure to execute when the animation
   completes; this parameter often comes in handy when you want to perform some final cleanup tasks or chain animations one after the other.
   一個可選閉包，內容是完成動畫後要執行的代碼

可動畫改變的屬性

1. 位置與大小

   • bounds: 改變控件的大小等

   • frame: 經過改變frame能夠對控件進行縮放

   • center: 控件的中心，能夠經過改變這個屬性給控件一個新的位置

2. 外觀
   － backgroundColor: 背景顏色
   － alpha: 透明度

3. 變形

   • transform: 在動畫閉包中改變這個屬性能夠實現旋轉、縮放、改變位置等功能

Animation options

動畫選項數組中能夠放入的內容，能夠實現的功能有
1.重複

• Repeat:不斷重複動畫

• Autoreverse:與Repeat配合使用，正序、逆序重複動畫

UIView.animateWithDuration(0.5, delay: 0.4, options: [.Repeat, .Autoreverse], animations: {
self.password.center.x += self.view.bounds.width }, completion: nil)

2.Animation easing

• .Linear: 線性動畫，動畫的速度是勻速的

• .CurveEaseIn: 動畫開始的時候速度慢，逐漸變快

• .CurveEaseOut: 動畫開始的時候速度快，逐漸變慢

• .CurveEaseInOut: 開始結尾速度慢，中間速度快

UIView.animateWithDuration(0.5, delay: 0.4,
options: [.Repeat, .Autoreverse, .CurveEaseOut], animations: {
      self.password.center.x += self.view.bounds.width }, completion: nil)

Demo

這裏有一個普通的登錄界面，並無什麼特別之處

如今咱們來給這個界面增長特效

Duang~控件飛入視圖

首先實現控件從左側飛入界面

控件我以前已經作好了連線，在viewWillAppear方法中將它們移除視圖

override func viewWillAppear(animated: Bool) {
    super.viewWillAppear(animated)
    heading.center.x -= view.bounds.width
    username.center.x -= view.bounds.width
    password.center.x -= view.bounds.width
  }

飛入視圖的動畫

override func viewDidAppear(animated: Bool) {
    super.viewDidAppear(animated)
    //參數爲動畫的運行時間
    UIView.animateWithDuration(0.5) { () -> Void in
        self.heading.center.x += self.view.bounds.width
    }
    //參數爲動畫的運行時間、延時、動畫選項、完成後的動做
    //經過延時實現幾個控件不一樣時間飛入
    UIView.animateWithDuration(0.5, delay: 0.3, options: UIViewAnimationOptions.CurveEaseOut, animations: { () -> Void in
        self.username.center.x += self.view.bounds.width
        }, completion: nil)
    UIView.animateWithDuration(0.5, delay: 0.6, options: UIViewAnimationOptions.CurveEaseOut, animations: { () -> Void in
        self.password.center.x += self.view.bounds.width
        }, completion: nil)
  }

效果

完整代碼

import UIKit
import QuartzCore

//
// Util delay function
//
func delay(#seconds: Double, completion:()->()) {
  let popTime = dispatch_time(DISPATCH_TIME_NOW, Int64( Double(NSEC_PER_SEC) * seconds ))
  
  dispatch_after(popTime, dispatch_get_main_queue()) {
    completion()
  }
}

class ViewController: UIViewController {
  
  // MARK: ui outlets
  
  @IBOutlet var loginButton: UIButton!
  @IBOutlet var heading: UILabel!
  @IBOutlet var username: UITextField!
  @IBOutlet var password: UITextField!
  
  @IBOutlet var cloud1: UIImageView!
  @IBOutlet var cloud2: UIImageView!
  @IBOutlet var cloud3: UIImageView!
  @IBOutlet var cloud4: UIImageView!
  
  // MARK: further ui
  
  let spinner = UIActivityIndicatorView(activityIndicatorStyle: .WhiteLarge)
  
  let status = UIImageView(image: UIImage(named: "banner"))
  let label = UILabel()
  let messages = ["Connecting ...", "Authorization ...", "Sending credentials ...", "Failed"]
  
  // MARK: view controller lifecycle
  
  override func viewDidLoad() {
    super.viewDidLoad()
    
    loginButton.layer.cornerRadius = 8.0
    loginButton.layer.masksToBounds = true
    
    //add the button spinner
    spinner.frame = CGRect(x: -20, y: 6, width: 20, height: 20)
    spinner.startAnimating()
    spinner.alpha = 0.0
    loginButton.addSubview(spinner)
    
    //add the status banner
    status.hidden = true
    status.center = loginButton.center
    view.addSubview(status)
    
    //add the status label
    label.frame = CGRect(x: 0, y: 0, width: status.frame.size.width, height: status.frame.size.height)
    label.font = UIFont(name: "HelveticaNeue", size: 18.0)
    label.textColor = UIColor(red: 228.0/255.0, green: 98.0/255.0, blue: 0.0, alpha: 1.0)
    label.textAlignment = .Center
    status.addSubview(label)
  }
  
  override func viewWillAppear(animated: Bool) {
    super.viewWillAppear(animated)
    
    heading.center.x -= view.bounds.width
    username.center.x -= view.bounds.width
    password.center.x -= view.bounds.width
    
    loginButton.center.y += view.bounds.height
  }
  
  override func viewDidAppear(animated: Bool) {
    super.viewDidAppear(animated)
    
    UIView.animateWithDuration(0.5, delay: 0.0, options: UIViewAnimationOptions.CurveEaseOut, animations: {
      self.heading.center.x += self.view.bounds.width
      
      }, completion: nil)
    
    UIView.animateWithDuration(0.5, delay: 0.3, options: .CurveEaseOut, animations: {
      self.username.center.x += self.view.bounds.width
      }, completion: nil)
    
    UIView.animateWithDuration(0.5, delay: 0.4, options: .CurveEaseOut, animations: {
      self.password.center.x += self.view.bounds.width
      }, completion: nil)
    
    UIView.animateWithDuration(0.75, delay: 0.5, options: .CurveEaseOut, animations: {
      self.loginButton.center.y -= self.view.bounds.height
      }, completion: nil)
    
  }
  
  @IBAction func login() {
    
  }
  
}