扩展UIView时出现奇怪的动画

Question

我有一个XUIView课程，如下所示。运行动画时，对折叠没有效果。

谁能解释我？

class ViewController: UIViewController {

    // Width constraint of XUIView instance
    @IBOutlet weak var vwWrapperWidth: NSLayoutConstraint! {
        didSet{
            self.vwWrapperWidth.constant = UIScreen.main.bounds.width
        }
    }

    @IBAction func btnToggleTouchUp(_ sender: UIButton) {
        if(self.vwWrapperWidth.constant == 55) {
            // animation effect is OK when expanding
            self.vwWrapperWidth.constant = UIScreen.main.bounds.width

            UIView.animate(withDuration: 0.5, animations: {
                self.view.layoutIfNeeded()
            })
        }
        else {
            // animation effect is not OK when folding
            self.vwWrapperWidth.constant = 55
            UIView.animate(withDuration: 0.5, animations: {
                self.view.layoutIfNeeded()
            })
        }
    }
    //.....
}

@IBDesignable
class XUIView: UIView {

    @IBInspectable
    var roundTopLeftCorner: Bool = false

    @IBInspectable
    var roundBottomLeftCorner: Bool = false

    @IBInspectable
    var roundTopRightCorner: Bool = false

    @IBInspectable
    var roundBottomRightCorner: Bool = false

    @IBInspectable
    var cornerRadius: CGFloat = 0.0

    @IBInspectable
    var borderWidth: CGFloat = 0.0

    @IBInspectable
    var borderColor: UIColor?

    fileprivate var borderLayer: CAShapeLayer? {
        didSet{
            self.layer.addSublayer(self.borderLayer!)
        }
    }

    func roundCorners(_ corners: UIRectCorner) {
        if(self.borderLayer == nil) { self.borderLayer = CAShapeLayer() }

        let bounds = self.bounds

        let maskPath = UIBezierPath(roundedRect: bounds, byRoundingCorners: corners, cornerRadii: CGSize(width: self.cornerRadius, height: self.cornerRadius))

        let maskLayer = CAShapeLayer()
        maskLayer.frame = bounds
        maskLayer.path = maskPath.cgPath

        self.layer.mask = maskLayer

        self.borderLayer?.frame = bounds
        self.borderLayer?.path = maskPath.cgPath
        self.borderLayer?.strokeColor = self.borderColor?.cgColor
        self.borderLayer?.lineWidth = self.borderWidth
        self.borderLayer?.fillColor = nil

    }

    override func layoutSubviews() {
        super.layoutSubviews()
        var roundedCorners: UIRectCorner = []
        if(roundTopLeftCorner) { roundedCorners.insert(.topLeft) }
        if(roundTopRightCorner) { roundedCorners.insert(.topRight) }
        if(roundBottomLeftCorner) { roundedCorners.insert(.bottomLeft) }
        if(roundBottomRightCorner) { roundedCorners.insert(.bottomRight) }
        roundCorners(roundedCorners)
    }


}

源代码：http://www.mediafire.com/file/n6svp1mk44fc0uf/TestXUIView.zip/file

Answer 1

问题是您正在布局子视图中创建一个CAShapeLayer，这意味着每次动画发生时，它都会被调用。

试着评论第91行，你会得到你想要的。

Answer 2

您在“折叠”动画上没有遇到任何动画，因为CALayer的路径属性不能隐式设置动画。这里提到了这一点。

与大多数可设置动画的属性不同，path（与所有CGPath可设置动画的属性一样）不支持隐式动画。

最糟糕的是，CALayer的frame属性也不能隐式设置动画。这里提到了

注意：框架属性不能直接动画。相反，您应该对边界、锚点和位置属性的适当组合进行动画处理，以实现所需的结果。

这仅仅意味着以下几行行不通，因为它是在UIView中调用的。设置块的动画。

let maskLayer = CAShapeLayer()
maskLayer.frame = bounds // This line won't animate!
maskLayer.path = maskPath.cgPath // This line won't animate!

self.layer.mask = maskLayer

由于它没有被动画化，所以一旦调用XUIView中的layoutSubview方法，就会应用掩码。视图实际上是动画的，但您只是看不到它，因为在动画完成之前正在设置掩码。

这也是展开动画中发生的情况。首先，遮罩展开，然后出现动画。

要防止出现这种情况，可能需要找到一种方法来设置宽度约束和层帧的动画