快速用户界面转换无法按预期工作

Question

您好，我正在尝试进行快速的 ui 转换，其中可以单击按钮，视图 1 将从屏幕底部向下滑出，而视图 2 从顶部向下滑入屏幕。如果显示视图 2，则视图 2 将从屏幕顶部向上滑出，就像视图 1 从屏幕底部向上滑出一样。我尝试使用自定义过渡来做到这一点，但这些不起作用。将布尔更改包装在动画中也不起作用。我该如何解决这个问题？

import SwiftUI

extension AnyTransition {
    static var moveOne: AnyTransition {
        AnyTransition
            .asymmetric(
                insertion: .move(edge: .bottom),
                removal: .move(edge: .top)
            )
    }
    static var moveTwo: AnyTransition {
        AnyTransition
            .asymmetric(
                insertion: .move(edge: .top),
                removal: .move(edge: .bottom)
            )
    }
}

struct SwiftUIView: View {
    @State var show = true
    var body: some View {
        if !show {
            Rectangle().fill(.red.gradient).frame(width: widthOrHeight(width: true) * 0.8, height: widthOrHeight(width: false)).transition(.moveOne)
                .onTapGesture {
                    show.toggle()
                }
        } else {
            Rectangle().fill(.blue.gradient).frame(width: widthOrHeight(width: true) * 0.8, height: widthOrHeight(width: false)).transition(.moveTwo)
                .onTapGesture {
                    show.toggle()
                }
        }
    }
}

func widthOrHeight(width: Bool) -> CGFloat {
    let scenes = UIApplication.shared.connectedScenes
    let windowScene = scenes.first as? UIWindowScene
    let window = windowScene?.windows.first
    
    if width {
        return window?.screen.bounds.width ?? 0
    } else {
        return window?.screen.bounds.height ?? 0
    }
}

struct SwiftUIView_Previews: PreviewProvider {
    static var previews: some View {
        SwiftUIView()
    }
}

Answer 1

您误解了什么是不对称过渡。

蓝色视图的过渡是：

• 消失时向下移动
• 出现时向上移动

红色视图的过渡是：

• 消失时向上移动
• 出现时向下移动

这些是完全对称的 - 视图出现的动画与视图消失的动画完全相反！

因此，您需要做的就是传递视图在“出现”时应该做什么，并且对称性会自动计算出它在消失时应该做什么。红色视图向下移动，蓝色视图向上移动。 用

withAnimation

包裹，你会得到：

if !show {
    Rectangle().fill(.red)
        .frame(...)
        .transition(.move(edge: .bottom))
        .onTapGesture {
            withAnimation {
                show.toggle()
            }
        }
} else {
    Rectangle().fill(.blue)
    .frame(...)
    .transition(.move(edge: .top))
        .onTapGesture {
            withAnimation {
                show.toggle()
            }
        }
}

旁注，我不建议像这样计算框架。尝试找到一种更 SwiftUI 的方式来完成您想要的任何布局。