一個簡單的點擊按鈕彈出多個按鈕的動畫，此示例以點擊一個按鈕彈出三個按鈕為例：

1、在sb上搭建好要展示按鈕的位置，如下圖：

屏幕快照 2017-12-02 下午11.56.01.png

2、從sb向控制器拖線如下圖：

Snip20171203_1.png

3、現(xiàn)在讓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按鈕要顯示在最上面，注意添加這四個按鈕的順序，應(yīng)該最后添加addBtn。

5、第三步代碼可以讓dietBtn、rideBtn、runBtn這三個位于addBtn中心位置。
注意：由于UI設(shè)計師切圖切的這四個按鈕尺寸可能不一致，如addBtn按鈕的size小于其他三個按鈕的size，那么就會出現(xiàn)addBtn遮蓋不住其余三個按鈕，解決辦法就是，在sb設(shè)置除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按鈕彈出三個按鈕返回到原始位置，由于我們之前設(shè)置了那三個按鈕的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

代碼鏈接:https://github.com/linan08104/ButtonMenuAnimation