即使這些動畫可以通過一個淡出動畫曲線來完成，我也想使用含有相同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