Bagaimana cara membuat efek animasi SwiftUI dari Model?

Saya memiliki objek model, yang memiliki properti displayMode yang diterbitkan, yang diperbarui secara asinkron melalui peristiwa dari server.

class RoomState: NSObject, ObservableObject  {
    public enum DisplayMode: Int {
        case modeA = 0
        case modeB = 1
        case modeC = 2
    }
    @Published var displayMode = DisplayMode.modeA

    func processEventFromServer(newValue: DisplayMode) {
        DispatchQueue.main.async {
            self.displayMode = newValue
        }
    }
}

Lalu, saya memiliki Tampilan, yang menampilkan mode ini dengan menempatkan beberapa gambar di lokasi tertentu tergantung nilainya.

struct RoomView: View {
    @ObservedObject var state: RoomState
    var body: some View {
       VStack {
           ...
           Image(systemName: "something")
               .offset(x: state.displayMode.rawValue * 80, y:0)
       }
    }
}

Kode ini berfungsi dengan baik, tetapi saya ingin menganimasikan gerakan ketika nilainya berubah. Jika saya mengubah nilai di blok kode di dalam Tampilan, saya dapat menggunakan withAnimation {..} untuk membuat efek animasi, tetapi saya tidak dapat mengetahui cara melakukannya dari model.


swiftui swiftui-animation
person Satoshi Nakajima    schedule 30.04.2021    source sumber
comment
Anda harus dapat menggunakan animasi implisit: .offset(x: state.displayMode.rawValue * 80, y:0).animation()   -  person aheze    schedule 01.05.2021
comment
Tidak bisakah kamu melakukan DispatchQueue.main.async { withAnimation { self.displayMode = newValue } } saja?   -  person George_E    schedule 01.05.2021
comment
@aheze, pendekatan Anda berhasil! Terima kasih banyak.   -  person Satoshi Nakajima    schedule 01.05.2021
comment
@George_E, Anda tidak dapat menggunakan withAnimation dari Model. withAnimation hanya tersedia di dalam View.   -  person Satoshi Nakajima    schedule 01.05.2021
comment
@SatoshiNakajima Anda dapat menggunakannya di mana saja, dengan asumsi Anda telah mengimpor SwiftUI.   -  person George_E    schedule 01.05.2021

Jawaban (1)


arrow_upward
0
arrow_downward

Ini jawabannya, terima kasih kepada @aheze. Dengan .animation(), tampilan Gambar ini selalu dianimasikan ketika state.displayMode berubah.

struct RoomView: View {
    @ObservedObject var state: RoomState
    var body: some View {
       VStack {
           ...
           Image(systemName: "something")
               .offset(x: state.displayMode.rawValue * 80, y:0)
               .animation(.easeInOut)
       }
    }
}
person Satoshi Nakajima    schedule 01.05.2021