如何在使用AnyView制作的自定义NavigationItem之间的过渡子中添加动画？

Question

是否有一种方法可以将动画添加到this article中所述的由NavigationItem制成的自定义AnyView之间的过渡中？

除了无法添加任何动画过渡之外，我喜欢此NavigationStack系统的所有功能。

我知道问题与this answer中所述的用some View进行类型AnyView的擦除有关，并且Group似乎是一个更好的选择动画自定义视图导航。

  

我宁愿使用AnyView和类型擦除来将条件逻辑封装在Group视图中。然后，您返回的类型是“组”，它将正确设置动画。

我的想法已经用光了，我需要一些帮助。

我将添加上下文代码。

SceneDelegate：

class SceneDelegate: UIResponder, UIWindowSceneDelegate {
...
    let contentView = ContentView().environmentObject(UserData())
...
}

ContentView：

struct ContentView: View {
    @EnvironmentObject var userData: UserData   
    var body: some View {
        NavigationHost()
            .environmentObject(NavigationStack(
                NavigationItem(view: AnyView(
                    (userData.isSignedIn ? AnyView(HomeView()) : AnyView(RegisterView1(profile: Profile.default)) )
                    .transition(.move(edge: .trailing))
                    .animation(Animation.linear(duration: 1))))))
                    //this animation works for some reason, but only this one.
            .environmentObject(UserData())
    }
}

NavigationHost：

struct NavigationHost: View{
    @EnvironmentObject var navigation: NavigationStack
    @EnvironmentObject var userData: UserData

    var body: some View {
            ZStack {
                    self.navigation.currentView.view
                        .environmentObject(self.userData)
                        .environmentObject(self.navigation)
                    ...
                }
            }
    }
}

NavigationStack：

final class NavigationStack: ObservableObject {
    @Published var viewStack: [NavigationItem] = []
    @Published var currentView: NavigationItem

    init(_ currentView: NavigationItem ){
        print("Navigation Stack Initialized")
        self.currentView = currentView
    }

    func back() {
        if viewStack.count == 0 {
            return
        }
        let last = viewStack.count - 1
        currentView = viewStack[last]
        viewStack.remove(at: last)
    }

    navigation.advance(NavigationItem(AnyView))
    func advance(_ view: NavigationItem) {
        viewStack.append( currentView )
        currentView = view
    }

    func home() {
       currentView = NavigationItem( view: AnyView(HomeView()) )
       viewStack.removeAll()
    }

}

struct NavigationItem{
    var view: AnyView
}

Answer 1

此处更新了该文章中的实体，以在屏幕之间采用简单的动画过渡。所有这些都是徒劳的，仅用于演示，但是希望它可以有所帮助。

注意：过渡在预览版中不起作用（至少在我的Xcode 11.2 / iOS 13.2上），因此必须在模拟器或真实设备中进行测试。

这是它的外观：

这是代码：

<div id="center-pane" class="col-sm-10">
                    <div>
                        <div id="d1" style="height: 400px;"></div>
                    </div>
                </div>

jf file

var d2 = $("#d1").kendoDiagram({
               shapes: [
                {
                    id: "1",
                    content: {
                        text: "Monday"
                    }
                },
                {
                    id: "2",
                    content: "Tuesday"
                }
            ],
            connections: [

                {
                    from: "1",
                    to: "2"
                }
            ],
            layout: {
                type: "tree"
            },
}).getKendoDiagram();