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() {
    
  }
  
}