title: How can I animate changes to an @ObservedObject?
body: <p>My view is determined by state stored in a <code>ViewModel</code>. Sometimes the view might call a function on its <code>ViewModel</code>, causing an asynchronous state change. </p>
  
  <p>How can I animate the effect of that state change in the <code>View</code>?</p>
  
  <p>Here's a contrived example, where the call to <code>viewModel.change()</code> will cause the view to change colour. </p>
  
  <ul>
  <li>Expected behaviour: slow dissolve from blue to red. </li>
  <li>Actual behaviour: immediate change from blue to red.</li>
  </ul>
  
  <pre class="lang-swift prettyprint-override"><code>class ViewModel: ObservableObject {
  
      @Published var color: UIColor = .blue
  
      func change() {
          DispatchQueue.main.asyncAfter(deadline: .now() + 1) {
              self.color = .red
          }
      }
  }
  
  struct ContentView: View {
  
      @ObservedObject var viewModel = ViewModel()
  
      var body: some View {
          Color(viewModel.color).onAppear {
              withAnimation(.easeInOut(duration: 1.0)) {
                  self.viewModel.change()
              }
          }
      }
  }
  </code></pre>
  
  <p>If I remove the <code>ViewModel</code> and store the state in the view itself, everything works as expected. That's not a great solution, however, because I want to encapsulate state in the <code>ViewModel</code>.</p>
  
  <pre class="lang-swift prettyprint-override"><code>struct ContentView: View {
  
      @State var color: UIColor = .blue
  
      var body: some View {
          Color(color).onAppear {
              DispatchQueue.main.asyncAfter(deadline: .now() + 1) {
                  withAnimation(.easeInOut(duration: 1.0)) {
                      self.color = .red
                  }
              }
          }
      }
  }
  </code></pre>