構建一個動畫的漢堡按鈕

漢堡按鈕和滑出式菜單可能是整個產業中最兩極分化的界面元素。蘋果的狂熱支持者反對漢堡按鈕和相應的滑出式菜單，說設計師（以及工程師、產品經理和CEO們）喜歡在那堆積盡可能多的東西，因為你有了很多垂直地空間。

我不能說我不認同，因為用戶測試表明用戶其實不太使用滑出式菜單，但可能我是一個偽君子，因為我還是在我的iPhone app Interesting中使用了一個漢堡按鈕，這樣看來我也是一個問題！不論如何，如果你打算使用一個漢堡按鈕，你也要讓它有趣、討喜來讓人們點擊。

所以一個漢堡按鈕的基本元素是什麼？典型的是有三個水平欄來描繪常規狀態，然後如果你想要精致一點的話，你可以在菜單打開時將欄換成X形。當然了，Pop就是用來讓用戶界面開發師變得精致的，所以為什麼不給這個過渡加上一些動畫呢？

稍微看一下我們要構建的是什麼。

---

---

開始時，我們有一個圓形的黑色按鈕，裡面中間有一個漢堡形的線。當按鈕被點擊時，它動畫到一個稍微小一點的尺寸。但點擊結束時，線會動畫城紅色的X。當點擊X狀態時，動畫會回到原始的顏色和位置。這是一個明顯簡化的關於發生了什麼的解釋，讓我們來看看代碼。<喎?/kf/ware/vc/" target="_blank" class="keylink">vcD4NCjxwcmUgY2xhc3M9"brush:java;"> // 將漢堡按鈕添加到屏幕上 self.hamburgerButton = [DTCTestButton buttonWithType:UIButtonTypeCustom]; [self.hamburgerButton addTarget:self action:@selector(didTapHamburgerButton:) forControlEvents:UIControlEventTouchUpInside]; self.hamburgerButton.backgroundColor = [UIColor blackColor]; [self.hamburgerButton setFrame:CGRectMake(200, 200, 150, 150)]; self.hamburgerButton.layer.cornerRadius = 75; [self.window addSubview:self.hamburgerButton];

我們將漢堡按鈕設為類的@property，這樣我們就可以通過self.hamburgerButton來調用它。它使用了我們在之前的例子裡創建的同樣的按鈕子類，這樣我們就可以在用戶點擊時立即獲取好的有彈性的感覺。我們還設置按鈕在用戶松開他們點擊按鈕的手指時的事件UIControlEventTouchUpInside下調用我們的方法 -didTapHamburgerButton: 。我們還將按鈕設為黑色的並且有圓角。

這裡是我們目前有的樣子。

---

---

該把我們的漢堡線作為子視圖添加到按鈕上了。

CGFloat sectionWidth = 80;
CGFloat sectionHeight = 11;

// 添加上、中、下漢堡線
self.top = [[UIView alloc] initWithFrame:
    CGRectMake(self.hamburgerButton.bounds.size.width/2 - sectionWidth/2,
    40, sectionWidth, sectionHeight)];
self.top.backgroundColor = [UIColor whiteColor];
self.top.userInteractionEnabled = NO;
self.top.layer.cornerRadius = sectionHeight/2;
[self.hamburgerButton addSubview:self.top];

self.middle = [[UIView alloc] initWithFrame:
    CGRectMake(self.hamburgerButton.bounds.size.width/2 - sectionWidth/2,
    69, sectionWidth, sectionHeight)];
self.middle.backgroundColor = [UIColor whiteColor];
self.middle.userInteractionEnabled = NO;
self.middle.layer.cornerRadius = sectionHeight/2;
[self.hamburgerButton addSubview:self.middle];

self.bottom = [[UIView alloc] initWithFrame:
    CGRectMake(self.hamburgerButton.bounds.size.width/2 - sectionWidth/2,
    99, sectionWidth, sectionHeight)];
self.bottom.backgroundColor = [UIColor whiteColor];
self.bottom.userInteractionEnabled = NO;
self.bottom.layer.cornerRadius = sectionHeight/2;
[self.hamburgerButton addSubview:self.bottom];

我設置了一些我們會在這個代碼中重復用到的CGFloat的數字變量。我添加了三個UIView對象到主漢堡按鈕上，每個都是白色背景的圓角矩形。它們都放置在大漢堡按鈕的水平中心，並在垂直方向上分離。這段代碼中最有趣的地方在於我設置這些每個視圖的UserInteractionEnabled屬性為NO。如果我們不對這些視圖這樣做，如果直接點擊按鈕，會吞沒觸摸事件並且不會傳遞到實際的完整漢堡按鈕上。這裡是現在看起來的樣子。

---

---

現在不添加任何代碼，因為這個按鈕是我們在之前的例子中創建的UIButton子類DTCTestButton類型的，已經有了一些動畫了。

---

---

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