主页 / coding / 问题 / 77861390
Accepted
Strassenrenner
Asked: 2024-01-23 00:39:28 +0800 CST

SwiftUI TabView 中的动画损坏

  • 772

我正在 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")
                }
            
        }
    }
}

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

当我理解正确时，onAppear 和 onDisappear 方法将在 View 关闭时被调用，但其 State 将被保留。所以看起来同一个视图会有多个状态。

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

animation

1 个回答

  1. Best Answer

    这花了我一些尝试和错误才弄清楚，但最终我成功了！不过，这可能是某种 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。让我知道这是否适合您！

    • 1

相关问题