我們先來看一下今天我們要實現(xiàn)的效果，今天實現(xiàn)的效果用第一篇View Animations能實現(xiàn)相同效果。

哦～先來看一下Layer是什么吧：

比較通俗的來說，CALayer就是UIView的視圖層，你所看到的UIView，其實是UIView的layer。這么說吧，CALayer就是樹葉的葉綠素，和葉綠素不同的就是，CALayer更加的“單純”，我們知道葉綠素是包括很多基質的，而CALayer僅僅是代表了你能看到的一切。

我們今天把所有的重點都放在動畫的編寫上，默認有swift基礎 如果你觀察都仔細的話，你會發(fā)現(xiàn)，背景上的云是漸入的，也就是透明度由0到1，當然這個用我們前面學的UIViewAnimation是很容易實現(xiàn)的，那么用CALayer如何實現(xiàn)呢，看下面的代碼：

    //1    let fadeIn = CABasicAnimation(keyPath: "opacity")    //2    fadeIn.fromValue = 0.0    //3    fadeIn.toValue = 1.0    //4    fadeIn.duration = 0.5    //5    fadeIn.fillMode = kCAFillModeBackwards    //6    fadeIn.beginTime = CACurrentMediaTime() + 0.5    cloud1.layer.addAnimation(fadeIn, forKey: nil)    fadeIn.beginTime = CACurrentMediaTime() + 0.7    cloud2.layer.addAnimation(fadeIn, forKey: nil)    fadeIn.beginTime = CACurrentMediaTime() + 0.9    cloud3.layer.addAnimation(fadeIn, forKey: nil)    fadeIn.beginTime = CACurrentMediaTime() + 1.1    cloud4.layer.addAnimation(fadeIn, forKey: nil)

很明顯我們是給四朵云的layer添加了動畫，然后實現(xiàn)了漸入的效果。

• 1、這句話聲明了一個 CABasicAnimation，注意到里面填寫的參數(shù)沒，填的是 opacity，就是透明度的意思，這里頭還能填寫很多其他值，比如position，當然這些我們后面都會講的。
• 2、我們對動畫的初始值進行設定，也就是透明度最開始為0.
• 3、我們對動畫的最終值進行設定，也就是透明度為1。
• 4、動畫持續(xù)時間，我們設定為0.5秒。和前面三句合起來，就表達了這么一個意思：這個動畫是對對象的透明度進行改變，在0.5秒內，透明度從0變化為1.
• 5、我們給fillMode屬性填的值是kCAFillModeBackwards，那么kCAFillModeBackwards這個值有什么用呢，這個屬性可以顯示對象的frame，我們可以把這一句注釋以后運行程序來看一下效果，我們會發(fā)現(xiàn)，在進行動畫之前，云朵任然可見，而這顯然是一個BUG，如何解決這個BUG呢，其實方法很多，比如我們可以講云朵的透明度都設置為0，然后計算好動畫時間，當動畫結束以后將云朵的透明度設置為1，這樣做當然可以實現(xiàn)相同的效果，但是這樣做實在是～～～～太不優(yōu)雅了，還有一種做法就是添加fillMode屬性，kCAFillModeBackwards的意思是顯示動畫的初始狀態(tài)，同時還有其他兩個值kCAFillModeForwards可以顯示對象動畫之后的效果，kCAFillModeBoth則是兼顧以上兩個效果。
• 6、這個屬性很好解釋，每一朵云朵的動畫并不是同時進行的，那么我們就給云朵設定開始的時間，這個屬性和我們前面說過的UIViewAnimation的delay這個參數(shù)比較類似。

以上內容實現(xiàn)了云朵的漸入動畫。

如果對我已經(jīng)說過好幾遍的UIViewAniamtion有疑問的話，請自行閱讀本人前面的文章，覺得不錯的話請關注本人，再點一個喜歡吧，親～～

接下來實現(xiàn)的是標題、Username、PassWord有screen外由左向右移動到屏幕中心的動畫，直接上代碼：

   //1    let flyRight = CABasicAnimation(keyPath: "position.x")    flyRight.toValue = view.bounds.size.width/2    flyRight.fromValue = -view.bounds.size.width/2    flyRight.duration = 0.5    heading.layer.addAnimation(flyRight, forKey: nil)    //2    flyRight.beginTime = CACurrentMediaTime() + 0.3    flyRight.fillMode = kCAFillModeBackwards    username.layer.addAnimation(flyRight, forKey: nil)   flyRight.beginTime = CACurrentMediaTime() + 0.4   password.layer.addAnimation(flyRight, forKey: nil)

• //1 通過對云朵動畫的講解，相信其實我們已經(jīng)能夠大致看懂這一段代碼了，和上面唯一不同的就是，我們這里創(chuàng)建的CABasicAnimation的動畫對象為"position.x"，fromvalue和toVaule相信也不用進行太多講解，值得一題的是我們的值指的是對象的center.x，而不是左上角。
• //2 對username延遲0.3秒進行。同時同樣設定 flyRight.fillMode = kCAFillModeBackwards

是不是很簡單呢，是的～

Log in 按鈕的動畫，上代碼：

UIView.animateWithDuration(0.5, delay: 0.5, usingSPRingWithDamping: 0.5, initialSpringVelocity: 0.0, options: nil, animations: {        self.loginButton.center.y -= 30.0        self.loginButton.alpha = 1.0    }, completion: nil)

對于這一段代碼的解釋在這里，說的十分詳細，作者也長得很帥，看頭像就看得出來：http://www.jianshu.com/p/bd7bf438b288喜歡的話請關注他。

我們還發(fā)現(xiàn)云朵是不斷的移動的，繼續(xù)上代碼：

 func animateCloud(cloud: UIImageView) {    let cloudSpeed = 60.0 / view.frame.size.width    let duration = (view.frame.size.width - cloud.frame.origin.x) * cloudSpeed    UIView.animateWithDuration(NSTimeInterval(duration), delay: 0.0, options: .CurveLinear, animations: {      cloud.frame.origin.x = self.view.frame.size.width    }, completion: {_ in      cloud.frame.origin.x = -cloud.frame.size.width      self.animateCloud(cloud)    })  }

> 解釋請參考Log in按鈕的解釋。-------------先就只剩下點擊**Log in**按鈕以后的動畫了，我們先來看一下發(fā)生什么了，當我們點擊按鈕以后，按鈕duang～的一下蹦到下面了，同時顏色變了，圓角變大了，然后添加了一個活動指示器。 上代碼：

@IBAction func login() {    //1    UIView.animateWithDuration(1.5, delay: 0.0, usingSpringWithDamping: 0.2, initialSpringVelocity: 0.0, options: nil, animations: {      self.loginButton.bounds.size.width += 80.0    }, completion: nil)    //2    UIView.animateWithDuration(0.33, delay: 0.0, usingSpringWithDamping: 0.7, initialSpringVelocity: 0.0, options: nil, animations: {      self.loginButton.center.y += 60.0    //3      self.spinner.center = CGPoint(x: 40.0, y: self.loginButton.frame.size.height/2)      self.spinner.alpha = 1.0    }, completion: {_ in    //4      self.showMessage(index: 0)    })    //5    let tintColor = UIColor(red: 0.85, green: 0.83, blue: 0.45, alpha: 1.0)    tintBackgroundColor(layer: loginButton.layer, toColor: tintColor)    //6    roundCorners(layer: loginButton.layer, toRadius: 25.0)  }

這一段就厲害了，因為這一段特別的長。

• 1、duang～的一下按鈕變長了。
• 2、duang～的一下按鈕下移了。
• 3、添加活動指示器。
• 4、添加message這個后面再說。
• 5、調用tintBackgroundColor方法，改變顏色，這是tintBackgroundColor方法的代碼：

  func tintBackgroundColor(#layer: CALayer, #toColor: UIColor) { let tint = CABasicAnimation(keyPath: "backgroundColor") tint.fromValue = layer.backgroundColor layer.backgroundColor = toColor.CGColor tint.toValue = toColor.CGColor tint.duration = 1.0 tint.fillMode = kCAFillModeBoth layer.addAnimation(tint, forKey: nil) }

  其實這個方法和前面的CABasicgroundColor大體是相同的，我們先把顏色改變成我們需要變成的顏色，然后執(zhí)行動畫。
• 6、增大圓角的動畫

  func roundCorners(#layer: CALayer, #toRadius: CGFloat) { let round = CABasicAnimation(keyPath: "cornerRadius") round.fromValue = layer.cornerRadius layer.cornerRadius = toRadius round.toValue = toRadius round.duration = 0.33 layer.addAnimation(round, forKey: nil) }

  這個實現(xiàn)的方法大體是上面改變顏色的思想是一模一樣的。也是先改變圓角，然后執(zhí)行動畫，最后顯示的會是你一開始設定的圓角。

現(xiàn)在整個動畫就只剩下了那個message的動畫，和message的動畫結束以后，Log in按鈕彈回的動畫，而Log in按鈕彈回的動畫和前面剛說過的按鈕彈下是一模一樣的，只是相反而已。我們來看一下message的動畫：

func removeMessage(#index: Int) {    UIView.animateWithDuration(0.33, delay: 0.0, options: nil, animations: {      self.status.center.x += self.view.frame.size.width    }, completion: {_ in      self.status.hidden = true      self.status.center = self.statusPosition      self.showMessage(index: index+1)    })  }  func resetForm() {    UIView.transitionWithView(status, duration: 0.2, options: .TransitionFlipFromTop, animations: {      self.status.hidden = true      self.status.center = self.statusPosition    }, completion: nil)    UIView.animateWithDuration(0.2, delay: 0.0, options: nil, animations: {      self.spinner.center = CGPoint(x: -20.0, y: 16.0)      self.spinner.alpha = 0.0      self.loginButton.bounds.size.width -= 80.0      self.loginButton.center.y -= 60.0    }, completion: {_ in      let tintColor = UIColor(red: 0.63, green: 0.84, blue: 0.35, alpha: 1.0)      tintBackgroundColor(layer: self.loginButton.layer, toColor: tintColor)      roundCorners(layer: self.loginButton.layer, toRadius: 10.0)    })  }