《Motion Design for iOS》（四十三）

標籤：

構建一個動畫的漢堡按鈕

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

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

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

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

開始時，我們有一個圓形的黑色按鈕，裡面中間有一個漢堡形的線。當按鈕被點擊時，它動畫到一個稍微小一點的尺寸。但點擊結束時，線會動畫城紅色的X。當點擊X狀態時，動畫會回到原始的顏色和位置。這是一個明顯簡化的關於發生了什麼的解釋，讓我們來看看代碼。

// 將漢堡按鈕添加到螢幕上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
著作權：http://blog.csdn.net/cloudox_

《Motion Design for iOS》（四十三）