一個簡單的點擊按鈕彈出多個按鈕的動畫，此示例以點擊一個按鈕彈出三個按鈕為例：
1、在sb上搭建好要展示按鈕的位置，如下圖：
屏幕快照 2017-12-02 下午11.56.01.png
2、從sb向控制器拖線如下圖：
Snip20171203_1.png
3、現在讓dietBtn、rideBtn、runBtn這三個位于addBtn中心，代碼如下：
override func viewDidLoad() {
super.viewDidLoad()
// 讓dietBtn、rideBtn、runBtn這三個按鈕位于addBtn按鈕中心
dietBtn.center = addBtn.center
rideBtn.center = addBtn.center;
runBtn.center = addBtn.center;
}
運行后如圖：
Snip20171203_3.png
4、由于addBtn按鈕要顯示在最上面，注意添加這四個按鈕的順序，應該最后添加addBtn。
5、第三步代碼可以讓dietBtn、rideBtn、runBtn這三個位于addBtn中心位置。
注意：由于UI設計師切圖切的這四個按鈕尺寸可能不一致，如addBtn按鈕的size小于其他三個按鈕的size，那么就會出現addBtn遮蓋不住其余三個按鈕，解決辦法就是，在sb設置除addBtn之外的三個按鈕的alpha值為0即可。
6、此時我們要做的就是點擊addBtn按鈕，從addBtn中心彈出其余三個按鈕返回到原位置，由于彈出的三個按鈕要返回到原位置，所以我們開始的時候就要保存那三個按鈕的位置，代碼如下：
import UIKit
class ViewController: UIViewController {
@IBOutlet weak var addBtn: UIButton!
@IBOutlet weak var dietBtn: UIButton!
@IBOutlet weak var rideBtn: UIButton!
@IBOutlet weak var runBtn: UIButton!
var dietBtnOriginCenter: CGPoint!
var rideBtnOriginCenter: CGPoint!
var runBtnOriginCenter: CGPoint!
override func viewDidLoad() {
super.viewDidLoad()
// 保存dietBtn、rideBtn、runBtn這三個按鈕在屏幕中的初始位置
dietBtnOriginCenter = dietBtn.center
rideBtnOriginCenter = rideBtn.center
runBtnOriginCenter = runBtn.center
// 讓dietBtn、rideBtn、runBtn這三個按鈕位于addBtn按鈕中心
dietBtn.center = addBtn.center
rideBtn.center = addBtn.center;
runBtn.center = addBtn.center;
}
}
7、點擊addBtn按鈕彈出三個按鈕返回到原始位置，由于我們之前設置了那三個按鈕的alpha值為0。所以，在返回到原始位置之前，要把它們的alpha值修改為1，然后添加UIView動畫，返回到原始位置代碼如下：
//MARK: - 點擊加號按鈕
@IBAction func addBtnClicked(_ sender: UIButton) {
sender.isSelected = !sender.isSelected
if sender.isSelected {
UIView.animate(withDuration: 0.3, animations: {
self.dietBtn.alpha = 1;
self.rideBtn.alpha = 1;
self.runBtn.alpha = 1;
self.dietBtn.center = self.dietBtnOriginCenter
self.rideBtn.center = self.rideBtnOriginCenter
self.runBtn.center = self.runBtnOriginCenter
self.addBtn.setBackgroundImage(#imageLiteral(resourceName: "btn_home_add_packup"), for: .normal)
})
} else {
UIView.animate(withDuration: 0.3, animations: {
self.dietBtn.alpha = 0;
self.rideBtn.alpha = 0;
self.runBtn.alpha = 0;
self.dietBtn.center = self.addBtn.center
self.rideBtn.center = self.addBtn.center
self.runBtn.center = self.addBtn.center
self.addBtn.setBackgroundImage(#imageLiteral(resourceName: "btn_home_add_unfold"), for: .normal)
})
}
}
最后，運行代碼效果圖如下：
buttonMenuAnimation.gif
