使用 SwiftUI 切换更改的动画

Question

我正在构建一个简单的设置屏幕。

当第一个设置被激活时，速度控制出现。当它关闭时，速度控制消失。

根据我对 SwiftUI 的了解，它应该根据下面的代码自动设置动画，但它只是出现和消失。

我怎样才能用 SwiftUI 使这个动画更好看，让它从它上面的单元格滑下来，就像在这个演示文稿中 53:00 一样？

import SwiftUI
import Combine

struct ContentView : View {

    @ObjectBinding var settingsStore: SettingsStore

    var body: some View {
        NavigationView {
            Form {
                Toggle(isOn: $settingsStore.settingActivated.animation(.basic(duration: 3, curve: .easeInOut))) {
                    Text("Setting Activated")
                }
                if settingsStore.settingActivated {
                    VStack(alignment: .leading) {
                        Text("Speed Control")
                        HStack {
                            Image(systemName: "tortoise")
                            Slider(value: .constant(10), from: 0, through: 50, by: 1)
                            Image(systemName: "hare")
                        }
                    }.transition(.opacity)
                }
            }.navigationBarTitle(Text("Settings"))
        }
    }
}

class SettingsStore: BindableObject {

    let didChange = PassthroughSubject<Void, Never>()

    var settingActivated: Bool = UserDefaults.settingActivated {
        didSet {

            UserDefaults.settingActivated = settingActivated

            didChange.send()
        }
    }
}

extension UserDefaults {

    private struct Keys {
        static let settingActivated = "SettingActivated"
    }

    static var settingActivated: Bool {
        get {
            return UserDefaults.standard.bool(forKey: Keys.settingActivated)
        }
        set {
            UserDefaults.standard.set(newValue, forKey: Keys.settingActivated)
        }
    }
}

Answer 1

同样的错误在 iOS 15 和 iOS 16 中仍然存在。您现在可以使用属性 @AppStorage 来负责在默认存储中读取和写入值，但动画仍然无法使用。

struct SettingsView: View {
    @AppStorage("SettingActivated") var settingActivated: Bool = false
    var body: some View {
        Form {
            Toggle(isOn: $settingActivated.animation(.basic(duration: 3, curve: .easeInOut))) {
                Text("Activate Setting")
            }
            if settingActivated {
                Text("Setting Activated")
            }
        }
    }
}

我找到了一种解决方法，只需很少的额外代码，然后就可以正常工作。您需要 SwiftUI 常用的 @State 属性来运行动画，并且只要 @AppStorage 属性发生更改就可以设置它 (1)：

struct SettingsView: View {
    @AppStorage("SettingActivated") var settingActivated: Bool = false
    @State private var settingShown: Bool = false
    var body: some View {
        Form {
            Toggle("Activate Setting", isOn: $settingActivated.animation())
                .onChange(of: value) { value in
                    withAnimation {settingShown = value}  // 1)
                }
            if settingShown {
                Text("Setting Activated")
            }
        }
        .onAppear() {
            settingShown = settingActivated  // 2)
        }
    }
}

但是，由于您无法从@AppStorage初始化@State，因此您需要在.onAppear中执行此操作。(2)

就是这样。表单和列表中的动画，由 @AppStorage 切换触发。