《Motion Design for iOS》（三十三）

標籤：

即使這些動畫可以通過一個淡齣動畫曲線來完成，我也想使用含有相同damping和stiffness值得彈簧動畫，這樣我就可以減緩速度。這裡不會有彈性，只是非常平滑的過渡。

CGFloat dampingStiffness = 16.0f;// 主app背景的比例動畫JNWSpringAnimation *scale =    [JNWSpringAnimation animationWithKeyPath:@"transform.scale"];scale.damping = dampingStiffness;scale.stiffness = dampingStiffness;scale.mass = 1;scale.fromValue = @([[self.appBackground.layer.presentationLayer    valueForKeyPath:scale.keyPath] floatValue]);scale.toValue = @(0.9);[self.appBackground.layer addAnimation:scale forKey:scale.keyPath];self.appBackground.transform =    CGAffineTransformScale(CGAffineTransformIdentity, .9, .9);

我將damping和stiffness值設為一個CGFloat變數，這樣我就可以更簡單地調整它們而不用一次更新兩個值。

這個block代碼中的一個主要的與其他例子不同的改變是比例動畫的fromValue沒有被設為一個常量，而是設為[[self.appBackground.layer.presentationLayer valueForKeyPath:scale.keyPath] floatValue]。這是什麼意思呢？如果你一塊塊拆開，這些事要發生的事：

• 我會使用self.appBackground來訪問這個類的appBackground屬性
• 我會擷取到這個視圖的CALayer對象
• 我在layer上擷取presentationLayer屬性，通過它來擷取特殊的presentation model layer，讓我們看到動畫改變時的值
• 當我有了presentationLayer後，我會調用 -valueForKeyPath: 來取得變換的比例部分的當前值。（scale.keyPath = @”transform.scale”）
• 當我最後有了當前的比例值後，它不是JNWSpringAnimation需要的資料格式，所以我使用了floatValue。

記得之前我提到過在動畫中layer上的很多屬性值都不會改變嗎？以及presentation model layer是Core Animation用來儲存動畫發生過程中精確的變更值的？我們需要擷取比例變換的當前值，這樣就可以在當前任何點開始動畫（記住如果使用者很開心地不停點擊，我們不想要動畫重新開始！）。我們需要擷取特殊的顯示層來查看值。然後我們使用它作為我們動畫的fromValue，這樣他就能始終正常工作，無論fromValue是我們為視圖設定的正常的、未觸摸的比例值，還是動畫中的某個值。如果我們不通過presentationLayer擷取它，這個值在動畫中就始終不會正確，直到動畫結束。

我們不僅僅需要動畫主app背景，還需要動畫地圖，將比例降回1.0,，並且通過過渡移動到螢幕上。讓我們現在做。

// 地圖有兩個分開的動畫，一個用於位置，一個用於比例JNWSpringAnimation *mapScale =    [JNWSpringAnimation animationWithKeyPath:@"transform.scale"];mapScale.damping = dampingStiffness;mapScale.stiffness = dampingStiffness;mapScale.mass = 1;mapScale.fromValue =    @([[self.mapView.layer.presentationLayer valueForKeyPath:mapScale.keyPath] floatValue]);mapScale.toValue = @(1.0);[self.mapView.layer addAnimation:mapScale forKey:mapScale.keyPath];self.mapView.transform = CGAffineTransformScale(CGAffineTransformIdentity, 1, 1);JNWSpringAnimation *mapTranslate =    [JNWSpringAnimation animationWithKeyPath:@"transform.translation.y"];mapTranslate.damping = dampingStiffness;mapTranslate.stiffness = dampingStiffness;mapTranslate.mass = 1;mapTranslate.fromValue =    @([[self.mapView.layer.presentationLayer valueForKeyPath:mapTranslate.keyPath] floatValue]);mapTranslate.toValue = @(0);[self.mapView.layer addAnimation:mapTranslate forKey:mapTranslate.keyPath];self.mapView.transform = CGAffineTransformTranslate(self.mapView.transform, 0, 0);

這裡沒有什麼很複雜的，除了擷取當前變化的值來從其開始，如前面的動畫一樣。我在這也使用了damping和stiffness變數，這樣所有的動畫都感覺是同一個類型的動作。

鎖著這是一塊正統的代碼，好在其非常簡單，而且現在你應該習慣了JNWSpringAnimation代碼塊的樣子。這是目前動畫看起來的樣子。

現在是時候添加這個介面的其他動畫了，即當使用者點擊地圖表徵圖且地圖可見時，我們想要將其淡出並且將主app背景放回到前面。因為它和我們剛才展示的動畫除了開始和結束值外完全一樣，這裡就直接放一個大塊來解釋發生了什麼。

if (self.mapShowing) {    self.mapShowing = NO;    // 再次使用這些動畫相同的damping和stiffness    // 這樣我們就可以擷取CGFloat形式的值。注意這個值會高一點    // 意味著動畫會花費更少的時間（在匹配此damping和stiffness的彈簧動畫下）。    // 少時間是好的，因為我們要回到介面的預設狀態，而此時使用者只想讓地圖趕緊消失。    CGFloat dampingStiffnessOut = 24.0f;    // 再說一次，從目前狀態開始很重要，這樣使用者點擊按鈕時就不會抽動    [UIView animateWithDuration:.5 delay:0         options:UIViewAnimationOptionCurveEaseInOut|UIViewAnimationOptionBeginFromCurrentState        animations:^{        self.appBackground.alpha = 1.0f;    } completion:NULL];    [UIView animateWithDuration:.3 delay:0        options:UIViewAnimationOptionCurveEaseInOut|UIViewAnimationOptionBeginFromCurrentState         animations:^{        self.mapView.alpha = 0.0f;    } completion:NULL];    // 地圖有兩個分開的動畫，一個是位置一個是比例。    // 我們通過presentationLayer擷取@“transform.scale”的變化的值，如之前的例子一樣    JNWSpringAnimation *mapScale =        [JNWSpringAnimationanimationWithKeyPath:@"transform.scale"];    mapScale.damping = dampingStiffnessOut;    mapScale.stiffness = dampingStiffnessOut;    mapScale.mass = 1;    mapScale.fromValue =        @([[self.mapView.layer.presentationLayer        valueForKeyPath:mapScale.keyPath] floatValue]);    mapScale.toValue = @(1.1);    [self.mapView.layer addAnimation:mapScale forKey:mapScale.keyPath];    self.mapView.transform =        CGAffineTransformScale(CGAffineTransformIdentity, 1.1, 1.1);    JNWSpringAnimation *mapTranslate =        [JNWSpringAnimation animationWithKeyPath:@"transform.translation.y"];    mapTranslate.damping = dampingStiffnessOut;    mapTranslate.stiffness = dampingStiffnessOut;    mapTranslate.mass = 1;    mapTranslate.fromValue =        @([[self.mapView.layer.presentationLayer        valueForKeyPath:mapTranslate.keyPath] floatValue]);    mapTranslate.toValue = @(30);    [self.mapView.layer addAnimation:mapTranslate forKey:mapTranslate.keyPath];    self.mapView.transform = CGAffineTransformTranslate(self.mapView.transform, 0, 30);    // 主app背景的比例動畫。我們將其動畫回1.0倍    JNWSpringAnimation *scale =        [JNWSpringAnimation animationWithKeyPath:@"transform.scale"];    scale.damping = dampingStiffnessOut;    scale.stiffness = dampingStiffnessOut;    scale.mass = 1;    scale.fromValue =        @([[self.appBackground.layer.presentationLayer        valueForKeyPath:@"transform.scale.x"] floatValue]);    scale.toValue = @(1.0);    [self.appBackground.layer addAnimation:scale forKey:scale.keyPath];    self.appBackground.transform =        CGAffineTransformScale(CGAffineTransformIdentity, 1.0, 1.0);}

這裡是完整的、最終的動畫的樣子。如果你想一個瘋子一樣點擊，會發現它確實是從當前值開始動畫的，而且不會抽動。

這很有意思！現在讓我們去轉眼有些斷斷續續的動畫。

查看完整合集：https://github.com/Cloudox/Motion-Design-for-iOS
著作權：http://blog.csdn.net/cloudox_

《Motion Design for iOS》（三十三）