iOS這樣的 StackView 動畫，你想到了嗎？

下面是 @atomicbird 演示的例子，我在博客中模仿了這種效果。這個 app 中有一個設置按鈕，用戶可以通過它來選擇一個表情表示當前狀態。

初始設置

初始設置很簡單，把 StackView 加到 View 上，添加相關約束，然后用按鈕來組成這個可愛的表情菜單。

Stackview 非常簡單，而且容易上手，所以即使你沒接觸過，這部分也會很有趣。??

下一步是對表情按鈕進行操作（除設置按鈕外），給這些需要做動畫的按鈕創建一個 Outlet Collection 。

?

正如你所看到的那樣，創建一個 Outlet Collection 與創建一個 Outlet 的方式是一樣的，只不過 Outlet Collection 是子控件組成的數組。所以按住 Control 鍵，并拖動鼠標去創建一個新的 Outlet Collection 即可。

動畫 :tada:

我們將通過控制表情按鈕的 hidden 屬性來達到動畫的效果。首先，需要確認這些表情按鈕默認是被隱藏的。遍歷所有的表情按鈕，使之隱藏。

@IBOutlet var emojiButtons: [UIButton]! {
didSet {
    emojiButtons.forEach {
        $0.isHidden = true
    }
}
}

下面將進行有“難度”的操作，你準備好了嗎？

當設置按鈕被點擊時，執行一個動畫去遍歷所有的表情按鈕，并切換它們的 hidden 狀態。

@IBAction func onSettingsButtonTap(_ sender: AnyObject) {
    UIView.animate(withDuration: 0.3) {
        self.emojiButtons.forEach {
            $0.isHidden = !$0.isHidden
        }
    }
}

總結

這些精練的技巧，使得 StackView 超乎想象的強大。我也因此受到了很大的鼓舞，相信可以通過 StackView 做出更有創意的東西。非常感謝 @atomicbird ！

你可以在 這里 看到我的示例代碼，同時可以與使用 Autolayout 的情況做個比較。

來自：http://swift.gg/2016/08/10/button-animation-stackview/