現在，讓我們從上到下動畫屏幕上的其他元素。每個都需要比前一個開始得稍微慢一點。同時我想要控制app啟動后動畫開始的時間，來看看我如何管理。

CGFloat initialDelay = 1.0f;
CGFloat stutter = 0.3f;

// 動畫箭頭圖片
[UIView animateWithDuration:2.1 delay:initialDelay
    usingSpringWithDamping:0.6 initialSpringVelocity:0 options:0 animations:^{
    [arrowView setFrame:CGRectMake(0, 0, windowWidth, 45)];
} completion:NULL];

// 動畫Ministry of Fun文字
[UIView animateWithDuration:2.1 delay:initialDelay + (1 * stutter)
    usingSpringWithDamping:0.6 initialSpringVelocity:0 options:0 animations:^{
    [ministryView setFrame:CGRectMake(0, 57, windowWidth, 28)];
} completion:NULL];

我設置了兩個CGFloat變量，一個initialDelay值來存儲延遲時間，一個stutter來存儲每個動畫之間細微的延遲。這個數字對我們動畫效果整體的感覺和流動感都非常重要。動畫之間太長的延時會讓他們覺得不連貫，太短就不足以形成我們想要構建的波浪效果。

回到代碼：第一個動畫的delay屬性就是initialDelay變量的值，因為這是來到屏幕上的第一個動畫。第二個動畫block的delay值為initialDelay+（1*stutter）。這表示它會等待開始的延遲時間，然后會等待stutter值乘以1的時間。接下來的所有動畫都會遵循這個公式作為延時，并且每次都會加1倍stutter。這可以確保他們的動畫之間都是同樣的延時。

這里是現在看起來的樣子。

image

我覺得這個看起來不錯。老實說，只動畫兩個元素很難看出波浪效果是不是好的，因為你無法獲取一個整體的真實感受，除非動畫一系列的元素。所以讓我們動畫屏幕上的其他元素。

[UIView animateWithDuration:2.1 delay:initialDelay + (2 * stutter)
    usingSpringWithDamping:0.6 initialSpringVelocity:0 options:0 animations:^{
    [addButton setFrame:CGRectMake(0, 102, windowWidth, 45)];
} completion:NULL];

[UIView animateWithDuration:2.1 delay:initialDelay + (3 * stutter)
    usingSpringWithDamping:0.6 initialSpringVelocity:0 options:0 animations:^{
    [firstRow setFrame:CGRectMake(0, 170, windowWidth, 80)];
} completion:NULL];

[UIView animateWithDuration:2.1 delay:initialDelay + (4 * stutter)
    usingSpringWithDamping:0.6 initialSpringVelocity:0 options:0 animations:^{
    [secondRow setFrame:CGRectMake(0, 170+80, windowWidth, 80)];
} completion:NULL];

[UIView animateWithDuration:2.1 delay:initialDelay + (5 * stutter)
    usingSpringWithDamping:0.6 initialSpringVelocity:0 options:0 animations:^{
    [thirdRow setFrame:CGRectMake(0, 170+160, windowWidth, 80)];
} completion:NULL];

[UIView animateWithDuration:2.1 delay:initialDelay + (6 * stutter)
    usingSpringWithDamping:0.6 initialSpringVelocity:0 options:0 animations:^{
    [fourthRow setFrame:CGRectMake(0, 170+240, windowWidth, 80)];
} completion:NULL];

[UIView animateWithDuration:2.1 delay:initialDelay + (7 * stutter)
    usingSpringWithDamping:0.6 initialSpringVelocity:0 options:0 animations:^{
    [fifthRow setFrame:CGRectMake(0, 170+320, windowWidth, 80)];
} completion:NULL];

現在我們動畫了所有的元素到位置上了，讓我們看看效果。

image

對我來說感覺還不太對。動畫的延時還是有點太長了，破壞了想要的波浪感。看起來一點也沒有流動感。讓我們降低延時，把stutter變量的值從0.3降為0.15來看看效果。

image

很接近了，但我認為我們可以再縮小一點點延遲時間來讓它更有天然的流動感，就像每個元素都牽引了下一個。讓我們將stutter變量降為0.6。

image

現在我們有些成果了。我認為它看起來很棒并且有非常好的波浪動作。讓我們和Jakub原始的動作做一些比較。

image

看起來我們匹配得很接近！所以從這個例子中學到了什么呢？

• 基于block的UIView動畫方法中的彈簧的damping值是一個抽象值，對獲取一個好的感覺并沒有什么用。這就是為什么我喜歡用真實的彈簧動作（不需要設置持續時間的），比如JSWSpringAnimation提供的那種。
• 當實現一個像這個一樣內置的動畫時，調整動畫之間的延時是得到一個好的波浪形動作的關鍵點。

查看完整合集（喜歡請打星~）：https://github.com/Cloudox/Motion-Design-for-iOS

查看作者首頁