UIStackView 显示/隐藏动画无法正常工作

Posted 2023-02-27

【中文标题】UIStackView 显示/隐藏动画无法正常工作

【英文标题】：UIStackView show/hide animation is not working properly

【发布时间】：2021-05-26 10:31:26

【问题描述】：

我正在使用 UIStackView，它包含 3 个 UIView 实例，它们具有固定的高度

我正在尝试通过单击按钮隐藏这些子视图

第一个和第二个视图通过适当的动画显示/隐藏

但最后一个视图没有动画

class ViewController: UIViewController 
    private var flag: Bool = true
    @IBOutlet weak var targetView: UIView!
    
    
    override func viewDidLoad() 
        super.viewDidLoad()
        
    
    
    @IBAction func buttonDidTapped(_ sender: Any) 
        flag = !flag
        
        UIView.animate(withDuration: 0.5) 
            self.view.layoutIfNeeded()
            self.targetView.isHidden = !self.flag
        
        
    

【参考方案1】：

尝试更改您的代码：

    UIView.animate(withDuration: 0.5) 
        self.view.layoutIfNeeded()
        self.targetView.isHidden = !self.flag
    

到：

    self.targetView.isHidden = !self.flag

    UIView.animate(withDuration: 0.5) 
        self.view.layoutIfNeeded()
    

看起来您在更改之前进行了动画处理。

【讨论】：

它不起作用。如果我隐藏第二个视图，它会正确动画。问题是最后一次查看

检查 StackView 是否设置了高度限制。

【参考方案2】：

问题是堆栈视图在隐藏排列的子视图时更改其框架的方式。

查看正在发生的事情的最简单方法：

将您的绿色视图设置为Alpha: 0.5 在蓝色视图上切换 .isHidden

您会看到 50% 半透明的绿色视图“滑过”蓝色视图……蓝色视图在动画期间不会“高度缩小”。

要解决您的特定问题，请在堆栈视图中将Clips To Bounds 设置为true。现在，当您在绿色视图上切换 .isHidden 时，动画看起来会正确。

如果您有半透明视图，这不会改变“滑过”的外观，但这是一个不同的问题。

附带说明一下，您可以像这样简化代码并去掉flag：

    UIView.animate(withDuration: 0.5) 
        // not needed
        //self.view.layoutIfNeeded()
        self.targetView.isHidden.toggle()