我們現在真正想做的是讓線動畫交叉變成X。所以讓我們進入我們的 didTapHamburgerButton: 方法，我們每次點擊這個按鈕都會調用它，來看一看我們要做什麼。

- (void)didTapHamburgerButton:(id)sender {  
    if (self.hamburgerOpen) {
        self.hamburgerOpen = NO;
        // 添加把X變回三條線的動畫
    } else {
        self.hamburgerOpen = YES;
        // 添加把三條線變成X的動畫
    }
}

我們需要一種方式來記錄按鈕是否被動畫成X了（如果是一個完整的app，也就是滑出式菜單是否被推出了），所以我天界了一個@property（BOOL）hamburgerOpen到類上，這樣我們就可以每次都設置它並且知道按鈕當前的狀態。這是我們在這個方法中做任何事情前都應該先檢查的變量，因為它的值會指示我們需要執行何種類型的動畫。

讓我們從初始狀態開始，也就是self.hamburgerOpen是false，並且代碼會從上面的else開始執行。在進入實際的代碼之前，讓我們討論一個計劃來將三條水平線變成紅色的X。

我們要將頂部的線向下旋轉到45度角 我們要將底部的線向上旋轉45度角 我們不需要中間的線所以就直接淡出它 旋轉後的線可能不會很好地交叉，所以我們要動畫它們到准確的位置 將兩根交叉的線從白色動畫到紅色

如果你注意了，可能會意識到我們有很多動畫要執行，你是對的。這不是一個不重要的例子，它由多個單獨的動畫組成，但如大多數動畫代碼一樣，它會一步一步執行。我們一直一次只寫一個動畫block，除了這次有很多動畫！讓我們先從淡出中間行開始。

// 淡出中間行
[UIView animateWithDuration:0.2 animations:^{
    self.middle.alpha = 0.0f;
}];

只是一個簡單的基於block的UIView動畫。這個淡出動畫的目標是讓中間行消失，所以我們不需要做任何其他的事情。嗷，我應該提一下，我將頂部、中間和底部的線都作為類的@property了，這就是為什麼我們可以用self.前綴獲取這個變量。

接下來，讓我們把省下來的兩根線從白色動畫成紅色。幸運的是，Pop讓它變得很簡單，你只需要設置toValue的顏色為你最終想要的顏色，它會自動插入中間的顏色。

// 將頂部和頂部線的顏色變為紅色
POPSpringAnimation *topColor = [self.top pop_animationForKey:@"topColor"];

if (topColor) {
    topColor.toValue = [UIColor redColor];
} else {
    topColor =
        [POPSpringAnimation animationWithPropertyNamed:kPOPViewBackgroundColor];
    topColor.toValue = [UIColor redColor];
    topColor.springBounciness = 0;
    topColor.springSpeed = 18.0f;
    [self.top pop_addAnimation:topColor forKey:@"topColor"];
}

POPSpringAnimation *bottomColor = [self.bottom pop_animationForKey:@"bottomColor"];

if (bottomColor) {
    bottomColor.toValue = [UIColor redColor];
} else {
    bottomColor =
        [POPSpringAnimation animationWithPropertyNamed:kPOPViewBackgroundColor];
    bottomColor.toValue = [UIColor redColor];
    bottomColor.springBounciness = 0;
    bottomColor.springSpeed = 18.0f;
    [self.bottom pop_addAnimation:bottomColor forKey:@"bottomColor"];
}

就如我們之前的按鈕例子一樣，當我們重復一個用戶動作時，我們需要確保我們的動畫時流動的，即使用戶瘋狂地快速點擊按鈕並打斷我們的動畫。從當前值開始動畫非常重要，這樣一切就是自然的。這就是為什麼我在創建並添加新動畫前做了一個topColor和bottomColor動畫對象是否已經存在的檢查。如果它們存在，我們就使用存在的動畫並且只設置一個新的toValue，如果不存在，我們就構建一個新的動畫對象。還有，我對這個顏色過渡沒有使用任何彈性，因為我確實不想顏色動畫過度迭代紅色然後變成一些奇怪的顏色。

這時候當用戶點擊按鈕時我們還沒有X，但已經有了這個可愛的視覺了。

---

---

查看完整合集：https://github.com/Cloudox/Motion-Design-for-iOS