雙面UIView不能正常工作

Question

我有一個叫做TitleView的UIView的子類，所有這個子類都會覆蓋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 
    } 
}