ios - 用圆角翻转 UIView

Question

我尝试翻转具有圆角(边框)的 View 。

View 的圆角是通过以下方式实现的:

  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 那样流畅
• 效果反射(reflect)了 View 上的内容 --> 我不需要那个(下图)
• 旋转并没有完全结束，所以 View 有时会错位(下图)

更新:解决方案 我在带有圆角的彩色 View 周围添加了一个容器 View ，并翻转了容器而不是彩色 View 。然后一切正常!

Answer 1

我的建议是把你要翻转的 View 添加到清晰的 View 中，然后翻转持有它的父 View 。我认为这与重新渲染的图层有关但不完全确定。这是一个使用 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"
        }
    }

}

我正在使用您的扩展来圆角。我试图复制我认为你正在尝试做的事情。