如果你仔細觀察原始的動畫，會發現有8個分開動畫的不同元素。

黑色箭頭和“Dance Club”文本 “Ministry of Fun”文本 “Add a Song”按鈕 五首歌對應的五行

這8個元素（或元素組，因為箭頭和“Dance Club”文本是一起動畫的）是通過不同的開始時間遞進進入視圖的，這就是我們要在動畫中獲取的非常酷的波浪感效果。

首先我們整理一下計劃。我需要做的是分開添加這些元素到界面上，這樣我就可以分開動畫它們了。如果這是一個真實的app，有著真實流入的數據，這個界面最可能是一個UITableView或者UICollectionView來獲取一個好的、結構化的展示行的方式。從高層面來概括這兩個視圖類型的話，就是你實現你需要定義的它們的接口方法，來返回一些數據到界面上，比如返回行高的方法，或者返回一個只有一行的視圖的方法。因為我們沒有數據，而且我的主要目的是演示如何構建動畫，我就僅僅是保存一些Photoshop裡設計的圖片並手動將這些圖片添加到界面上去，從頂部的箭頭和“Dance Club”文本開始。

// 定義一個變量來獲取屏幕的寬度，我們會經常用到這個值。
CGFloat windowWidth = self.window.bounds.size.width;

// 將背景添加到界面上
UIImageView *backgroundView = [[UIImageView alloc] initWithFrame:self.window.bounds];
backgroundView.image = [UIImage imageNamed:@"background"];
[self.window addSubview:backgroundView];

// 添加箭頭和文本
UIImageView *arrowView =
    [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, windowWidth, 45)];
arrowView.image = [UIImage imageNamed:@"arrow"];
[self.window addSubview:arrowView];

這裡沒什麼特別的，只是簡單地添加一些視圖到我們原型的主屏幕上。名為@“background”的圖片是大的漸變的圖片，作為其他視圖的背景。@“arrow”圖片是用Photoshop做出來的包含箭頭和“Dance Club”文本的圖片，因為我會同時動畫它們，所以將它們簡單地放在一個圖片裡。

這裡是目前界面看起來的樣子。

---

---

現在讓我們添加更多的視圖！

// “Ministry of Fun”圖片
UIImageView *ministryView =
    [[UIImageView alloc] initWithFrame:CGRectMake(0, 57, windowWidth, 28)];
ministryView.image = [UIImage imageNamed:@"ministry"];
[self.window addSubview:ministryView];

// 添加一個歌曲按鈕
UIButton *addButton = [UIButton buttonWithType:UIButtonTypeCustom];
[addButton setImage:[UIImage imageNamed:@"add-button"] forState:UIControlStateNormal];
[addButton setImage:[UIImage imageNamed:@"add-button-pressed"]
    forState:UIControlStateHighlighted];
[addButton setFrame:CGRectMake(0, 102, windowWidth, 45)];
[self.window addSubview:addButton];

我添加“Ministry of Fun”圖片視圖（使用我用Photoshop分割出來的PNG圖片）到界面上然後為“Add a Song”按鈕創建一個UIButton。我本可以懶一點，不將按鈕做成一個真的UIButton，而是使用一個UIImageView，但我想演示如何為一個自定義的UIButton設置點擊的和普通的圖片。只需要調用同樣的一個 -setImage:forState:方法，但給它傳輸不同的屬性。你可以隨便調用它來設置不同的狀態屬性，來覆蓋用戶對按鈕的每一個可能的操作。接著我設置按鈕的位置並將它添加到界面上。

這裡是目前狀態的界面，以及點擊按鈕時不同狀態的演示。

---

---

我們UIControlStateHighlighted狀態的圖片只是將白色邊框換成了白色的填充。<喎?/kf/ware/vc/" target="_blank" class="keylink">vcD4NCjxwPrLpv7TN6tX7us+8r6O6PGEgaHJlZj0="https://github.com/Cloudox/Motion-Design-for-iOS">https://github.com/Cloudox/Motion-Design-for-iOS