Lottie动画在SwiftUI的最后一个TabView页面上消失

问题描述

我有一个TabView,共有六页。动画在最后一页。

当我进入最后一页时,动画会瞬间显示并完全消失。 以为动画可能有问题,但在其他地方也可以。

我用纸片展示了这个TabView

最后一页:

struct SixScreen: View{
    
    @EnvironmentObject var session: SessionStore
    
    @Binding var dismiss: Bool
    
    var body: some View{
        vstack(spacing: 16){
            Spacer()
            LottieView(name: "complete")
                .frame(width: 200,height: 200,alignment: .center)
            Button(action: {
                dismiss.toggle()
            },label: {
                Text("Start")
                    .frame(width: 100,height: 50,alignment: .center)
                    .foregroundColor(.blue)
                    .background(Color.white)
                    .cornerRadius(10)
                    .shadow(color: .blue,radius: 5,x: 0,y: 1)
            })
            .padding(.bottom,32)
            Spacer()
        }
    }
}

Lottie View实现:

struct LottieView: UIViewRepresentable {
    
    func makeCoordinator() -> Coordinator {
        Coordinator(self)
    }
    
    var name: String!
    var animationView = AnimationView()

    class Coordinator: NSObject {
        var parent: LottieView
    
        init(_ animationView: LottieView) {
            self.parent = animationView
            super.init()
        }
    }

    func makeUIView(context: UIViewRepresentableContext<LottieView>) -> UIView {
        let view = UIView()

        animationView.animation = Animation.named(name)
        animationView.contentMode = .scaleAspectFit
        animationView.loopMode = .loop
        
        animationView.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(animationView)

        NSLayoutConstraint.activate([
            animationView.widthAnchor.constraint(equalTo: view.widthAnchor),animationView.heightAnchor.constraint(equalTo: view.heightAnchor)
        ])

        return view
    }

    func updateUIView(_ uiView: UIView,context: UIViewRepresentableContext<LottieView>) {
        animationView.play()
    }
}

标签视图:

Group{
            TabView{
                FirstScreen()
                SecondScreen()
                ThirdScreen()
                FourthScreen()
                FifthScreen()
                SixScreen(dismiss: $dismiss)
            }
            .tabViewStyle(PageTabViewStyle())
            .indexViewStyle(PageIndexViewStyle(backgrounddisplayMode: .always))
            .padding(.bottom)
        }
        .background(gradient)
        .edgesIgnoringSafeArea(.all)
        .navigationBarHidden(true)
}

解决方法

暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!

如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@)