如果你仔細(xì)觀察原始的動(dòng)畫，會(huì)發(fā)現(xiàn)有8個(gè)分開動(dòng)畫的不同元素袱院。
- 黑色箭頭和“Dance Club”文本
- “Ministry of Fun”文本
- “Add a Song”按鈕
- 五首歌對應(yīng)的五行
這8個(gè)元素（或元素組汪疮，因?yàn)榧^和“Dance Club”文本是一起動(dòng)畫的）是通過不同的開始時(shí)間遞進(jìn)進(jìn)入視圖的吱殉，這就是我們要在動(dòng)畫中獲取的非秤嗑常酷的波浪感效果燎竖。
首先我們整理一下計(jì)劃灶壶。我需要做的是分開添加這些元素到界面上陕靠，這樣我就可以分開動(dòng)畫它們了喳坠。如果這是一個(gè)真實(shí)的app鞠评，有著真實(shí)流入的數(shù)據(jù)，這個(gè)界面最可能是一個(gè)UITableView或者UICollectionView來獲取一個(gè)好的壕鹉、結(jié)構(gòu)化的展示行的方式剃幌。從高層面來概括這兩個(gè)視圖類型的話，就是你實(shí)現(xiàn)你需要定義的它們的接口方法晾浴，來返回一些數(shù)據(jù)到界面上负乡，比如返回行高的方法，或者返回一個(gè)只有一行的視圖的方法脊凰。因?yàn)槲覀儧]有數(shù)據(jù)抖棘，而且我的主要目的是演示如何構(gòu)建動(dòng)畫，我就僅僅是保存一些Photoshop里設(shè)計(jì)的圖片并手動(dòng)將這些圖片添加到界面上去狸涌，從頂部的箭頭和“Dance Club”文本開始切省。
// 定義一個(gè)變量來獲取屏幕的寬度，我們會(huì)經(jīng)常用到這個(gè)值帕胆。
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”文本的圖片，因?yàn)槲視?huì)同時(shí)動(dòng)畫它們歼捐，所以將它們簡單地放在一個(gè)圖片里何陆。
這里是目前界面看起來的樣子。
現(xiàn)在讓我們添加更多的視圖豹储！
// “Ministry of Fun”圖片
UIImageView *ministryView =
[[UIImageView alloc] initWithFrame:CGRectMake(0, 57, windowWidth, 28)];
ministryView.image = [UIImage imageNamed:@"ministry"];
[self.window addSubview:ministryView];
// 添加一個(gè)歌曲按鈕
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”按鈕創(chuàng)建一個(gè)UIButton贷盲。我本可以懶一點(diǎn)，不將按鈕做成一個(gè)真的UIButton，而是使用一個(gè)UIImageView巩剖，但我想演示如何為一個(gè)自定義的UIButton設(shè)置點(diǎn)擊的和普通的圖片铝穷。只需要調(diào)用同樣的一個(gè) -setImage:forState:方法，但給它傳輸不同的屬性佳魔。你可以隨便調(diào)用它來設(shè)置不同的狀態(tài)屬性曙聂，來覆蓋用戶對按鈕的每一個(gè)可能的操作。接著我設(shè)置按鈕的位置并將它添加到界面上鞠鲜。
這里是目前狀態(tài)的界面宁脊，以及點(diǎn)擊按鈕時(shí)不同狀態(tài)的演示。
我們UIControlStateHighlighted狀態(tài)的圖片只是將白色邊框換成了白色的填充贤姆。
查看完整合集（喜歡請打星~）：https://github.com/Cloudox/Motion-Design-for-iOS
