Button Menu Animation

一个简单的点击按钮弹出多个按钮的动画，此示例以点击一个按钮弹出三个按钮为例：

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

代码链接:https://github.com/linan08104/ButtonMenuAnimation