UIStackView

Question

我试图像这样隐藏 UIStackView 的子视图：

UIViewPropertyAnimator.runningPropertyAnimator(withDuration: 2.0, 
      delay: 0, options: [.curveEaseOut], animations: {
    self.label.isHidden = true
    self.label.alpha = 0.0
    self.stackView.layoutIfNeeded()
})

但是，使用此代码时标签会立即消失。我怀疑这是因为将 isHidden 设置为 true，这是折叠所必需的。

有没有办法用动画隐藏和折叠 UIStackView 的子视图？或者根本不使用 UIStackView 可能更好？

Answer 1

您可以为视图属性设置动画，例如 alpha、color 等。但是，有些事情会立即发生 - isHidden 在这种情况下。

这是一个使用 UIView.animate 的例子：

UIView.animate(withDuration: 2, delay: 0, options: .curveEaseOut, animations: {
    self.label.alpha = 0 // Changes the label's layer alpha value
}, completion: { finished in
    self.label.isHidden = true // Hides the label
    self.label.layer.alpha = 1 // Resets the label's alpha without un-hiding it
})

使用UIViewPropertyAnimator:

UIViewPropertyAnimator.runningPropertyAnimator(withDuration: 2, delay: 0, options: .curveEaseOut, animations: {
    self.label.alpha = 0 // Sets the label's alpha
}) { _ in
    self.label.isHidden = true // Hides the label
    self.label.alpha = 1 // Resets the label's alpha without un-hiding it
}

Answer 2

确保您没有对 stackview 进行高度限制。试试这个。

UIView.animate(withDuration: 0.5) {
   self.stackView.subviews[INDEX_OF_LABEL_IN_STACK]?.alpha = 0
   self.stackView.subviews[INDEX_OF_LABEL_IN_STACK]?.isHidden = true
   self.view.layoutSubviews()
}

Answer 3

我试过你的代码。它的动画

if self.stackView.subviews.count > 0 {
            UIViewPropertyAnimator.runningPropertyAnimator(withDuration: 1.0, delay: 0, options: [.curveEaseOut], animations: {

                self.stackView.subviews[0].isHidden = true
                self.stackView.subviews[0].alpha = 0.0
                self.stackView.layoutIfNeeded()
            }) { (position) in
                self.stackView.subviews[0].removeFromSuperview()
            }
        }

Answer 4

你可以使用简单的解决方案 animateKeyframes 来淡化 alpha，然后隐藏，我想这会给你你需要的所以在 1 秒和 0.8 秒淡化后隐藏

// showLabel 是 Bool 来处理状态在你文件中声明它

@IBAction func toggleStackLabelTapped(_ sender: UIButton) {

    showLabel = !showLabel

    UIView.animateKeyframes(withDuration: 1, delay: 0, options: .calculationModeLinear, animations: {
        UIView.addKeyframe(withRelativeStartTime: 0, relativeDuration: 0.8) {
            self.label.alpha =  (self.showLabel) ? 1 : 0
        }
        UIView.addKeyframe(withRelativeStartTime: 0.8, relativeDuration: 1) {
            self.label.isHidden = !self.showLabel
        }

    })
}

Answer 5

根据Apple's documentation：

You can animate both changes to the arranged subview’s isHidden property and changes to the stack view’s properties by placing these changes inside an animation block.

我已经使用 iOS 12.1 模拟器测试了以下代码，它按预期工作。

UIView.animate(
    withDuration: 2.0,
    delay: 0.0,
    options: [.curveEaseOut],
    animations: {
        self.label.isHidden = true
        self.label.alpha = 0.0
})

UIStackView - 使用动画隐藏和折叠子视图

UIStackView - hide and collapse subview with animation

ios

swift