現在讓我們添加我們的行。它們也都是UIImageView，所以也只用直接在背景圖片上放置就可以了。
// Katy Perry 行
UIImageView *firstRow =
[[UIImageView alloc] initWithFrame:CGRectMake(0, 170, windowWidth, 80)];
firstRow.image = [UIImage imageNamed:@"1st-row"];
[self.window addSubview:firstRow];
// Shakira 行
UIImageView *secondRow =
[[UIImageView alloc] initWithFrame:CGRectMake(0, 170+80, windowWidth, 80)];
secondRow.image = [UIImage imageNamed:@"2nd-row"];
[self.window addSubview:secondRow];
// Pitbull 行
UIImageView *thirdRow =
[[UIImageView alloc] initWithFrame:CGRectMake(0, 170+160, windowWidth, 80)];
thirdRow.image = [UIImage imageNamed:@"3rd-row"];
[self.window addSubview:thirdRow];
// Lana del Rey 行
UIImageView *fourthRow =
[[UIImageView alloc] initWithFrame:CGRectMake(0, 170+240, windowWidth, 80)];
fourthRow.image = [UIImage imageNamed:@"4th-row"];
[self.window addSubview:fourthRow];
// HEX 行
UIImageView *fifthRow =
[[UIImageView alloc] initWithFrame:CGRectMake(0, 170+320, windowWidth, 80)];
fifthRow.image = [UIImage imageNamed:@"5th-row"];
[self.window addSubview:fifthRow];
你可能注意到每一行frame的Y坐標（垂直位置）都有一個小方程式。每一行都是80px高，所以放置它們每一行的時候我都在Y坐標上加了80。我也可以使用Auto Layout來做，但對這個例子來說就有點過于復雜了。
這里是在添加動畫前的樣子。
但等一下，我們并不想要在第一次進入的看到這樣的界面。這次練習的目的在于讓每個元素都動畫到它們的位置上，也就是說它們不應該立即出現在它們的最終位置。我要做的是從屏幕的右邊開始每一個元素，然后我會讓每個元素的左邊動畫到屏幕的左邊，來到最終的位置。
讓我們回到我們的視圖設置代碼并修改每個元素的frame，這樣它們的X軸坐標就不再是0了，而是屏幕的寬度。這樣就會讓每個元素的左邊界并齊屏幕的右邊界，用戶就看不到了。
// 添加箭頭和頂部的文字
UIImageView *arrowView =
[[UIImageView alloc] initWithFrame:CGRectMake(windowWidth, 0, windowWidth, 45)];
arrowView.image = [UIImage imageNamed:@"arrow"];
[self.window addSubview:arrowView];
// Ministry of Fun 文字
UIImageView *ministryView =
[[UIImageView alloc] initWithFrame:CGRectMake(windowWidth, 57, windowWidth, 56/2)];
ministryView.image = [UIImage imageNamed:@"ministry"];
[self.window addSubview:ministryView];
// Add a Song 按鈕
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(windowWidth, 102, windowWidth, 45)];
[self.window addSubview:addButton];
// Katy Perry 行
UIImageView *firstRow =
[[UIImageView alloc] initWithFrame:CGRectMake(windowWidth, 170, windowWidth, 80)];
firstRow.image = [UIImage imageNamed:@"1st-row"];
[self.window addSubview:firstRow];
// Shakira 行
UIImageView *secondRow =
[[UIImageView alloc] initWithFrame:CGRectMake(windowWidth, 170+80, windowWidth, 80)];
secondRow.image = [UIImage imageNamed:@"2nd-row"];
[self.window addSubview:secondRow];
// Pitbull 行
UIImageView *thirdRow =
[[UIImageView alloc] initWithFrame:CGRectMake(windowWidth, 170+160, windowWidth, 80)];
thirdRow.image = [UIImage imageNamed:@"3rd-row"];
[self.window addSubview:thirdRow];
// Lana del Rey 行
UIImageView *fourthRow =
[[UIImageView alloc] initWithFrame:CGRectMake(windowWidth, 170+240, windowWidth, 80)];
fourthRow.image = [UIImage imageNamed:@"4th-row"];
[self.window addSubview:fourthRow];
// HEX 行
UIImageView *fifthRow =
[[UIImageView alloc] initWithFrame:CGRectMake(windowWidth, 170+320, windowWidth, 80)];
fifthRow.image = [UIImage imageNamed:@"5th-row"];
[self.window addSubview:fifthRow];
你可以想象一下現在所有元素都移動到屏幕的右邊去的界面樣式，現在只顯示了背景圖片。
現在所有內容都在屏幕外并且準備好動畫了，策略是讓每個元素都動畫到左邊，一次一個，每個都有所延遲，這樣就會產生一種波浪的感覺。為了好玩，我們試試使用基于block的UIView動畫方法來讓我們的元素動畫到屏幕上。
這里是第一個動畫block，我們會將箭頭和“Dance Club”圖片滑動到左邊。
[UIView animateWithDuration:1.1 delay:0 usingSpringWithDamping:0.3
initialSpringVelocity:0 options:0 animations:^{
[arrowView setFrame:CGRectMake(0, 0, windowWidth, 45)];
} completion:NULL];
這個基于block的動畫有1.1秒的持續時間和0.3的彈簧阻尼。持續時間是動畫完成需要的時間，而阻尼是iOS 7在UIView動畫方法中提供的一個彈簧屬性，用來控制彈簧的彈力。JNWSpringAnimation提供了三個屬性來控制彈簧的物理性質，但Apple值提供了一個，即damping屬性。damping需要時一個0到1之間的值，越接近0，彈簧動作就越有彈性，越接近1，就越沒有彈性，直到完全沒有彈性，變成一個平滑的淡入。
讓我們看看這個duration和damping值產生的動作。
恩，有點不太對。動畫太快也太跳躍了。這種類型的彈性動畫帶來了一些焦慮。這是一個關于僅僅使用一個彈簧動畫并不能提升你的app整體用戶體驗的很好的例子。每種類型的動畫都給你的用戶帶來了一些感受，而這個帶來了錯誤地感受。
讓我們將持續時間提升到2.1秒并看看感覺。
比起Jakub的原始動畫，這個又太彈了，我們的damping值也需要調整。讓我們將damping從0.3提升到0.6，如我之前所說，它更靠近1這個不彈的值。我們還是需要一點彈性，現在讓我們來看看它怎么樣了。
好了，不是太壞。你可以發現當你使用iOS 7提供的彈簧動畫方法時，它直接提供了一些值來獲取你想要的感覺。NSWSpringAnimation給出的彈簧屬性更容易理解，至少對我來說是這樣，因為它們都操作了彈簧動作方程的不同屬性。iOS 7的基于block的動畫中的damping值實際上是一個解釋值，這意味著蘋果無論獲取到你輸入的什么值，都會做一些復雜的計算來操作這個值并將其放入彈簧動作方程式中。你可以說蘋果操作了這個值，因為它在0和1之間改變彈性。而在實際的彈簧動作方程中，動作的時間（它到達平衡點或者最終位置的時間）是由彈簧的其他屬性決定的，它不是你去設置然后強制彈簧遵循的。蘋果的動畫方法有一個你需要設置的持續時間，所以你在以一種并非完全遵循物理法則管理下的彈簧動作。這就是為什么我傾向于用JSWSpringAniamtion（或者Facebook Pop，我會馬上提及），因為它們有著更加自然、逼真的彈簧動畫。
查看完整合集（喜歡請打星~）：https://github.com/Cloudox/Motion-Design-for-iOS
