我在我自己的iPhone app Interesting中也使用了波浪形的動畫。來看看我的app的動畫並構建它。

動畫Interesting的Stories Into Position

當我的新聞app Interesting首次打開時，我會發起一個網絡請求來拉取最近的文章。當請求返回時，我需要用UITableView來放置文章數據，每行一篇文章。一些app選擇在數據返回時淡入列表，一些會將行一行行地滑動到位置上，而其他的則立即顯示行，沒有任何動畫。我選擇使用一個內置的類似我們剛剛構建的音樂播放器的效果，但不是水平地動畫它們，我從底部垂直地動畫它們。這就是我的加載動畫的樣子。

vcjOus62q873o6zWsbW9ztLP68jDy/vDx7+0vPuhoyDIu7rzztK74bX308Nbc2VsZi50YWJsZVZpZXcgcmVsb2FkRGF0YV29q8r9vt2809TYtb3B0LHt0NDW0Milo6zV4sqxuvLL+dPQtcTQ0La81NrL/MPH1f2zo7XEzrvWw8nPo6y1q9LyzqrV+7j2wdCx7c24w/e2yM6qMLKix9LKx9L+sti1xKOsxsHEu8nPyrLDtLa8v7Syu7z7oaMgztKx6cD6z9bU2sbBxLvJz7/JvPu1xNDQsqLH0tLGtq88Y29kZT5VSVRhYmxlVmlld72r0NC2vLfFtb3GwcS7tdeyv6GjztLNqLn9uMSx5MHQse21xM671sOjrL2rxuTSxravtb3V+7j2wdCx7bjftsi1xM/Ct73AtLTvtb3Ev7XEo6zV4tH5w7/Q0La8u+Gy2NTaxsHEu7XEtdeyv8HLoaMgz9bU2sv509C1xNDQtrzU2sbBxLu1xLXXsr/By6OsztK9q2FscGhhuMS72DEuMMC0yMPB0LHtseS1w7/JvPuho8/W1NrB0LHtyse/ybz7tcTBy6OstavL2NPQtcTQ0La81NrGwcS7tdeyv8v50tS/tLK7tb3IzrrOzsTVwqGjINfuuvOjrM7S1Nm0zrHpwPrL+dPQtcTQ0L2rxuTNxsDrxsHEu7XXsr+jrM2ouf3SxrP9ztKz9cq8yejWw7XEseS7u72rxuS2r7uttb3UrbG+tcTOu9bDyc+hoyA8L2NvZGU+PC9jb2RlPg0KPHA+PGNvZGU+PGNvZGU+1eK49r+0yc/Ipc/gtbG88rWltcTQp7n709DV4sO0tuC1xLK91uijodXiwO/Kx83qs8nV4tCpsr3W6LXEtPrC66GjPC9jb2RlPjwvY29kZT48L3A+DQo8cHJlIGNsYXNzPQ=="brush:java;"> // 將列表變為不可見，重載數據 self.tableView.alpha = 0.0f; [self.tableView reloadData]; // 存儲一個時間變量，這樣我就可以調整每行動畫之間的延遲時間 CGFloat diff = .05; CGFloat tableHeight = self.tableView.bounds.size.height; NSArray *cells = [self.tableView visibleCells]; // 遍歷行並將它們移動到屏幕底部 for (NSUInteger a = 0; a < [cells count]; a++) { UITableViewCell *cell = [cells objectAtIndex:a]; if ([cell isKindOfClass:[UITableViewCell class]]) { // 通過變換cell的Y坐標來講其移動到屏幕底部 cell.transform = CGAffineTransformMakeTranslation(0, tableHeight); } } // 現在所有的行都在屏幕底部了，將列表設為可見 self.tableView.alpha = 1.0f; // 將每行動畫回位置 for (NSUInteger b = 0; b < [cells count]; b++) { UITableViewCell *cell = [cells objectAtIndex:b]; [UIView animateWithDuration:1.6 delay:diff*b usingSpringWithDamping:0.77 initialSpringVelocity:0 options:0 animations:^{ cell.transform = CGAffineTransformMakeTranslation(0, 0); } completion:NULL]; }

如果你注意第二個循環，在動畫的block中，我的延遲值設為了diff*b。因為我在一個循環中，我可以同步地使用循環次數變量b來保持動畫的時間，只需要操作每行的動畫時間間隔即可。這可以確保每一行的動畫之間都是同樣的時間，來達到一個好的波浪形動作。這就是全部了！