在本章和伴隨的項目中屁魏，您將學習如何做到以下幾點:
- 開啟一個很酷的動畫階段
- 創(chuàng)建移動和淡出動畫
- 調整動畫的舒緩效果怎茫。
- 反向和重復動畫。
有很多材料要讀蝗锥，但我保證會很有趣跃洛。你準備好接受挑戰(zhàn)了嗎?
第一個UIKit動畫
打開本章資源文件夾中的starter項目。在Xcode中構建并運行你的項目;你會看到一個虛構的航空公司應用程序的登錄屏幕是這樣的:
這款應用目前還沒有多少功能;它只顯示了一個帶有標題的登錄表單终议、兩個文本字段和底部的一個友好的大按鈕汇竭。
還有一張漂亮的背景圖片和四朵云葱蝗。云朵被命名從cloud1到cloud4
打開ViewController.swift，看看里面细燎。在文件的頂部两曼，您將看到所有連接的outlets和類變量。再往下玻驻，viewDidLoad()中有一些代碼用于初始化一些UI悼凑。這個項目已經為你準備好了，你可以加入進來璧瞬，做一些改變!
介紹到此為止——毫無疑問户辫，您已經準備好嘗試一些代碼了!
您的第一個任務是在用戶打開應用程序時將表單元素動畫到屏幕上。因為表單現(xiàn)在在應用程序啟動時是可見的嗤锉，所以你必須在視圖控制器出現(xiàn)之前將它移出屏幕渔欢。
增加一下代碼在viewWillAppear():
heading.center.x -= view.bounds.width
username.center.x -= view.bounds.width
password.center.x -= view.bounds.width
這將把每個表單元素置于屏幕可見邊界之外，如下所示:
因為上面的代碼在視圖控制器出現(xiàn)之前執(zhí)行瘟忱，它看起來就像那些文本字段從一開始就不存在一樣膘茎。
構建和運行你的項目，以確保你的字段真正出現(xiàn)在屏幕外酷誓，就像你計劃的那樣:
完美-現(xiàn)在你可以通過一個令人愉快的動畫把這些形式元素動畫回原來的位置披坏。
在viewDidAppear()的末尾添加以下代碼:
UIView.animate(withDuration: 0.5) {
self.heading.center.x += self.view.bounds.width
}
要將標題動畫到視圖中，你調用UIView類方法animate(withDuration:animations:)盐数。動畫立即開始動畫持續(xù)半秒;通過代碼中的第一個方法參數(shù)設置持續(xù)時間棒拂。
就是這么簡單; 你在動畫閉包中對視圖做的所有改變都會被UIKit動畫化。
構建并運行項目;你應該看到標題幻燈片的位置整齊如下:
這為您在其余的表單元素中進行動畫設置了條件玫氢。
因為animate(withDuration:animations:)是一個類方法帚屉，你不需要局限于動畫一個特定的視圖;事實上，你可以在動畫閉包中創(chuàng)建任意多的視圖漾峡。
在動畫閉包中添加以下一行:
self.username.center.x += self.view.bounds.width
再次生成并運行項目;觀察用戶名字數(shù)據(jù)框
看到兩個視圖一起動畫是很酷的攻旦，但是你可能會注意到，在相同的距離和相同的時間下讓兩個視圖動畫看起來有點僵硬生逸。只有機器人才能如此絕對同步地移動!
如果每個元素都獨立于其他元素移動牢屋，動畫之間可能會有一點延遲，這不是很酷嗎?
首先刪除你剛剛添加的動畫username的行:
self.username.center.x += self.view.bounds.width
然后將以下代碼添加到viewDidAppear()的底部:
UIView.animate(withDuration: 0.5, delay: 0.3, options: [],
animations: {
self.username.center.x += self.view.bounds.width
},
completion: nil
)
這次你使用的類方法看起來很熟悉槽袄，但是它有更多的參數(shù)讓你自定義你的動畫:
-
withDuration:動畫的持續(xù)時間烙无。 -
delay: UIKit在開始動畫之前等待的秒數(shù)。 -
options:讓你自定義關于你的動畫的一些方面遍尺。稍后您將更多地了解這個參數(shù)截酷，但是現(xiàn)在您可以傳遞一個空數(shù)組[]來表示“沒有特殊選項”。 -
animations:提供動畫的閉包表達式乾戏。 -
completion:動畫完成時執(zhí)行的代碼閉包迂苛。當您想要執(zhí)行一些最終的清理任務或一個接一個地鏈接動畫時三热，這個參數(shù)經常派上用場。
在上面添加的代碼中三幻，將delay設置為0.3康铭，以使動畫比title動畫晚一點開始。構建并運行項目;組合的動畫現(xiàn)在看起來怎么樣?
啊赌髓，看起來好多了。現(xiàn)在催跪，您需要做的就是在password中創(chuàng)建動畫锁蠕。
將以下代碼添加到viewDidAppear()的底部:
UIView.animate(withDuration: 0.5, delay: 0.4, options: [],
animations: {
self.password.center.x += self.view.bounds.width
},
completion: nil
)
在這里，您基本上模仿了username字段的動畫懊蒸，只是延遲稍微長一點荣倾。
再次構建并運行項目以查看完整的動畫序列:
這就是你用UIKit動畫在屏幕上動畫視圖所需要做的一切!
這只是它的開始-你將在本章的其余部分學習一些更棒的動畫技術!
二 動畫屬性
現(xiàn)在你已經看到了動畫是多么簡單，你可能很想學習如何為你的視圖制作動畫骑丸。
本節(jié)將給你一個UIView的動畫屬性的概述舌仍，然后指導你在你的項目中探索這些動畫。
不是所有的視圖屬性都可以動畫化通危，但是所有的視圖動畫铸豁，從最簡單的到最復雜的，都可以通過動畫化視圖上的屬性子集來構建菊碟，這些屬性可以用于動畫化节芥，如下一節(jié)所述。
2.1 Position and size
你可以對視圖的位置和幀進行動畫化逆害，使其像你在前一節(jié)中所做的那樣放大头镊、縮小或移動。以下是你可以用來修改視圖位置和大小的屬性:
- bounds: 動畫這個屬性來重新定位視圖的內容魄幕。
- frame:動畫這個屬性來移動和/或縮放視圖相艇。
- center:當你想將視圖移動到一個新的位置時，動畫化這個屬性在屏幕上纯陨。
不要忘記坛芽，在Swift中，一些UIKit屬性翼抠，如大小和中心是可變的靡馁。這意味著你可以通過改變中心來垂直移動視圖。你也可以通過縮小frame.size.width來縮小視圖机久。
2.2 Appearance
你可以通過給背景著色或者使視圖完全或半透明來改變視圖內容的外觀臭墨。
- backgroundColor:改變視圖的這個屬性，讓UIKit隨著時間的推移逐漸改變背景顏色膘盖。
- alpha:改變這個屬性來創(chuàng)建淡入淡出效果胧弛。
2.3: Transformation
由于您還可以調整大小和位置尤误，所以修改視圖的轉換與上面的方法基本相同。
transform:在一個動畫塊中修改這個屬性结缚，以使視圖的旋轉损晤、縮放和/或位置動畫化。
這些是隱藏的仿射變換红竭，它更加強大尤勋，允許你描述縮放因子或旋轉角度，而不需要提供特定的邊界或中心點茵宪。
這些看起來像相當基本的構建塊最冰，但你會驚訝于你即將遇到的復雜的動畫效果!
三: Animation options
回頭看看你的動畫代碼，你總是把[]傳遞給options參數(shù)稀火。選項可以讓你自定義UIKit如何創(chuàng)建你的動畫暖哨。你只調整了動畫的持續(xù)時間和延遲，但你可以對動畫參數(shù)有更多的控制凰狞。
下面是在UIView中聲明的選項列表篇裁。·AnimationOptions·設置類型赡若，你可以以不同的方式組合在你的動畫中使用达布。
3.1：Repeating
- repeat:包含此選項可以讓你的動畫永遠循環(huán)。
- autoreverse:該選項只能與·.repeat·結合使用;這個選項反復地向前或向后播放動畫逾冬。
修改密碼字段viewDidAppear()的動畫代碼往枣，使用.repeat選項如下:
UIView.animate(withDuration: 0.5, delay: 0.4,
options: .repeat,
animations: {
self.password.center.x
+= self.view.bounds.width
},
completion: nil
)
構建并運行項目以查看更改的效果:
表單標題和username字段飛到屏幕中央，但密碼字段從屏幕外的位置一直保持動畫粉渠。
在options參數(shù)中使用.repeat和.autoreverse分冈，如下所示:
UIView.animate(withDuration: 0.5, delay: 0.4,
options: [.repeat, .autoreverse],
animations: {
self.password.center.x += self.view.bounds.width
},
completion: nil
)
注意，如果要啟用多個選項霸株，需要使用set語法列出所有選項雕沉，并用逗號分隔，并將列表括在方括號中去件。
注意:如果你只需要一個選項坡椒，為了方便，Swift允許你省略方括號尤溜。然而倔叼，你仍然可以包括它們，以防將來你添加更多的選項宫莱。這意味著[]沒有選擇丈攒，[。對單個選項重復[]，和
[.repeat, .autorepeat]巡验。
3.2 Animation的淡入淡出效果
在現(xiàn)實生活中际插，事情不會突然開始或停止移動。汽車或火車等實體物體緩慢加速显设，直到達到目標速度;除非撞上磚墻框弛，否則它們會逐漸減速，直到在最終目的地完全停止捕捂。
下圖詳細說明了這一概念:
為了讓你的動畫看起來更真實瑟枫，你可以在開始時應用同樣的效果，即建立動量指攒，在結束前放慢速度慷妙，也就是通常所說的ease-in和ease-out
您可以選擇從四個不同的簡化選項:
- curvelinear:此選項對動畫不應用加速或減速。在這本書中幽七，你只會在第五章的最后一個挑戰(zhàn)中使用這個選項:“過渡”。
- curveeasein:這個選項將加速應用到動畫的開始溅呢。
- curveeaseout:這個選項應用減速到動畫的結尾澡屡。
- curveeaseinout:該選項在動畫開始時應用加速，在動畫結束時應用減速咐旧。
為了更好地理解這些選項如何為動畫添加視覺效果驶鹉，您將在您的項目中嘗試一些選項。
修改你的password字段的動畫代碼再一次用一個新的選項如下:
UIView.animate(withDuration: 0.5, delay: 0.4,
options: [.repeat, .autoreverse, .curveEaseOut],
animations: {
self.password.center.x += self.view.bounds.width
},
completion: nil
)
構建并運行項目;注意铣墨，在返回到屏幕左側之前室埋，字段是如何平滑地減速到最右邊的位置:
這看起來更自然，因為這是你在現(xiàn)實世界中所期望的移動方式伊约。
現(xiàn)在姚淆，試試相反的方法。當字段仍然在屏幕外時屡律，修改上面的代碼腌逢，將.curveEaseOut選項改為.curveEaseIn，如下所示:
UIView.animate(withDuration: 0.5, delay: 0.4,
options: [.repeat, .autoreverse, .curveEaseIn],
animations: {
self.password.center.x += self.view.bounds.width
},
completion: nil
)
構建并運行項目;觀察它是如何以機器人的活力從最右邊的位置彈回來的超埋。這看起來不自然搏讶，也不像之前的動畫那樣視覺上令人愉快。
最后霍殴，試一下媒惕。curveeaseinout。curveeaseinout也是UIKit應用于動畫的默認easing函數(shù)来庭。
您已經看到了各種動畫選項如何影響您的項目妒蔚，以及如何使動作看起來流暢和自然。
在你繼續(xù)之前，改變你一直在玩的代碼片段的選項:
UIView.animate(withDuration: 0.5, delay: 0.4, options: [],
animations: {
self.password.center.x += self.view.bounds.width
},
completion: nil
)
既然您已經了解了基本動畫的工作原理面睛，您就可以處理一些更令人眼花繚亂的動畫技術了絮蒿。
四: 要點
- 你可以使用UIView.animate(…)的一個變體來創(chuàng)建一個動畫。
- 在動畫閉包中叁鉴，你設置所需動畫的最終狀態(tài)土涝，UIKit將自動在當前和最終狀態(tài)之間創(chuàng)建一個平滑的動畫。
- 你通過提供UIView來定制你的動畫幌墓。
AnimationOptions值來設置緩動但壮、重復和自動反轉屬性。
五: Challenges
如果這一章是你第一次在iOS中動畫一個視圖常侣，你可能會有點頭暈蜡饵。不要擔心，盡管胳施，因為不管你的初始技能集溯祸，你將在你的方式，以動畫掌握只需幾個章節(jié)舞肆。盡管現(xiàn)在焦辅，有一個非常簡單的挑戰(zhàn)等待著你，你將創(chuàng)建自己的動畫椿胯。
