带圆角的翻转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

最简单的方法是将视图的背景设置为所需颜色的图像，使图像中的角落圆角，而不是将背景设置为颜色并在代码中四舍五入。