【问题标题】：Lottie animation disappears on last TabView page in SwiftUILottie 动画在 SwiftUI 的最后一个 TabView 页面上消失
【发布时间】：2020-10-19 11:54:24
【问题描述】：

我有一个有六页的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)
}

【问题讨论】：

如果在updateUIView 中将animationView.play() 替换为context.coordinator.parent.animationView.play() 会发生什么？
我刚刚尝试过，所以其他人编写了这个代码，但不是运气。结果相同。

标签： ios swift animation swiftui lottie

【解决方案1】：

尝试使用 .id() 修饰符强制刷新视图

struct AnimationView: View {
    
    @State private var lottieID = UUID()
    
    var body: some View {
        LottieView(name: "complete")
            .frame(width: 200, height: 200, alignment: .center)
            .id(lottieID)
            .onAppear {
                lottieID = UUID()
            }
    }
}

【讨论】：

【解决方案2】：

经过大量研究和测试，如果您希望在 SwiftUI TabView 中保持 Lottie 动画效果，您应该添加以下代码 sn-p：

 public func makeUIView(context: UIViewRepresentableContext<LottieView>) -> UIView {
    let view = UIView(frame: .zero)
    let animation = Animation.named(lottieFile)
    animationView.animation = animation
    animationView.animationSpeed = animationSpeed
    animationView.contentMode = .scaleAspectFit
    animationView.loopMode = loopMode
    animationView.backgroundBehavior = .pauseAndRestore <------

【讨论】：