SwiftUI - NavigationView 中的意外动画

Question

我在 VStack 中有 3 个文本视图，我希望中间的一个通过使用scaleEffect 来反弹。然而，还有一些额外的意想不到的上下动画。

我发现一旦我从 NavigationView 中删除视图，它就会表现正常。

是我这边的问题还是苹果这边的问题？以及如何修复它？谢谢。

// TestingApp.swift

import SwiftUI

@main
struct TestingApp: App {
    var body: some Scene {
        WindowGroup {
            NavigationView {
                LaunchView()
            }
        }
    }
}

// LaunchView.swift

import SwiftUI

struct LaunchView: View {
    var body: some View {
        NavigationLink("To ContentView", destination: ContentView())
    }
}

struct LaunchView_Previews: PreviewProvider {
    static var previews: some View {
        LaunchView()
    }
}

// ContentView.swift

import SwiftUI

struct ContentView: View {
    @State private var scaleFactor: CGFloat = 0.8
    
    var body: some View {
        VStack {
            Text("Text above")
            Text("Text bouncing")
                .scaleEffect(scaleFactor)
                .onAppear {
                    withAnimation(.spring().repeatForever(autoreverses: true)) {
                        scaleFactor = 1
                    }
                }
            Text("Text below")
        }
        .font(.largeTitle)
        .padding()
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

Answer 1

请参阅 SwiftUI：NavigationView 中的显式动画损坏。

编辑后的解决方案：

// ContentView.swift

struct ContentView: View {
    @State private var scaleFactor: CGFloat = 0.8

    var body: some View {
        VStack {
            Text("Text above")
            Text("Text bouncing")
                .scaleEffect(scaleFactor)
                .onAppear {
                    DispatchQueue.main.asyncAfter(deadline: .now() + DispatchTimeInterval.milliseconds(200)) { // delay for 0.2 seconds
                            withAnimation(.spring().repeatForever(autoreverses: true)) {
                                scaleFactor = 1
                        }
                    }
                }
            Text("Text below")
        }
        .font(.largeTitle)
        .padding()
    }
}

解决方案：

// ContentView.swift

struct ContentView: View {
    @State private var scaleFactor: CGFloat = 0.8
    
    var body: some View {
        VStack {
            Text("Text above")
            Text("Text bouncing")
                .scaleEffect(scaleFactor)
                .onAppear {
                    DispatchQueue.main.async {
                        withAnimation(.spring().repeatForever(autoreverses: true)) {
                            scaleFactor = 1
                        }
                    }
                }
            Text("Text below")
        }
        .font(.largeTitle)
        .padding()
    }
}