我在我自己的iPhone app Interesting中也使用了波浪形的動畫。來看看我的app的動畫并構(gòu)建它肠阱。
動畫Interesting的Stories Into Position
當我的新聞app Interesting首次打開時测僵，我會發(fā)起一個網(wǎng)絡(luò)請求來拉取最近的文章街佑。當請求返回時，我需要用UITableView來放置文章數(shù)據(jù)捍靠，每行一篇文章沐旨。一些app選擇在數(shù)據(jù)返回時淡入列表，一些會將行一行行地滑動到位置上榨婆，而其他的則立即顯示行磁携，沒有任何動畫。我選擇使用一個內(nèi)置的類似我們剛剛構(gòu)建的音樂播放器的效果良风，但不是水平地動畫它們谊迄，我從底部垂直地動畫它們闷供。這就是我的加載動畫的樣子。
要完成它统诺，先來一步步地分解我做了什么歪脏。
- 如果數(shù)據(jù)返回了并且我調(diào)用了[self.tableView reloadData]，它會立即出現(xiàn)并且對用戶可見粮呢。所以我首先讓列表的透明度變?yōu)?婿失，這樣我就可以操作它，不讓用戶看到任何東西啄寡，直到我想讓他們看見豪硅。
- 然后我會調(diào)用[self.tableView reloadData]將數(shù)據(jù)加載到列表行中去，這時候所有的行都在它們正常的位置上这难，但因為整個列表透明度為0并且是隱藏的舟误，屏幕上什么都看不見。
- 我遍歷現(xiàn)在屏幕上可見的行并且移動
UITableView將行都放到屏幕底部姻乓。我通過改變列表的位置嵌溢，將其移動到整個列表高度的下方來達到目的，這樣每行都會藏在屏幕的底部了蹋岩。 - 現(xiàn)在所有的行都在屏幕的底部了赖草，我將alpha改回1.0來讓列表變得可見。現(xiàn)在列表是可見的了剪个，但素有的行都在屏幕底部所以看不到任何文章秧骑。
- 最后，我再次遍歷所有的行將其推離屏幕底部扣囊，通過移除我初始設(shè)置的變換將其動畫到原本的位置上乎折。
這個看上去相當簡單的效果有這么多的步驟！這里是完成這些步驟的代碼侵歇。
// 將列表變?yōu)椴豢梢娐畛危剌d數(shù)據(jù)
self.tableView.alpha = 0.0f;
[self.tableView reloadData];
// 存儲一個時間變量，這樣我就可以調(diào)整每行動畫之間的延遲時間
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);
}
}
// 現(xiàn)在所有的行都在屏幕底部了惕虑，將列表設(shè)為可見
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];
}
如果你注意第二個循環(huán)坟冲，在動畫的block中，我的延遲值設(shè)為了diff*b溃蔫。因為我在一個循環(huán)中健提，我可以同步地使用循環(huán)次數(shù)變量b來保持動畫的時間，只需要操作每行的動畫時間間隔即可伟叛。這可以確保每一行的動畫之間都是同樣的時間私痹，來達到一個好的波浪形動作。這就是全部了！
是時候換擋了紊遵。
至此雹锣，我們使用了Core Animation來創(chuàng)建我們的動畫界面。無論我們是使用iOS 7的基于block的動畫方法及其彈簧屬性癞蚕，還是使用很棒的為我們創(chuàng)建了CAKeyframeAnimation的JNWSpringAnimation框架，我們都還在Core Animation的范圍內(nèi)辉哥，蘋果有眾多的框架管理了iOS繁多的界面表現(xiàn)桦山。
但有很多種方法可以解決問題，也就是說醋旦，還有其他的不使用蘋果的Core Animation框架的方式可以在iOS app的屏幕上創(chuàng)建動作恒水。
其中一個創(chuàng)建動畫的方法最近獲取了很多的關(guān)注。它實在是iOS動畫框架界的一股清流饲齐，而且已經(jīng)在世界上一些最常用的app中被用來構(gòu)建了非常棒的動畫钉凌。
我說的當然就是Facebook創(chuàng)建的杰出的Pop框架。
你準備好學(xué)習(xí)一些新東西了嗎捂人？開始吧御雕！
查看完整合集（喜歡請打星~）：https://github.com/Cloudox/Motion-Design-for-iOS
