demo：https://github.com/womendexinshijie/BahamaAirLoginScreenOC1
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?第2章：Springs
在前一章中程拭，您學(xué)習(xí)了如何創(chuàng)建UIKit的基本動(dòng)畫蔗坯，包括如何提供起始值和結(jié)束值隨著時(shí)間的UIKit剔蹋，自動(dòng)為你創(chuàng)建一個(gè)動(dòng)畫。
到目前為止欲主，你的動(dòng)畫一直是單方向的流體運(yùn)動(dòng)较木。當(dāng)你激活一個(gè)視圖的位置時(shí)载碌，它是一個(gè)從A點(diǎn)到B點(diǎn)的簡(jiǎn)單運(yùn)動(dòng)胁后，就像這樣：
在本章中，您將學(xué)習(xí)如何創(chuàng)建更復(fù)雜的動(dòng)畫琼娘，將視圖移動(dòng)到它們與Spring的連接上峭弟，如下所示：
如果你通過(guò)基本動(dòng)畫從A點(diǎn)到B點(diǎn)，在此基礎(chǔ)上加點(diǎn)彈性脱拼，動(dòng)畫的運(yùn)動(dòng)將遵循一個(gè)下面的紅色箭頭指示的路徑：
箭頭從A點(diǎn)到B點(diǎn)孟害，但是超過(guò)B點(diǎn)的一小部分，然后箭頭又返回B點(diǎn)另一側(cè)一點(diǎn)挪拟。這種來(lái)回?cái)[動(dòng)重復(fù)直到視圖在B點(diǎn)靜止為止。
這是一個(gè)很好的效果击你；它增加了一個(gè)活潑的玉组，真實(shí)的動(dòng)感，讓人切身的感受到你的動(dòng)畫丁侄。本章將向您展示如何使用此效果為用戶界面添加一點(diǎn)趣味性惯雳。
Spring animations彈性動(dòng)畫
您將繼續(xù)使用上一章的項(xiàng)目；如果您沒(méi)有完成第1章中的練習(xí)（包括第1章最后的挑戰(zhàn)）鸿摇，那么您也可以從第2章的資源文件夾中獲取啟動(dòng)項(xiàng)目并使用它開(kāi)始新的征程石景。
構(gòu)建和運(yùn)行你的項(xiàng)目；你應(yīng)該看到屏幕上的視圖（除了登錄按鈕）在應(yīng)用程序打開(kāi)時(shí)會(huì)有像這樣的動(dòng)畫效果：
您的任務(wù)是處理屏幕上的最后一個(gè)非動(dòng)畫元素：登錄按鈕。
打開(kāi)項(xiàng)目的視圖控制器ViewController潮孽，然后將下面的代碼添加到viewWillAppear() :方法內(nèi)的：
self.loginButton.center = CGPointMake(self.loginButton.center.x, self.loginButton.center.y + 30.0);
self.loginButton.alpha = 0.0;
正如前一章所做的那樣揪荣，在y軸上設(shè)置按鈕的起始位置稍低一點(diǎn)，并將其alpha值設(shè)置為零往史，使其開(kāi)始為不可見(jiàn)仗颈。
現(xiàn)在viewdidappear()添加以下代碼：
[UIView animateWithDuration:0.5 delay:0.5 usingSpringWithDamping:0.5 initialSpringVelocity:0.0 options:nil animations:^{
? ? ? ? self.loginButton.center = CGPointMake(self.loginButton.center.x, self.loginButton.center.y - 30.0);
? ? ? ? self.loginButton.alpha = 1.0;
? ? } completion:nil];
這段代碼有兩個(gè)要點(diǎn)。
首先椎例，您同時(shí)激活了兩個(gè)不同的屬性挨决！這比你想象的容易，對(duì)吧订歪？
其次脖祈，您第一次使用了一種新的動(dòng)畫方法：
animatewithduration（_:delay: usingSpringWithDamping: initialSpringVelocity: opti ons: animations: completion:）。說(shuō)方法的名字太快可能會(huì)傷害你的舌頭刷晋！??
上面的方法很像你在本書前一章所用的方法盖高，但是它有一些新的參數(shù)：
?usingspringwithdamping：控制阻尼量，或降低掏秩，當(dāng)動(dòng)畫接近它的最終狀態(tài)時(shí)使用到阻尼參數(shù)或舞。此參數(shù)接受0到1之間的值。值接近0蒙幻，創(chuàng)造一個(gè)活躍的動(dòng)畫映凳，而值接近1，將會(huì)展現(xiàn)一種僵硬的動(dòng)畫效果邮破。你可以把這個(gè)值看作彈簧的“剛度”诈豌。
?initialspringvelocity：控制動(dòng)畫的初始速度。將動(dòng)畫的初始速度的值設(shè)置為1抒和，預(yù)示著在一秒鐘內(nèi)(動(dòng)畫運(yùn)動(dòng)的持續(xù)時(shí)間duration：內(nèi))動(dòng)畫運(yùn)動(dòng)的總距離矫渔。所以值的大小會(huì)影響動(dòng)畫的初始速度的快慢（值越大。開(kāi)始時(shí)動(dòng)畫的速度越快摧莽，值越小庙洼，動(dòng)畫開(kāi)始時(shí)的速度越小镊辕；效果可以通過(guò)固定動(dòng)畫持續(xù)時(shí)間油够，改變此值來(lái)觀看）。（注釋：假設(shè)動(dòng)畫持續(xù)時(shí)間為1秒征懈，initialspringvelocity值為2石咬，說(shuō)明動(dòng)畫要在1秒內(nèi)運(yùn)動(dòng)2的距離，如果initialspringvelocity值為10卖哎，說(shuō)明動(dòng)畫在1秒內(nèi)要運(yùn)動(dòng)10的距離鬼悠，速度相較于2的時(shí)候删性，一定是快的）
構(gòu)建和運(yùn)行您的項(xiàng)目；檢查按鈕現(xiàn)在如何移動(dòng)：
因?yàn)槟愕膭?dòng)畫初始速度為0焕窝，中性阻尼為0.5蹬挺，動(dòng)畫看起來(lái)不是很搶眼。
你應(yīng)該通過(guò)嘗試一些不同的速度和阻尼值來(lái)修飾這個(gè)動(dòng)畫袜啃。
將持續(xù)時(shí)間改為3汗侵，阻尼降至0.1。這只是為了讓你觀察到動(dòng)畫在慢動(dòng)作中的變化群发，而不是正常的速度晰韵。
再次構(gòu)建和運(yùn)行您的項(xiàng)目；注意按鈕的不透明度如何隨著它的移動(dòng)而變化熟妓。這是因?yàn)镾pring行為影響了所有動(dòng)畫屬性雪猪；在這種情況下，這會(huì)影響按鈕的垂直位置和alpha值起愈。
現(xiàn)在initialspringvelocity值設(shè)為1.0只恨，建立并再次運(yùn)行你的項(xiàng)目：
你會(huì)注意到，按鈕彈起的最高點(diǎn)超過(guò)了密碼控件然后再回落到最終設(shè)置的位置抬虽；這是因?yàn)樗谶\(yùn)動(dòng)的開(kāi)始官觅，施加了更多的動(dòng)力，因而它需要更長(zhǎng)的時(shí)間才能安定下來(lái)阐污，回到它最終位置休涤。
圍繞阻尼和速度參數(shù)使用不同的值，直到您了解這些參數(shù)的變化如何影響動(dòng)畫的外觀和感覺(jué)為止笛辟。
測(cè)試完成后功氨，將速度和阻尼值設(shè)置為原來(lái)的值，像這樣：
[UIView animateWithDuration:0.5 delay:0.5 usingSpringWithDamping:0.5 initialSpringVelocity:0.0 options:nil animations:^{
? ? ? ? self.loginButton.center = CGPointMake(self.loginButton.center.x, self.loginButton.center.y - 30.0);
? ? ? ? self.loginButton.alpha = 1.0;
? ? } completion:nil];
動(dòng)畫的用戶交互
您不必局限在將Spring動(dòng)畫添加到視圖的初始位置手幢。事實(shí)上捷凄，根據(jù)用戶輸入時(shí)再激活動(dòng)畫，可以真正的使界面變得生動(dòng)起來(lái)围来。在本節(jié)中跺涤，您將對(duì)登錄按鈕進(jìn)行激活使其變得更加生動(dòng)。
將下面的代碼添加到login()：
[UIView animateWithDuration:0.5 delay:0.5 usingSpringWithDamping:0.5 initialSpringVelocity:0.0 options:nil animations:^{
? ? ? ? self.loginButton.bounds = CGRectMake(self.loginButton.bounds.origin.x, self.loginButton.bounds.origin.y, self.loginButton.bounds.size.width + 80.0, self.loginButton.bounds.size.height);
? ? } completion:nil];
上面的動(dòng)畫將按鈕的寬度增加了80监透，持續(xù)了1.5秒桶错。該按鈕均勻的向周圍擴(kuò)散，因?yàn)樽枘嵩O(shè)置為只有0.2才漆。使其左右兩側(cè)的邊界增長(zhǎng)。
構(gòu)建并運(yùn)行你的項(xiàng)目佛点；點(diǎn)擊按鈕查看你的動(dòng)畫：
當(dāng)你點(diǎn)擊這個(gè)按鈕的時(shí)候醇滥，按鈕有增長(zhǎng)和反彈的動(dòng)作黎比，這是向用戶提供了點(diǎn)擊操作時(shí)的一種反饋效果。
接下來(lái)鸳玩，您將結(jié)合這個(gè)動(dòng)畫與一些更多的Spring動(dòng)作阅虫，真正的讓按鈕生動(dòng)起來(lái)。
將下面的代碼添加到login()方法的結(jié)尾：
[UIView animateWithDuration:0.33 delay:0.0 usingSpringWithDamping:0.7 initialSpringVelocity:0.0 options:nil animations:^{
? ? ? ? self.loginButton.center = CGPointMake(self.loginButton.center.x, self.loginButton.center.y + 60.0);
? ? } completion:nil];上面的動(dòng)畫在點(diǎn)擊時(shí)將按鈕向下移動(dòng)60個(gè)點(diǎn)不跟。注意颓帝，這個(gè)動(dòng)畫持續(xù)時(shí)間比按鈕寬度的動(dòng)畫持續(xù)時(shí)間要短。
這是有意的窝革，因?yàn)樗谕男Ч屈c(diǎn)擊按鈕的時(shí)候就讓它向下移動(dòng)购城，在到達(dá)設(shè)置的垂直位置后彈跳一點(diǎn)。
構(gòu)建并運(yùn)行你的項(xiàng)目虐译；點(diǎn)擊按鈕瘪板，看看它如何響應(yīng)你的觸摸：
看起來(lái)很不錯(cuò)，你很快就會(huì)成為一名動(dòng)畫大師漆诽，而且你知道你可以做得更好侮攀！
另一個(gè)提供給用戶反饋的好方法是通過(guò)顏色改變。你將通過(guò)改變按鈕背景色的色值來(lái)改變按鈕的色彩厢拭。
在動(dòng)畫結(jié)束表達(dá)式中兰英，添加以下代碼到您動(dòng)畫結(jié)束的block中(completion:^(BOOL finished) {})：
self.loginButton.backgroundColor = [UIColor colorWithRed:0.85 green:0.83 blue:0.45 alpha:1.0];
這里還有最后一點(diǎn)反饋：活動(dòng)指示器。登錄按鈕應(yīng)該在網(wǎng)絡(luò)上啟動(dòng)一個(gè)用戶身份驗(yàn)證的活動(dòng)供鸠，所以向用戶顯示活動(dòng)指示器畦贸，讓他們知道正在進(jìn)行的操作是在正常運(yùn)行的。
向上滾動(dòng)代碼回季，你可以在viewdidload()中找到有關(guān)進(jìn)度指示的代碼家制。微調(diào)包含 UIActivityIndicatorView的代碼，準(zhǔn)備好你的使用實(shí)例泡一。你還沒(méi)有在屏幕上看到它颤殴，因?yàn)樗腶lpha設(shè)置為0。
回到login()鼻忠，將下面的代碼添加到最后的動(dòng)畫block表達(dá)式：
self.spinner.center = CGPointMake(40, self.loginButton.frame.size.height/2);
self.spinner.alpha = 1.0;
此動(dòng)畫將活動(dòng)指示器向左移動(dòng)涵但，并將其淡入。這應(yīng)該足以吸引用戶的注意帖蔓，讓他們知道他們的請(qǐng)求正在被處理矮瘟。
編譯并運(yùn)行您的項(xiàng)目；看看你漂亮的新動(dòng)畫的最終版本
花點(diǎn)時(shí)間反思一下你在這里所取得的成就塑娇。在按鈕視圖中添加了三個(gè)同步動(dòng)畫澈侠，以使其在寬度、移動(dòng)屏幕和顏色方面進(jìn)行了改變埋酬。
你的活動(dòng)指示器動(dòng)畫和其淡入方式哨啃，這本身就是一個(gè)視圖按鈕的查看動(dòng)效烧栋。
由UIKit創(chuàng)建出的動(dòng)畫自動(dòng)的結(jié)合在一起正常運(yùn)行，創(chuàng)造出一個(gè)流暢的視覺(jué)效果拳球。
感謝UIKit审姓！讓你不需要擔(dān)心你的動(dòng)畫的實(shí)現(xiàn)細(xì)節(jié)，而專注于設(shè)計(jì)優(yōu)秀的動(dòng)畫
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?挑戰(zhàn)
挑戰(zhàn)1：將文本字段動(dòng)畫轉(zhuǎn)換為Spring動(dòng)畫
在UIKit中Spring動(dòng)畫的API和一般動(dòng)畫的使用標(biāo)準(zhǔn)十分相似祝峻。因此魔吐，將您在用戶名和密碼字段上運(yùn)行的動(dòng)畫轉(zhuǎn)換為Spring動(dòng)畫應(yīng)該不會(huì)有什么問(wèn)題。
要完成這一挑戰(zhàn)莱找，您需要執(zhí)行以下操作：
1酬姆。添加usingspringwithdamping和initialspringvelocity參數(shù)動(dòng)畫的用戶領(lǐng)域。彈簧初始速度使用0宋距。嘗試0.2轴踱，0.6和0.9彈簧阻尼，選擇最使你愉快和舒服的Spring的值谚赎。
2淫僻。使用您選擇的阻尼和速度重復(fù)密碼字段動(dòng)畫。
在這本書中壶唤，你已經(jīng)獲得了Spring動(dòng)畫的堅(jiān)實(shí)基礎(chǔ)雳灵。你玩這種類型的動(dòng)畫越多，你對(duì)阻尼和速度的不同組合進(jìn)行的實(shí)驗(yàn)越多闸盔，你就越能為自己的應(yīng)用程序設(shè)計(jì)完美的Spring動(dòng)畫悯辙。
你準(zhǔn)備好進(jìn)入下一章了嗎？在3章中迎吵，你將了解UIKit的下一種類型：轉(zhuǎn)換
