SwiftUI TabView 中的动画损坏

Question

我正在 SwiftUI 中制作动画，并在 TabView 中使用动画视图时遇到问题。我进行了很多搜索，确实找到了将状态属性与动画一起使用的相同方法。一切工作正常，除了当我使用 TabView 内的视图时。 这是示例代码

import SwiftUI

public struct AnimatedView: View {
    @State var isRotating: Bool? = false
    @State var isAnimating: Bool = true
    
    public var body: some View {
        
        ZStack {
            Circle()
                .trim(from:0.1, to: 0.2)
                .stroke(lineWidth: 5)
                .rotation(Angle.degrees(0))
                .frame(width: 60, height: 60)
                .foregroundColor(.blue)
                .rotationEffect(.degrees(isRotating! ? 360 : 0))
                .onAppear() {
                    //if !isAnimating {
                    //    return
                    //}
                    //isAnimating = false
                    
                    withAnimation(Animation.linear(duration: 1).repeatForever(autoreverses: false)) {
                        self.isRotating!.toggle()
                    }
                }
        }
    }
}

struct ContentView: View {
    enum Tab: Hashable {
        case tab1
        case tab2
    }
    
    @State private var selectedTab: Tab = .tab1
    
    var body: some View {
        TabView(selection: $selectedTab) {
            Text("Placeholder 11")
                .tabItem {
                    Text("Tab 1")
                }
            AnimatedView()
                .tabItem {
                    Text("Tab 2")
                }
            
        }
    }
}

当打开第二个选项卡时，一切正常，但是当我离开它并重新输入它时，动画的行为有所不同，因为它现在似乎有两种状态，当我多次重新进入屏幕时，它会变得更加狂野。我已经找到了解决方案，我有另一个标志，该标志将在第一次启动后反转，以便动画不会重新初始化，但这对我来说似乎有点老套。

如果我理解正确的话，那么当View关闭时会调用onAppear和onDisappear方法，但是它的State会被保留。所以看起来同一个视图会有多个状态。

由于我对动画还很陌生，我想知道动画是否有最佳实践，以便它们也可以在 TabView 中工作（因为现在对我来说这似乎不是特殊情况:-)） 预先感谢

Answer 1

这花了我一些尝试和错误才弄清楚，但最终我成功了！不过，这可能是某种 SwiftUI 错误。解决方案是直接在度数构造函数中使用 CGFloat 状态值，如下所示：

public struct AnimatedView: View {
    
    @State private var rotation: CGFloat = 0
    
    public var body: some View {
        
        ZStack {
            Circle()
                .trim(from:0.1, to: 0.2)
                .stroke(lineWidth: 5)
                .rotation(Angle.degrees(0))
                .frame(width: 60, height: 60)
                .foregroundColor(.blue)
                .rotationEffect(.degrees(rotation))
                .onAppear {
                    withAnimation(Animation.linear(duration: 1).repeatForever(autoreverses: false)) {
                        self.rotation = 360
                    }
                }
            
        }
    }
}

您可以使用线性动画从 0 开始并使其达到 360，就像您所做的那样。 让我知道这是否适合您！

Answer 2

我遇到了同样的问题，但我有更复杂的动画，没有旋转。 我正在开发 OnboardingView，其中包括带有 3 个子视图的 TabView。 每个子视图都有动画。

所以我在子视图的 onAppear 调用中使用了带有标志的解决方案。

结构UploadOnboardingPage：查看{ @State私有变量phaseIndex = 0

// Use this flag.
**@State var isAnimationAlreadyStarted: Bool = false**

enum AnimationPhase: CaseIterable {
    case initial, start, moveToCenter, grow, overlap, shrinkAndFade
}

var body: some View {
    GeometryReader { geometry in
        let center = geometry.size.width / 2
        
        ZStack {
            PhaseAnimator(AnimationPhase.allCases, trigger: phaseIndex) { phase in
                Circle()
                    .fill(Color.blue)
                    .frame(width: circleSize(for: phase), height: circleSize(for: phase))
                    .opacity(circleOpacity(for: phase))
                
                Rectangle()
                    .fill(Color.red)
                    .frame(width: rectangleSize(for: phase), height: rectangleSize(for: phase))
                    .offset(x: 0, y: rectangleOffset(for: phase, center: center))
                    .opacity(rectangleOpacity(for: phase))
            } animation: { phase in
                switch phase {
                case .initial:
                    .none
                case .start, .moveToCenter:
                    .easeInOut(duration: 1)
                case .grow:
                    .easeInOut(duration: 0.5)
                case .overlap:
                    .easeInOut(duration: 0.5)
                case .shrinkAndFade:
                    .easeInOut(duration: 1)
                }
            }
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .onAppear {
            // Check the flag
            **guard isAnimationAlreadyStarted == false else { return }**
            animateContinuously()
            isAnimationAlreadyStarted = true
        }
    }
}

// Loop animation
func animateContinuously() {
     DispatchQueue.main.asyncAfter(deadline: .now() + 3.5) {
         phaseIndex += 1
         animateContinuously()
     }
 }