How to create an SwiftUI animation effect from the Model?

Question

I have a model object, which has a published property displayMode, which is updated asynchronously via events from the 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
        }
    }
}

Then, I have a View, which displays this mode by placing some image in a certain location depending on the value.

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

This code works fine, but I want to animate the movement when the value changes. If I change the value in the code block inside the View, I can use withAnimation {..} to create an animation effect, but I am not able to figure out how to do it from the model.

You should be able to use implicit animations: `.offset(x: state.displayMode.rawValue * 80, y:0).animation()` — aheze, May 01 '21 at 00:04
Couldn't you just do `DispatchQueue.main.async { withAnimation { self.displayMode = newValue } }`? — George, May 01 '21 at 00:21
@George_E, you can't use withAnimation from the Model. withAnimation is available only inside View. — Satoshi Nakajima, May 01 '21 at 03:45
@SatoshiNakajima You can use it wherever, assuming you have imported SwiftUI. — George, May 01 '21 at 19:07
@George_E, thank you for pointing out. I was importing only Combine in the model file. — Satoshi Nakajima, May 02 '21 at 00:03

score 0 · Answer 1 · answered May 01 '21 at 03:52

This is the answer, thanks to @aheze. With .animation(), this Image view always animates when the state.displayMode changes.

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

How to create an SwiftUI animation effect from the Model?

1 Answers1