Double sided UIView not working

Question

I have a subclass of UIView called TitleView, all this subclass does is override layerClass to return CATransformLayer.

My titleView property has some subviews; a titleBackgroundView and a titleLabel.

When I run my code the titleView’s top layer is visible (green background), but when I run my flip animation, there’s no animation. The code just jumps to the end state. Furthermore there’s no bottom layer visible (red background), just a reversed version of the titleView (a transformed titleLabel).

In the IBOutlet setter I have the following code:

@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 animation code:

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

Okay, so given a series of trial and error I’ve managed to (it seems) fix my problem. Feel free to take a look…

Here is the working code:

@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!

Animation code:

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
    }
}