iOS 3DAnimations:旋转多个叠加视图时出现问题

Posted

技术标签:

【中文标题】iOS 3DAnimations:旋转多个叠加视图时出现问题【英文标题】:iOS 3DAnimations: Issues when rotating multiple superposed views 【发布时间】:2019-03-22 12:32:01 【问题描述】:

问题

当在同一轴上同时翻转(例如 pi 旋转)视图时,视图层次结构(哪个在前面,哪个在后面)似乎被打乱了。

详细说明

在下面的 GIF 中,带有 swift 图标的灰色视图在前面蓝色视图在后面

您可以注意到,当灰色视图的第一次旋转达到 pi / 2 时,它的透明度似乎发生了变化。此外,当灰色完成第一次旋转时,它不会停留在蓝色视图的后面,而是在下一次旋转过程中显示在前面。

现在重复完全相同的动画,蓝色视图现在没有应用颜色,但它仍然在灰色视图后面的视图层次结构中,并且仍然动画

想要的结果

我正在尝试实现相同的动画,将蓝色视图保持在灰色视图之上,而灰色视图上没有任何明显的透明度变化。我使用UIViewPropertyAnimator 以便稍后能够擦洗动画。

代码

以下代码描述了动画所基于的简化翻转方法(作为 UIView 扩展)。

extension UIView


    func flipping(_ times: Int = 1, to direction: FoldingDirection, within duration: Double = 0.01, startAfter delay: Double = 0) 
        guard times > 0 else  return 


        // resets the layer anchor point depending on the current transform states of the view (calling a specific method)
        self.setAnchorPoint(at: direction.anchor())

        // adding perspective effect 
        self.layer.transform.m34 = 1 / 250

        // setting rotation axis          
        let axis: CGPoint = 
            switch direction 
            case .right, .left:
                return CGPoint(x: 1, y: 0)
            default:
                return CGPoint(x: 0, y: 1)
            
        ()

        let flipDuration = duration > 0 ? duration / Double(times) : 0.01

        // creating animator
        let animator = UIViewPropertyAnimator(duration: flipDuration, curve: .linear) 
            self.layer.transform = CATransform3DRotate(self.layer.transform, .pi, axis.y, axis.x, 0)
        

        animator.startAnimation(afterDelay: delay)

        animator.addCompletion  (position) in
            if position == .end 
                self.flipping(times - 1, to: direction, within: duration * ( 1 - 1 / Double(times)), startAfter: 0)
               
        
    

调用动画:

greyView.flipping(3, to: .right, within: 9, startAfter: 0)
blueView.flipping(2, to: .right, within: 6, startAfter: 3)

感谢您的帮助!

编辑 运行多次测试后,似乎视图层次结构在动画期间确实发生了变化:旋转似乎发生在视图平面后面。

【问题讨论】:

【参考方案1】:

在这种动画中,它们的 Zpostion 没有分配,因此您无法控制哪个更近,哪个更远。

在事件发生时将 zPosition 分配给图层将解决您的问题。你可以比较一下

      greyView.layer.zPosition = 20
       blueView.layer.zPosition = -20

         greyView.layer.zPosition = 200
       blueView.layer.zPosition = -200

你就会明白我的意思了。

【讨论】:

你又把我打死了! :) 在 3D Apple 开发人员文档中发现了这一点。您需要在调用该方法之前对其进行设置。谢谢@E.Coms!另一个你做对了:))))

以上是关于iOS 3DAnimations:旋转多个叠加视图时出现问题的主要内容,如果未能解决你的问题,请参考以下文章

将视图层次结构旋转 90 度

iPad/iOS:管理多个全屏视图?

在 iOS MapKit 中,如何在地图旋转时为注释设置动画?

如何在ios13的状态栏上叠加视图

c_cpp iOS:UIImagePickerController编辑视图圆叠加

OpenCV两张图片叠加,一张旋转一定的角度,另一张不变,如何叠加?