双面 UIView 不起作用

Question

我有一个UIView 的子类，称为TitleView，这个子类所做的只是覆盖layerClass 以返回CATransformLayer。

我的titleView 属性有一些子视图；一个titleBackgroundView 和一个titleLabel。

当我运行我的代码时，titleView 的顶层是可见的（绿色背景），但是当我运行我的翻转动画时，没有动画。代码只是跳转到结束状态。此外，没有可见的底层（红色背景），只是titleView 的反转版本（转换后的titleLabel）。

在 IBOutlet 设置器中，我有以下代码：

@IBOutlet private weak var titleView: TitleView! {
    didSet {
        titleView.backgroundColor = UIColor.clearColor()

        let topLayer = CALayer()
        topLayer.backgroundColor = UIColor.greenColor().CGColor
        topLayer.frame = titleView.bounds
        topLayer.doubleSided = false
        topLayer.zPosition = 3

        titleView.layer.addSublayer(topLayer)

        let bottomLayer = CALayer()
        bottomLayer.backgroundColor = UIColor.redColor().CGColor
        bottomLayer.frame = titleView.bounds
        bottomLayer.doubleSided = false
        bottomLayer.zPosition = 2
        bottomLayer.transform = CATransform3DMakeRotation(CGFloat(M_PI), 1, 0, 0)

        titleView.layer.addSublayer(bottomLayer)
    }
}

titleView动画代码：

private func setIsCategoriesShowing(showCategories: Bool, animated: Bool)
{
    let alreadyInFinishState = (isShowingCategories == showCategories) ? true : false

    if alreadyInFinishState
    {
        return
    }

    //  Setup animations

    isAnimatingCategories = true

    headerView.superview?.bringSubviewToFront(headerView)

    titleView.layer.setAnchorPointDynamically(CGPoint(x: 0.5, y: 1)) // Change position when updating anchor point

    //  Animate

    let duration: NSTimeInterval = animated ? 0.8 : 0
    let options: UIViewAnimationOptions = (showCategories == true) ? [.CurveEaseIn] : [.CurveEaseOut]
    let newRotationValue: CGFloat = (showCategories == true) ? -179 : 0
    let damping: CGFloat = (showCategories == true) ? 0.7 : 1
    let initialSpringVelocity: CGFloat = (showCategories == true) ? 0.5 : 1

    UIView.animateWithDuration(duration,
        delay: 0,
        usingSpringWithDamping: damping,
        initialSpringVelocity: initialSpringVelocity,
        options: options,
        animations: { () -> Void in

            var rotationAndPerspectiveTransform = CATransform3DIdentity
            rotationAndPerspectiveTransform.m34 = 1 / -500
            rotationAndPerspectiveTransform = CATransform3DRotate(rotationAndPerspectiveTransform, newRotationValue, 1, 0, 0);

            self.titleView.layer.sublayerTransform = rotationAndPerspectiveTransform;
        }) { (success) -> Void in

            if showCategories == false
            {
                self.titleView.layer.sublayerTransform = CATransform3DIdentity
            }

            self.isAnimatingCategories = false
            self.isShowingCategories = showCategories
    }
}

Answer 1

好的，经过一系列反复试验，我已经设法（似乎）解决了我的问题。随便看看……

这是工作代码：

@IBOutlet private weak var titleView: TitleView! {
    didSet {
        let bottomLayer = CALayer()
        bottomLayer.backgroundColor = UIColor.redColor().CGColor
        bottomLayer.frame = titleView.bounds
        bottomLayer.doubleSided = false
        bottomLayer.zPosition = 2
        bottomLayer.transform = CATransform3DMakeRotation(CGFloat(M_PI), 0, 1, 0) // Reverse bottom layer, so when flipped it's visible.

        titleView.layer.addSublayer(bottomLayer)

        //  All subviews are one-sided

        for subview in titleView.subviews
        {
            subview.layer.doubleSided = false
        }
    }
}

@IBOutlet private weak var titleViewBackgroundView: UIView!

动画代码：

private func setIsCategoriesShowing(showCategories: Bool, animated: Bool)
{
    let alreadyInFinishState = (isShowingCategories == showCategories) ? true : false

    if alreadyInFinishState
    {
        return
    }

    //  Housekeeping

    headerView.superview?.bringSubviewToFront(headerView)

    titleView.layer.setAnchorPointDynamically(CGPoint(x: 0.5, y: 1))

    //  Animate

    isAnimatingCategories = true

    let isOpening = (showCategories == true)

    let duration: NSTimeInterval = animated ? 3 : 0
    let damping: CGFloat = isOpening ? 0.7 : 1
    let initialSpringVelocity: CGFloat = isOpening ? 0.5 : 1
    let options: UIViewAnimationOptions = isOpening ? [.CurveEaseIn] : [.CurveEaseOut]

    let newRotationValue: CGFloat = isOpening ? -179 : 0

    var rotationAndPerspectiveTransform = CATransform3DIdentity
    rotationAndPerspectiveTransform.m34 = 1 / -500
    rotationAndPerspectiveTransform = CATransform3DRotate(rotationAndPerspectiveTransform, newRotationValue, 1, 0, 0);

    UIView.animateWithDuration(duration,
        delay: 0,
        usingSpringWithDamping: damping,
        initialSpringVelocity: initialSpringVelocity,
        options: options,
        animations: {

            self.titleView.layer.transform = rotationAndPerspectiveTransform;
        }) { (success) -> Void in

            if !isOpening
            {
                self.titleView.layer.transform = CATransform3DIdentity
            }

            self.isAnimatingCategories = !success
            self.isShowingCategories = showCategories
    }
}