围绕 X 或 Y 轴旋转的两层视图

Posted 2023-02-22

【中文标题】围绕 X 或 Y 轴旋转的两层视图

【英文标题】：A two-layer view rotating around X or Y axis

【发布时间】：2018-03-22 20:56:25

【问题描述】：

为了执行翻转动画，将一个图像变为另一个图像，我有一个两层 UIView（也尝试了带有两个子视图的 UIView - 同样的问题）围绕 X（或 Y）轴在 3D 中旋转。

当旋转角度低于 pi/2 时，顶层隐藏底层，这是可以的，但是在 pi/2 和 pi 之间的角度我希望看到底层。

其实不管旋转角度如何，顶层都是可见的，虽然两层都可以，就像我把顶层隐藏了一样，我可以一直看到底层。

它看起来像是来自 Apple 的僵硬设计，或者我可能错过了什么。到目前为止，我必须手动制作动画，没有更好的选择。

这是（简化的）代码供希望尝试的人使用：

let frame = CGRect(origin: CGPoint(), size: spriteSize)

let sprite = UIView(frame: frame)
sprite.isHidden = true

let bottomLayer = CALayer()
bottomLayer.frame = frame
bottomLayer.contents = UIImage(named:"name1.png")!.cgImage
bottomLayer.transform = CATransform3DMakeScale(-1, 1, 1)
sprite.layer.addSublayer(bottomLayer)

let topLayer = CALayer()
topLayer.frame = frame
topLayer.contents = UIImage(named:"name2.png")!.cgImage
sprite.layer.addSublayer(topLayer)

parent.addSubview(sprite)

sprite.layer.position = fromPosition
sprite.isHidden = false

UIView.animate(withDuration: 3, delay: 0,
                    animations:
    sprite.layer.transform =
            CATransform3DConcat(
                    CATransform3DMakeRotation(CGFloat.pi, 1, 0, 0))
    sprite.layer.position = targetPosition
)

【问题讨论】：

不清楚您要做什么。这有点像翻转扑克牌以露出背面：这是一个很好的类比吗？

@matt;是的，他们正在尝试这样做。 @OP：[UIView transitionWithView:duration:options:animations:completion:] 允许您指定“翻转”动画以将视图从前翻转到后..

【参考方案1】：

找到了解决办法。尽管有两个图像，顶部图像在开始时具有正 Z，在结束时具有负 Z（尝试过 zPosition 用于两层视图 - 不！）：

let frame = CGRect(origin: CGPoint(), size: spriteSize)

let sprite = UIView(frame: frame)
sprite.isHidden = true

let bottomView = UIIMageView(image: UIImage(named:"name1.png"))
bottomView.frame = frame
bottomView.layer.transform = CATransform3DMakeScale(-1, 1, 1)
sprite.addSubview(bottomView)

let topView = UIImageView(image: UIImage(named:"name2.png"))
topView.frame = frame
topView.layer.transform = 
      CATransform3DMakeTranslation(0, 0, 0.5) // !!!!
sprite.addSubview(topView)

parent.addSubview(sprite)
sprite.layer.position = fromPosition
sprite.isHidden = false

UIView.animate(withDuration: 3, delay: 0, animations:
    sprite.subviews.last!.layer.transform =
           CATransform3DMakeTranslation(0, 0, -0.5) // !!!!
    sprite.layer.transform =
            CATransform3DConcat(
                    CATransform3DMakeRotation(CGFloat.pi, 1, 0, 0))
    sprite.layer.position = targetPosition
)