CAGradientLayer搞乱了CATransform3DRotate

Question

我在一个CATransform3DRotate中观察到一个奇怪的行为，我正在将它应用于一个视图的层，该视图位于一个具有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

将z平移添加到变换中：

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)

如果您查看Debug View Hierarchy，您可以看到您的视图在同一计划中。

您还可以设置zPosition (这是z翻译的一种简写形式)：

flipView.layer.zPosition = 300