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

Posted 2023-02-24

【中文标题】Lottie 动画在 SwiftUI 的最后一个 TabView 页面上消失

【英文标题】：Lottie animation disappears on last TabView page in SwiftUI

【发布时间】：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() 会发生什么？

我刚刚尝试过，所以其他人编写了这个代码，但不是运气。结果相同。

【参考方案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 <------