翻譯自：iOS.Animations.by.Tutorials.v2.0

demo：https://github.com/womendexinshijie/BahamaAirLoginScreenOC

前五章將向你介紹動畫API-UIKit框架。這個API是專門設計來幫助你輕松輕而易舉的為視圖控件賦予生命，同時避免了核心動畫的復雜性，它是運行在底層的動畫。

UIKit動畫API為您提供了靈活性和有效率的操作，雖然使用簡單，但是，它是你的動畫所需的必要條件。

在您的用戶界面中，動畫是看得見的，適用于所有視圖的屏幕特效或可見的目標：

?

?

您可以對屏幕上的繼承自UIView的對象設置動畫；這包括UILabel UIImageView，UIButton，和任何你可能已經創建的自定義類。

前五章的視圖動畫，在本節中，你將學習到如何使用動畫來提高一個虛構的航空APP，巴哈馬航空??，通過添加各種UI動畫元素。首先，您將向登錄屏幕添加動畫：

?

在下面的章節中你將在這個界面上進行操作：

?第1章，從視圖動畫開始：您將學習如何移動、縮放和淡出視圖。你可以通過UIKit底層的API來創造出許多不同的動畫。

?第2章，Springs：您將建立線性動畫的概念，并使用Spring驅動的動畫創建更引人注目的效果。

?第3章、轉變／過渡：你會了解UIKit的幾類方法，幫助你在屏幕內或在屏幕外給視圖賦予動畫。這一系列API的調用使轉換效果更容易實現。

一旦你完成了你的登錄界面上的工作，你可以移動到巴哈馬航空飛行狀態的界面。您將使用現有的界面，并通過在登錄界面的主題中添加動畫來使其更加激動人心：

?

您將從屏幕的靜態靜態版本開始，添加一些扣人心弦的高級動畫，來改進用戶體驗：

?第4章，動畫的實踐：你已經學會了大部分你所需要知道的關于UIKit的動畫。本章教你如何用創造性的方法組合你熟悉的技術來構建更酷的動畫。

?第5章、關鍵幀動畫：你會使用關鍵幀動畫最終完成一個令人印象深刻的UI界面：制作精美的動畫序列建立了從多個不同的階段。

一旦你完成了本節中的所有章節，你將對動畫有了一些深入的了解，你可以繼續閱讀這本書的其余部分。

本節向您展示了如何比較容易的將動畫添加到視圖中-接下來開始閱讀第1章！

第1章：動畫入門

在這一章中，將會把你帶入動畫的海洋中。然而，不要被這一章的標題誤導，開始使用這樣一個強大而豐富的API意味著有很多有趣的材料要做！

在本章和附帶的項目中，您將學習如何執行以下操作：

?為一個超酷的動畫設定舞臺。

?創建移動和淡入淡出動畫。

?調整動畫，讓動畫變得更舒服。

?反向和重復動畫。

這有相當多的材料要用，但我保證會很有趣的。你準備好接受挑戰了嗎？

好吧！讓我們開始吧

你的第一個動畫

打開位于本章的資源文件夾中的啟動項目。在Xcode中建立和運行項目；你會看到一個虛構的航空APP這樣的登錄屏幕：

這個應用程序現在沒有多大功能——它只顯示了一個帶有標題、兩個文本字段和底部一個大按鈕的登錄表單。

還有一張漂亮的背景照片和四張云彩。云已經連接到代碼中的變量。

打開 ViewController看看里面。在文件的頂部，您將看到所有的連線和類變量。再往下，有viewdidload()一點代碼，初始化的UI。這個項目已經準備好讓你大展身手了！

通過這些充足的介紹-毫無疑問你已經準備好嘗試一些代碼了吧！

您的第一個任務是在用戶打開應用程序時將表單元素通過動畫展示在界面上。由于登錄界面在應用程序啟動時可見，所以在視圖控制器出現之前，您必須將其移到屏幕之外。

將下面的代碼添加到viewwillappear()：

_heading.center = CGPointMake(_heading.center.x-self.view.frame.size.width, _heading.center.y);

? ? _userName.center = CGPointMake(_userName.center.x-self.view.frame.size.width, _userName.center.y);

? ? _password.center = CGPointMake(_password.center.x-self.view.frame.size.width, _password.center.y);’

將登陸界面的某些元素移動到可見邊界之外，如下所示：

?

由于上面的代碼在視圖控制器出現之前執行，所以看起來這些文本字段一開始就不存在。

構建和運行您的項目，以確保您所搭建的內容，正如您所設計的那樣真正出現在屏幕上：

?

完美-現在你可以通過一個令人愉快的動畫效果使那些展示的控件回到原來的位置。

將下面的代碼添加到viewdidappear()結束：

[UIView animateWithDuration:0.5 animations:^{

? ? ? ? _heading.center = CGPointMake(_heading.center.x+self.view.frame.size.width, _heading.center.y);

? ? }];

通過調用UIView類方法animatewithduration（_：動畫：）為標題heading控件添加動畫。這個方法是讓動畫立即開始執行，通過設置代碼中的第一個方法參數，讓動畫持續0.5秒的時間。

通過UIKit，使得對視圖上的控件進行不同的動畫操作變得很簡單，

構建和運行您的項目；您應該看到標題像幻燈片似的整齊到位，像這樣：

?

這為您在其他界面元素中創建動畫提供了舞臺。

因為animatewithduration（_：動畫：）是一類的方法，你不限于動畫只是一個特定的視圖；事實上在你的動畫block里，你可以實現很多的想法。

將以下行添加到動畫的block里面：

_userName.center = CGPointMake(_userName.center.x+self.view.frame.size.width, _userName.center.y);

再次構建和運行您的項目：

?

看到這兩個視圖在一起是很酷的，但你可能注意到，在相同的距離和相同的時間段上繪制兩個視圖的動畫看起來有點僵硬。只有機器人之間的移動才能達到這樣絕對同步！：]

如果每一個元素獨立于其他的元素，可能在動畫之間有一點延遲，那不是很酷嗎？

首先拿出下面用戶名相關的那句代碼：

UIView.animateWithDuration(0.5, animations: { _heading.center = CGPointMake(_heading.center.x+self.view.frame.size.width, _heading.center.y);

_userName.center = CGPointMake(_userName.center.x+self.view.frame.size.width, _userName.center.y);

})

然后將下面的代碼添加到viewdidappear()底：

[UIView animateWithDuration:0.5 delay:0.3 options:nil animations:^{

? ? ? ? _userName.center = CGPointMake(_userName.center.x+self.view.frame.size.width, _userName.center.y);

? ? } completion:nil];

您這次使用的類方法看起來很熟悉，但它有一些參數可以讓您自定義動畫：

1。animateWithDuration持續時間：動畫的持續時間。

2。delay延遲：UIKit以秒為單位設置啟動動畫前的等待時間。

3. options 選項：一組動畫選項，允許您自定義動畫的許多方面。稍后您將更多地了解這個參數，但現在您可以通過空集nil來表示“沒有選項”。

4。animations動畫：提供動畫的block表達式。

5。completion完成：當動畫完成時執行的代碼閉包；當你想完成一些最終的清理任務或者一個接一個的動畫之后，這個參數通常會很有用。

在上面添加的代碼中，將延遲設置為0.3，使動畫開始的時間比標題動畫還要晚。

構建和運行您的項目；組合動畫現在看起來如何？

?

啊–看起來好多了。現在你需要做的就是在密碼字段中進行動畫。

將下面的代碼添加到viewdidappear()底：

[UIView animateWithDuration:0.5 delay:0.4 options:nil animations:^{

? ? ? ? _password.center = CGPointMake(_password.center.x+self.view.frame.size.width, _password.center.y);

? ? } completion:nil];

在這里，您主要模仿了用戶名字段的動畫，只是稍微延遲了一些時間。

再次構建和運行您的項目以查看完整的動畫序列：

?

這就是你用UIKit動畫在屏幕上所做的動畫視圖！

這只是它的開始-在本章剩余部分，你將學習一些更可怕的動畫技術！

翻譯自：iOS.Animations.by.Tutorials.v2.0

轉載于:https://www.cnblogs.com/womendexinshijie/p/8492857.html

總結

以上是生活随笔為你收集整理的iOS.Animations.by.Tutorials.v2.0汉化的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。