即使這些動畫可以通過一個淡出動畫曲線來完成，我也想使用含有相同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變量，這樣我就可以更簡單地調(diào)整它們而不用一次更新兩個值。
這個block代碼中的一個主要的與其他例子不同的改變是比例動畫的fromValue沒有被設為一個常量，而是設為[[self.appBackground.layer.presentationLayer valueForKeyPath:scale.keyPath] floatValue]。這是什么意思呢？如果你一塊塊拆開，這些事要發(fā)生的事：
- 我會使用self.appBackground來訪問這個類的appBackground屬性
- 我會獲取到這個視圖的CALayer對象
- 我在layer上獲取presentationLayer屬性，通過它來獲取特殊的presentation model layer，讓我們看到動畫改變時的值
- 當我有了presentationLayer后，我會調(diào)用 -valueForKeyPath: 來取得變換的比例部分的當前值。（scale.keyPath = @”transform.scale”）
- 當我最后有了當前的比例值后，它不是JNWSpringAnimation需要的數(shù)據(jù)格式，所以我使用了floatValue。
記得之前我提到過在動畫中l(wèi)ayer上的很多屬性值都不會改變么？以及presentation model layer是Core Animation用來存儲動畫發(fā)生過程中精確的變更值的？我們需要獲取比例變換的當前值，這樣就可以在當前任何點開始動畫（記住如果用戶很開心地不停點擊，我們不想要動畫重新開始！）。我們需要獲取特殊的顯示層來查看值。然后我們使用它作為我們動畫的fromValue，這樣他就能始終正常工作，無論fromValue是我們?yōu)橐晥D設置的正常的、未觸摸的比例值，還是動畫中的某個值。如果我們不通過presentationLayer獲取它，這個值在動畫中就始終不會正確，直到動畫結(jié)束。
我們不僅僅需要動畫主app背景，還需要動畫地圖，將比例降回1.0,，并且通過過渡移動到屏幕上。讓我們現(xiàn)在做。
// 地圖有兩個分開的動畫，一個用于位置，一個用于比例
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變量，這樣所有的動畫都感覺是同一個類型的動作。
鎖著這是一塊正統(tǒng)的代碼，好在其非常簡單，而且現(xiàn)在你應該習慣了JNWSpringAnimation代碼塊的樣子。這是目前動畫看起來的樣子。
image
現(xiàn)在是時候添加這個界面的其他動畫了，即當用戶點擊地圖圖標且地圖可見時，我們想要將其淡出并且將主app背景放回到前面。因為它和我們剛才展示的動畫除了開始和結(jié)束值外完全一樣，這里就直接放一個大塊來解釋發(fā)生了什么。
if (self.mapShowing) {
self.mapShowing = NO;
// 再次使用這些動畫相同的damping和stiffness
// 這樣我們就可以獲取CGFloat形式的值。注意這個值會高一點
// 意味著動畫會花費更少的時間（在匹配此damping和stiffness的彈簧動畫下）。
// 少時間是好的，因為我們要回到界面的默認狀態(tài)，而此時用戶只想讓地圖趕緊消失。
CGFloat dampingStiffnessOut = 24.0f;
// 再說一次，從當前狀態(tài)開始很重要，這樣用戶點擊按鈕時就不會抽動
[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);
}
