使用 isHidden 的 UIStackView 动画

Question

[编辑] 我已经推送了一个包含零高度约束解决方案的提交，但是，现在我必须处理隐式 UISV 约束。

我花了几个小时来了解如何更改堆栈视图中出现/消失的项目的动画。 我想从屏幕底部动画显示这两个按钮，但是，它们总是从右上角飞出：

有没有 Cocoa 的方式来配置动画从底部开始？ 附言Link to the project.

动画块：

UIView.animate(withDuration: 5.0,
                   delay: 0.5,
                   options: .curveEaseInOut,
                   animations:
        {
            self.buttons.forEach { $0.isHidden = !$0.isHidden }
            self.stack.layoutIfNeeded()
        }, completion: nil)

Answer 1

这里有两种方法可以让按钮看起来像是从屏幕底部向上滑动。这两种方法都不会涉及更改堆栈视图的高度或按钮的isHidden。

解决方案 1

如果视图控制器视图（场景的“根视图”）的底部边缘位于屏幕底部边缘，或者启用了“剪辑到边界”，则此解决方案效果很好。

• 将堆栈视图的底部限制在根视图安全区域的底部，优先级为 999。
• 将堆栈视图的顶部约束到根视图的底部（不是安全区域），优先级为 1000，但通过在其属性检查器中取消选中“已安装”来使此约束无效。将名为 stackHidingConstraint 的插座连接到此约束。

要切换按钮的可见性，请设置stackHidingConstraint.isActive = !stackHidingConstraint.isActive。当约束处于活动状态时，它通过将堆栈视图放在根视图的底部边缘来隐藏按钮。当约束处于非活动状态时，priority-999 底部边缘约束通过将堆栈视图置于根视图安全区域的底部边缘上方来显示按钮。

看起来像这样：

解决方案 2

此解决方案适用于解决方案 1 不适用的情况（如果场景的根视图的底部边缘不在屏幕底部边缘并且未启用“剪辑到边界”），但需要视图层次结构的微小变化。

• 将堆栈视图嵌入容器UIView。我们称之为堆栈隐藏视图。
• 为堆栈隐藏视图打开“Clip to Bounds”。
• 将堆栈隐藏视图的左侧、右侧和底部边缘约束到根视图安全区域的左侧、右侧和底部边缘。
• 将堆栈视图的左侧、右侧和顶部边缘约束到堆栈隐藏视图的左侧、右侧和顶部边缘。
• 将堆栈视图的底部边缘限制为堆栈隐藏视图的底部边缘优先级为 999。
• 将堆栈隐藏视图的高度限制为 0。将名为 stackHidingConstraint 的插座连接到此限制。在情节提要中使此约束处于非活动状态（卸载）。

再一次，要切换按钮的可见性，请设置stackHidingConstraint.isActive = !stackHidingConstraint.isActive。当约束处于活动状态时，它通过将堆栈隐藏视图的高度设置为零来隐藏按钮。由于堆栈隐藏视图剪辑了它的子视图，这使得子视图不可见。当约束处于非活动状态时，priority-999 底部边缘约束使堆栈隐藏视图的高度与堆栈视图相等，因此子视图可见。

看起来像这样：

与解决方案 1 的唯一明显区别是，在解决方案 1 中，您可以看到按钮在标签栏下方滑动。在解决方案 2 中，它们不会在标签栏下方滑动。

你可以在这里找到我的测试项目：https://github.com/mayoff/StackViewAnimation

Answer 2

我已经使用高度约束的动画修复了它。似乎这是实现行为的唯一方法。