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