使用isHidden的UIStackView动画

Question

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

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

是否有任何可可方式将动画配置为从底部开始？ 附言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中。我们称其为堆栈隐藏视图。
• 打开“隐藏边界”以显示堆栈隐藏视图。
• 将堆栈隐藏视图的左，右和下边缘限制在根视图的安全区域的左，右和下边缘。
• 将堆栈视图的左，右和上边缘限制在堆栈隐藏视图的左，右和上边缘。
• 将堆栈视图的底部边缘限制为堆栈隐藏视图的底部边缘，优先级999 。
• 将堆叠隐藏视图的高度限制为0。将名为stackHidingConstraint的出口连接到此约束。在情节提要中将此约束设为非活动状态（未安装）。

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

它看起来像这样：

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

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

Answer 2

我已使用高度限制的动画对其进行了修复。看来这是实现行为的唯一方法。