ios - 如何使用 SwiftUI 为明暗模式之间的转换设置动画？

Question

我不知道 SwiftUI 是否支持这一点，但是当按钮为我在屏幕底部有一个导航栏，其中有一个按钮，点击时会从太阳图标切换到月亮图标。

从浅色模式切换到深色模式，反之亦然，但效果立竿见影，看起来就像有人刚刚关掉了灯。以下代码中使用的动画仅更改带有动画的按钮的图像。

这是我的:

NavigationBarView.swift

struct NavigationBarView: View {

@AppStorage("isDarkMode") private var isDarkMode = false
...

var body: some View {
    ZStack {
        ...
            Button(action: {
                withAnimation(.easeInOut) {
                    isDarkMode.toggle()
                }
            }, label: {
                if isDarkMode {
                    Image.sunButton
                        .resizable()
                        .imageScale(.large)
                        .frame(width: 24, height: 24)
                        .foregroundColor(Color.darkGray)
                } else {
                    Image.moonButton
                        .resizable()
                        .imageScale(.large)
                        .frame(width: 24, height: 24)
                        .foregroundColor(Color.darkGray)
                }
                
            })
            
        ...
        
        }
    }
    ...
}

LucidityApp.swift

@main
struct LucidityApp: App {

@Environment(\.colorScheme) var colorScheme
@AppStorage("isDarkMode") private var isDarkMode = false

var body: some Scene {
    WindowGroup {
        Dashboard()
            .preferredColorScheme(isDarkMode ? .dark : .light)
            .background(colorScheme == .dark ? Color.darkGray : Color.white)
    }
}

预先感谢您的帮助，我是 SwiftUI 的新手，所以如果您有任何最佳实践提示，我很乐意倾听!

谢恩

编辑:我找到了解决方案，我将 WindowGroup 包装在 VStack 中的主应用程序 SwiftUI 文件中，并使用 .animation(.spring(), value: isDarkMode 将 .animation 应用于 VStack ) 并按照我想要的方式从浅色模式过渡到深色模式。

Answer 1

要使动画正常工作，您需要添加过渡，过渡控制 View 的插入和移除方式。

    Button(action: {
        withAnimation(.easeInOut) {
            isDarkMode.toggle()
        }
    }, label: {
        if isDarkMode {
            Image.sunButton
                .resizable()
                .imageScale(.large)
                .frame(width: 24, height: 24)
                .foregroundColor(Color.darkGray)
                .transition(.asymmetric(insertion: .opacity, removal: .opacity))
        }
        else {
            Image.moonButton
                .resizable()
                .imageScale(.large)
                .frame(width: 24, height: 24)
                .foregroundColor(Color.darkGray)
                .transition(.asymmetric(insertion: .opacity, removal: .opacity))
        }
        
    })

转换的行为方式也可以根据您的需要进行更改，请参阅 apple documentation