6

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

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

根据我对 SwiftUI 的了解,这应该会根据下面的代码自动生成动画,但它只是出现和消失。

如何使用 SwiftUI 使这个动画更好看,让它从上面的单元格向下滑动,就像在 53:00 的演示文稿中一样?

设置动画的GIF

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)
        }
    }
}
4

0 回答 0