Question

我有一个广场,位于分门座的滚动观点内。当对广场进行点击时,我想将其与地表层的顶层联系起来,并将其置于其他一切之外,使用相应的地表效应。我不能 get。

Problem I present the square at the top of the view hierarchy through a window which makes the animation fail. How can I correctly animate with a window?

struct SomeView: View {
    @EnvironmentObject var popRoot: PopToRoot
    @Namespace private var animation
    var body: some View {
        ScrollView {
            RoundedRectangle(cornerRadius: 10)
                .matchedGeometryEffect(id: "squareAnim", in: animation)
                .foregroundStyle(.blue).frame(width: 50, height: 50)
                .onTapGesture {
                    withAnimation {
                        popRoot.showOverlay = true
                    }
                }
            //other sub views
        }
    }
}
struct ContentView: View { //top of view hierarchy
     @EnvironmentObject var popRoot: PopToRoot
     @Namespace private var animation
     var body: some View {
          SomeView()
             .overlay {
                    if showOverlay {
                        TopViewWindow()
                            .matchedGeometryEffect(id: "squareAnim", in: animation)
                            // ----- HERE
                    }
             }
     }
}

class PopToRoot: ObservableObject { //envirnment object to be accessed anywhere
    @Published var showOverlay = false
}

超越一切内容的视觉角色

video player that goes above everything

struct TopView: View {
    var body: some View {
        ZStack {
            RoundedRectangle(cornerRadius: 10)
                .foregroundStyle(.blue).frame(width: 100, height: 100)
            
            //other views
        }.ignoresSafeArea()
    }
}

struct TopViewWindow: View {
    @State private var hostingController: UIHostingController<TopView>? = nil

    func showImage() {
        let swiftUIView = TopView()
        hostingController = UIHostingController(rootView: swiftUIView)
        hostingController?.view.backgroundColor = .clear
        hostingController?.view.frame = CGRect(
            x: 0,
            y: 0,
            width: UIScreen.main.bounds.width,
            height: UIScreen.main.bounds.height)

        if let windowScene = UIApplication.shared.connectedScenes.first as? UIWindowScene,
           let window = windowScene.windows.first {
            // withAnimation { doesnt work here either
            window.addSubview(hostingController!.view)

            hostingController?.view.center.x = window.center.x
        }
    }
    func dismissImage() {
        hostingController?.view.removeFromSuperview()
        hostingController = nil
    }
    var body: some View {
        VStack {}.onAppear { showImage() }.onDisappear { dismissImage() }
    }
}

Answer 1

你们应当确保在参与估算的各种不同观点中正确分享动画空间。根据你的代码,在<代码>中似乎使用不同的名称空间。观点,可能会使问题产生于未按预期行事的估算。

The namespace used for the matched geometry effect should be declared in a common ancestor view and passed down to all child views that need it. That way, the same animation namespace is used across your views.
The ID used with .matchedGeometryEffect (as described in "How to synchronize animations from one view to another with matchedGeometryEffect()" from Paul Hudson) needs to be consistent across both views participating in the animation. It looks like you are using popRoot.playID, which should work as long as it is correctly set before the animation starts.

页: 1 使用了UIHostingController,向视频播放,这可能会使相应的地貌效应复杂化。页: 1 问答表最好在快速调查组的等级内进行,因此考虑将<代码>TopVideo直接纳入快速调查组的观点等级,而不是在窗口上添加。

class PopToRoot: ObservableObject { // Environment object accessible anywhere
    @Published var player: AVPlayer? = nil
    @Published var playID: String = ""
}

struct ContentView: View { // Top of the view hierarchy
    @EnvironmentObject var popRoot: PopToRoot
    @Namespace private var animationNamespace

    var body: some View {
        ZStack {
            SomeView(animation: animationNamespace)
            
            if popRoot.player != nil {
                TopVideo(player: $popRoot.player)
                    .matchedGeometryEffect(id: popRoot.playID, in: animationNamespace)
                    .ignoresSafeArea()
            }
        }
    }
}

struct SomeView: View { // Subview
    let example = "example URL"
    var animation: Namespace.ID

    var body: some View {
        ScrollView {
            BottomVideoView(url: URL(string: example)!, animation: animation)
            // Additional views
        }
    }
}

struct BottomVideoView: View {
    @EnvironmentObject var popRoot: PopToRoot
    let url: URL
    var animation: Namespace.ID
    @State var player: AVPlayer? = nil

    var body: some View {
        ZStack {
            if let vid = player {
                VidPlayer(player: vid)
                    .matchedGeometryEffect(id: url.absoluteString, in: animation)
                    .onTapGesture {
                        withAnimation {
                            popRoot.playID = url.absoluteString
                            popRoot.player = player
                        }
                    }
            }
        }
        .onAppear {
            if player == nil {
                player = AVPlayer(url: url)
                self.player?.play()
            }
        }
    }
}

// No changes needed for VidPlayer and TopVideo

The animationNamespace is declared in ContentView and passed to SomeView and BottomVideoView. That makes sure the matched geometry effect operates within the same namespace across these views. The TopVideo view is directly integrated into the SwiftUI view hierarchy, which should help with the animation.
Make sure the environment object (PopToRoot) is correctly passed down to all views that require access to it.

友情链接