CAGradientLayer弄亂了CATransform3DRotate

Question

我在CATransform3DRotate觀察到一個奇怪的行為，該行為正在應用於視圖層，該視圖位於其層具有CAGradientLayer的視圖的CAGradientLayer 。

當漸變視圖存在時，變換動畫將掩蓋我正在變換的視圖的一半，以及它前面的所有其他內容。 如果漸變視圖不存在或不在視圖后面，則一切正常。

這是顯示我的意思的屏幕截圖。 您可以清楚地看到旋轉視圖如何被部分隱藏以及下面的滑塊。

由於它看起來像漸變層位於不同的z平面上，因此我嘗試使用它的z位置，但這沒有幫助。 同樣，這仍然無法向我解釋完全不相關的UISlider也如何被屏蔽。

我在這里做錯了什么？

下面是一個完全獨立的UIViewController ，它說明了我的問題。

class TestViewController: UIViewController {
    private var gradientLayer: CAGradientLayer!
    private var flipContent: UILabel!
    private var flipView: UIView!
    private var gradientView: UIView!
    private var slider: UISlider!

    override func viewDidLoad() {
        super.viewDidLoad()
        setupViews()
        setupGradientLayer()
    }

    @IBAction func didChangeValue(_ sender: UISlider) {
        var perspectiveTransform = CATransform3DIdentity
        perspectiveTransform.m34 = -0.002
        let rotateAngle = CGFloat(sender.value) * CGFloat(Double.pi)
        let flipTransform = CATransform3DRotate(perspectiveTransform, rotateAngle, 0, 1, 0)
        flipView.layer.transform = flipTransform
    }

    private func setupGradientLayer() {
        gradientLayer = CAGradientLayer()
        gradientLayer.colors = [
            UIColor(red: 74 / 255, green: 173 / 255, blue: 255 / 255, alpha: 1.0).cgColor,
            UIColor(red: 0 / 255, green: 94 / 255, blue: 215 / 255, alpha: 1.0).cgColor
        ]
        gradientLayer.frame = view.bounds
        gradientView.layer.insertSublayer(gradientLayer, at: 0)
    }

    private func setupViews() {
        gradientView = UIView(frame: CGRect(x: 10, y: 150, width: 200, height: 30))
        slider = UISlider(frame: CGRect(x: 10, y: 400, width: 200, height: 30))
        slider.minimumValue = 0
        slider.maximumValue = 1
        slider.addTarget(self, action: #selector(didChangeValue(_:)), for: .valueChanged)
        flipView = UIView(frame: CGRect(x: 10, y: 100, width: 200, height: 200))
        flipView.backgroundColor = UIColor.lightGray
        flipContent = UILabel(frame: CGRect(x: 10, y: 100, width: 100, height: 100))
        flipContent.text = "I will flip"

        flipView.addSubview(flipContent)
        view.addSubview(gradientView)
        view.addSubview(flipView)
        view.addSubview(slider)
    }
}

Answer 1

在您的轉換中添加az翻譯：

var perspectiveTransform = CATransform3DIdentity
perspectiveTransform.m34 = -0.002
let rotateAngle = CGFloat(sender.value) * CGFloat(Double.pi)
perspectiveTransform = CATransform3DTranslate(perspectiveTransform, 0, 0, 300)
flipView.layer.transform = CATransform3DRotate(perspectiveTransform, rotateAngle, 0, 1, 0)

如果您查看“調試視圖層次結構”，則可以看到您的視圖在同一計划中。

您還可以設置zPosition（這是z轉換的一種簡寫形式）：

flipView.layer.zPosition = 300