Layer Animations與我們前面第一篇講過的View Animation有點(diǎn)類似啸盏，但是Layer Animation比之多了很多效果猫胁，更加強(qiáng)大维咸。
我們先來看一下今天我們要實(shí)現(xiàn)的效果渠啤，今天實(shí)現(xiàn)的效果用第一篇View Animations能實(shí)現(xiàn)相同效果狐肢。
- 本文所講為實(shí)現(xiàn)此動畫的相關(guān)知識。
哦～先來看一下Layer是什么吧：
比較通俗的來說处坪，CALayer就是UIView的視圖層，你所看到的UIView架专，其實(shí)是UIView的layer同窘。這么說吧，CALayer就是樹葉的葉綠素部脚，和葉綠素不同的就是想邦，CALayer更加的“單純”，我們知道葉綠素是包括很多基質(zhì)的委刘，而CALayer僅僅是代表了你能看到的一切丧没。
我們今天把所有的重點(diǎn)都放在動畫的編寫上，默認(rèn)有swift基礎(chǔ)
如果你觀察都仔細(xì)的話锡移，你會發(fā)現(xiàn)呕童，背景上的云是漸入的，也就是透明度由0到1淆珊，當(dāng)然這個用我們前面學(xué)的UIViewAnimation是很容易實(shí)現(xiàn)的夺饲，那么用CALayer如何實(shí)現(xiàn)呢，看下面的代碼：
<pre><code>
//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)
</code></pre>
很明顯我們是給四朵云的layer添加了動畫施符，然后實(shí)現(xiàn)了漸入的效果往声。
- 1、這句話聲明了一個** CABasicAnimation戳吝，注意到里面填寫的參數(shù)沒浩销，填的是 opacity，就是透明度的意思听哭，這里頭還能填寫很多其他值慢洋，比如position**塘雳，當(dāng)然這些我們后面都會講的。
- 2普筹、我們對動畫的初始值進(jìn)行設(shè)定粉捻，也就是透明度最開始為0.
- 3、我們對動畫的最終值進(jìn)行設(shè)定斑芜，也就是透明度為1肩刃。
- 4、動畫持續(xù)時間杏头，我們設(shè)定為0.5秒盈包。和前面三句合起來，就表達(dá)了這么一個意思：這個動畫是對對象的透明度進(jìn)行改變醇王，在0.5秒內(nèi)呢燥，透明度從0變化為1.
- 5、我們給fillMode屬性填的值是kCAFillModeBackwards寓娩，那么kCAFillModeBackwards這個值有什么用呢叛氨，這個屬性可以顯示對象的frame，我們可以把這一句注釋以后運(yùn)行程序來看一下效果棘伴，我們會發(fā)現(xiàn)寞埠，在進(jìn)行動畫之前，云朵任然可見焊夸，而這顯然是一個BUG仁连，如何解決這個BUG呢，其實(shí)方法很多阱穗，比如我們可以講云朵的透明度都設(shè)置為0饭冬，然后計算好動畫時間，當(dāng)動畫結(jié)束以后將云朵的透明度設(shè)置為1揪阶，這樣做當(dāng)然可以實(shí)現(xiàn)相同的效果昌抠，但是這樣做實(shí)在是～～～～太不優(yōu)雅了，還有一種做法就是添加fillMode屬性鲁僚，kCAFillModeBackwards的意思是顯示動畫的初始狀態(tài)炊苫，同時還有其他兩個值kCAFillModeForwards可以顯示對象動畫之后的效果，kCAFillModeBoth則是兼顧以上兩個效果蕴茴。
- 6劝评、這個屬性很好解釋姐直，每一朵云朵的動畫并不是同時進(jìn)行的倦淀，那么我們就給云朵設(shè)定開始的時間，這個屬性和我們前面說過的UIViewAnimation的delay這個參數(shù)比較類似声畏。
以上內(nèi)容實(shí)現(xiàn)了云朵的漸入動畫撞叽。
如果對我已經(jīng)說過好幾遍的UIViewAniamtion有疑問的話姻成，請自行閱讀本人前面的文章，覺得不錯的話請關(guān)注本人愿棋，再點(diǎn)一個喜歡吧科展，親～～
接下來實(shí)現(xiàn)的是標(biāo)題、Username糠雨、PassWord有screen外由左向右移動到屏幕中心的動畫才睹，直接上代碼：
<pre><code>
//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)
</code></pre>
- //1 通過對云朵動畫的講解，相信其實(shí)我們已經(jīng)能夠大致看懂這一段代碼了甘邀，和上面唯一不同的就是琅攘，我們這里創(chuàng)建的CABasicAnimation的動畫對象為"position.x"，fromvalue和toVaule相信也不用進(jìn)行太多講解松邪，值得一題的是我們的值指的是對象的center.x坞琴，而不是左上角。
- //2 對username延遲0.3秒進(jìn)行逗抑。同時同樣設(shè)定
flyRight.fillMode = kCAFillModeBackwards
是不是很簡單呢剧辐，是的～
Log in 按鈕的動畫，上代碼：
<pre><code>
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)
</code></pre>
對于這一段代碼的解釋在這里邮府，說的十分詳細(xì)荧关，作者也長得很帥，看頭像就看得出來：http://www.reibang.com/p/bd7bf438b288 喜歡的話請關(guān)注他褂傀。
我們還發(fā)現(xiàn)云朵是不斷的移動的羞酗，繼續(xù)上代碼：
<pre><code>
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)
})
}
</code></pre>
解釋請參考Log in按鈕的解釋。
先就只剩下點(diǎn)擊Log in按鈕以后的動畫了紊服，我們先來看一下發(fā)生什么了檀轨，當(dāng)我們點(diǎn)擊按鈕以后，按鈕duang～的一下蹦到下面了欺嗤，同時顏色變了参萄，圓角變大了，然后添加了一個活動指示器煎饼。
上代碼：
<pre><code>
@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)
}
</code></pre>
這一段就厲害了讹挎，因?yàn)檫@一段特別的長。
- 1吆玖、duang～的一下按鈕變長了筒溃。
- 2、duang～的一下按鈕下移了沾乘。
- 3怜奖、添加活動指示器。
- 4翅阵、添加message這個后面再說歪玲。
- 5迁央、調(diào)用tintBackgroundColor方法，改變顏色滥崩，這是tintBackgroundColor方法的代碼：
<pre><code>
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)
}
</code></pre>
其實(shí)這個方法和前面的CABasicgroundColor大體是相同的岖圈，我們先把顏色改變成我們需要變成的顏色，然后執(zhí)行動畫钙皮。 - 6蜂科、增大圓角的動畫
<pre><code>
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)
}
</code></pre>
這個實(shí)現(xiàn)的方法大體是上面改變顏色的思想是一模一樣的。也是先改變圓角短条，然后執(zhí)行動畫崇摄，最后顯示的會是你一開始設(shè)定的圓角。
現(xiàn)在整個動畫就只剩下了那個message的動畫慌烧，和message的動畫結(jié)束以后逐抑，Log in按鈕彈回的動畫，而Log in按鈕彈回的動畫和前面剛說過的按鈕彈下是一模一樣的屹蚊，只是相反而已厕氨。我們來看一下message的動畫：
<pre><code>
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)
})
}
</code></pre>
這一段代碼用的全部都是UIViewAnimation，就不做多解釋汹粤，還是比較好理解的命斧，若是不理解，請看我前面的寫過的文章嘱兼。
我應(yīng)該沒有落下什么了～～～
各位看官看到這里也是難為你們了国葬。若是有問題歡迎留言提問。
所有代碼已經(jīng)上傳github：https://github.com/superxlx/iOS_Animation_Test3
