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

// 旋轉頂部的線來構成X
POPSpringAnimation *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"];
}

// 旋轉底部的線來構成X
POPSpringAnimation *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並且我們需要調整框架，這純粹是找麻煩。所以，更簡單的做法是，我們可以就將頂部線下移一點，然後將底部的線上移一旦，然後重疊它們。<喎?/kf/ware/vc/" target="_blank" class="keylink">vcD4NCjxwcmUgY2xhc3M9"brush:java;"> // 重定位頂部的線到按鈕的中間 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