《Motion Design for iOS》（四十五）

標籤：

我們現在還剩兩個動畫，但它們比較大，需要一些思考。我們需要將頂部的線順時針旋轉45度（所以右邊向下傾斜），然後我們需要底部的線逆時針旋轉45度（所以右邊向上傾斜）。逆時針旋轉意味著我們需要旋轉一個負值，所以是-45度。當然了，動畫不會接受度數值，它們需要角度值，45度在角度上是π/4。來做一些旋轉動畫。

// 旋轉頂部的線來構成XPOPSpringAnimation *topRotate =    [self.top.layer pop_animationForKey:@"topRotate"];if (topRotate) {    topRotate.toValue = @(-M_PI/4);} else {    topRotate =        [POPSpringAnimation animationWithPropertyNamed:kPOPLayerRotation];    topRotate.toValue = @(-M_PI/4);    topRotate.springBounciness = 11;    topRotate.springSpeed = 18.0f;    [self.top.layer pop_addAnimation:topRotate forKey:@"topRotate"];}// 旋轉底部的線來構成XPOPSpringAnimation *bottomRotate =    [self.bottom.layer pop_animationForKey:@"bottomRotate"];if (bottomRotate) {    bottomRotate.toValue = @(M_PI/4);} else {    bottomRotate =        [POPSpringAnimation animationWithPropertyNamed:kPOPLayerRotation];    bottomRotate.toValue = @(M_PI/4);    bottomRotate.springBounciness = 11;    bottomRotate.springSpeed = 18.0f;    [self.bottom.layer pop_addAnimation:bottomRotate forKey:@"bottomRotate"];}

Pop的旋轉動畫時在layer上操作的（看到kPOPLayerRotation了沒），所以我們將動畫添加到支撐這些視圖的layer上。

我們向上旋轉一根線、向下旋轉一根線所以它們應該在中間交叉，對嗎？讓我們看看我們得到了什麼。

額，直觀地說，這可能並不是你期待的樣子。旋轉動畫讓線條變成這樣的原因是沒跟線條都是圍繞著它們layer的中心旋轉的。所以這些視圖會像蹺蹺板一樣旋轉，而不是我們想要的在中間交叉的樣子。我們可以改變layer旋轉的錨點，但這有點麻煩，因為這樣做會重定位layer並且我們需要調整架構，這純粹是找麻煩。所以，更簡單的做法是，我們可以就將頂部線下移一點，然後將底部的線上移一旦，然後重疊它們。

// 重定位頂部的線到按鈕的中間POPSpringAnimation *topPosition =    [self.top.layer pop_animationForKey:@"topPosition"];if (topPosition) {    topPosition.toValue = @(29);} else {    topPosition =        [POPSpringAnimation animationWithPropertyNamed:kPOPLayerTranslationY];    topPosition.toValue = @(29);    topPosition.springBounciness = 0;    topPosition.springSpeed = 18.0f;    [self.top.layer pop_addAnimation:topPosition forKey:@"topPosition"];}// 重定位底部的線到按鈕的中間POPSpringAnimation *bottomPosition =    [self.bottom.layer pop_animationForKey:@"bottomPosition"];if (bottomPosition) {    bottomPosition.toValue = @(-29);} else {    bottomPosition =        [POPSpringAnimation animationWithPropertyNamed:kPOPLayerTranslationY];    bottomPosition.toValue = @(-29);    bottomPosition.springBounciness = 0;    bottomPosition.springSpeed = 18.0f;    [self.bottom.layer pop_addAnimation:bottomPosition forKey:@"bottomPosition"];}

經過一些測試和試錯，我決定將頂部的線下移29像素，底部的線上移29像素，這樣會讓它們重合的最好。你也可以做一些三角幾何計算來得出這個值。我們使用kPOPLayerTranslationY動畫來讓兩根線旋轉到按鈕中間的X。

完成了！很好吧？現在，當你點擊按鈕，它會將三根線變成兩根線，但當使用者再次點擊時會發生什麼呢？這時候，不會發生任何事情，因為我們沒有實現任何其他條件分支的邏輯來將X變回三根線。幸運的是，我們可以很簡單地複製粘貼動畫，但是要將toValue值改為初始值。比如說，我們需要將兩根線都旋轉回0度，記得要移動29像素，並將它們的顏色改回白色。還有要將中間的線淡入回100%不透明。這樣就全部完成了，我們得到了一個漂亮的漢堡按鈕。

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

《Motion Design for iOS》（四十五）