帶圓角的翻轉UIView

Question

我嘗試翻轉具有圓角（邊框）的視圖。

視圖的圓角與實施：

private extension UIView { 

    func round(corners: UIRectCorner, radius: CGFloat, borderColor: UIColor, borderWidth: CGFloat) { 
    let mask = _round(corners: corners, radius: radius) 
    addBorder(mask: mask, borderColor: borderColor, borderWidth: borderWidth) 
} 

     @discardableResult func _round(corners: UIRectCorner, radius: CGFloat) -> CAShapeLayer { 
      let path = UIBezierPath(roundedRect: bounds, byRoundingCorners: corners, cornerRadii: CGSize(width: radius, height: radius)) 
      let mask = CAShapeLayer() 
      mask.path = path.cgPath 
      self.layer.mask = mask 
      return mask 
     } 

     func addBorder(mask: CAShapeLayer, borderColor: UIColor, borderWidth: CGFloat) { 
      let borderLayer = CAShapeLayer() 
      borderLayer.path = mask.path 
      borderLayer.fillColor = UIColor.clear.cgColor 
      borderLayer.strokeColor = borderColor.cgColor 
      borderLayer.lineWidth = borderWidth 
      borderLayer.frame = bounds 
      layer.addSublayer(borderLayer) 
     } 

    } 

當翻蓋上運行的翻蓋與

UIView.transition(with: self, duration: 0.5, options: [.transitionFlipFromRight], animations: {}, completion: {_ in }) 

實施，寄宿生都不會再四捨五入而過渡正在運行。

任何人有一個想法如何做翻蓋，沒有鬆動的圓角？

更新

如果我去this的做法，我有幾個問題。

翻蓋現在已經實現這樣的：

let flipAnimation = CABasicAnimation(keyPath: "transform") 
     flipAnimation.fromValue = NSValue(caTransform3D: CATransform3DIdentity) 
     flipAnimation.toValue = NSValue(caTransform3D: CATransform3DMakeRotation(.pi, 0,1,0)) 
     flipAnimation.fillMode = kCAFillModeBoth 

     self.layer.add(flipAnimation, forKey: "flip") 
     self.layer.zPosition = -1000 

     CATransaction.commit() 

問題

• 動畫不說，光滑如UIView.transition
• 的影響反映在視圖上的內容 - - >我不需要（下圖）
• 旋轉不完全結束，所以視圖在某個時候放錯了位置S（下圖）

更新：溶液 我加入一個容器視圖與周圍的圓角着色視圖和翻轉所述容器代替的着色圖。然後一切正常！

Answer 1

我的建議是將你想要翻轉的視圖添加到一個清晰的視圖，並翻轉它的父母。我認爲這是關於圖層被重新渲染但不完全確定的事情。這是一個使用CATransition的工作示例，但我的猜測是其他方法可行。

import UIKit 

class ViewController: UIViewController { 

    var label = UILabel() 
    var flipper = UIView() 
    var flipperContainer = UIView() 

    override func viewDidLoad() { 
     super.viewDidLoad() 
     // Do any additional setup after loading the view, typically from a nib. 
     flipperContainer = UIView(frame: CGRect(x: 0, y: 0, width: 200, height: 100)) 
     flipperContainer.backgroundColor = .clear 
     flipperContainer.center = self.view.center 
     self.view.addSubview(flipperContainer) 

     flipper = UIView(frame: CGRect(x: 0, y: 0, width: 200, height: 100)) 
     flipper.backgroundColor = UIColor.green 
     flipper.round(corners: [UIRectCorner.topLeft,UIRectCorner.topRight], radius: 6, borderColor: .white, borderWidth: 1) 
     self.flipperContainer.addSubview(flipper) 



     //add a label 
     label = UILabel(frame: CGRect(x: 0, y: 0, width: flipper.bounds.width, height: flipper.bounds.height)) 
     label.textAlignment = .center 
     label.center = flipper.center 
     label.textColor = UIColor.white 
     label.text = "7" 

     flipper.addSubview(label) 

     self.view.backgroundColor = UIColor.black 


     let flipButton = UIButton(frame: CGRect(x: 0, y: 0, width: self.view.bounds.width - 20, height: 50)) 
     flipButton.center = flipperContainer.center 
     flipButton.center.y = flipperContainer.center.y + flipperContainer.bounds.height/2 + 20 
     flipButton.addTarget(self, action: #selector(ViewController.pressed(sender:)), for: .touchUpInside) 
     flipButton.setTitle("Flip", for: .normal) 
     flipButton.setTitleColor(.white, for: .normal) 

     self.view.addSubview(flipButton) 
    } 

    func pressed(sender:UIButton) { 

     let trans = CATransition() 
     trans.duration = 1.0 
     trans.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseInEaseOut) 
     trans.type = "flip" 
     trans.subtype = kCATransitionFromRight 
     //perform flip but on container 
     flipperContainer.layer.add(trans, forKey: nil) 

     if flipper.backgroundColor == UIColor.green{ 
      flipper.backgroundColor = .blue 
      label.text = "20" 
     }else{ 
      flipper.backgroundColor = .green 
      label.text = "7" 
     } 
    } 

} 

我正在使用您的擴展來圓角。我試圖複製我認爲你正在嘗試做的事情。

Answer 2

最簡單的方法是將視圖的背景設置爲所需顏色的圖像，使圖像中的角落圓角，而不是將背景設置爲顏色並在代碼中四捨五入。