SwiftUI:动画更改依赖于@ObjectBinding

Question

SwiftUI 具有 .animate() 的隐式动画，以及使用 .withAnimation() 的显式.但是，我不知道如何为图像更改设置动画:

struct ImageViewWidget : View {
  @ObjectBinding var imageLoader: ImageLoader

  init(imageURL: URL) {
    imageLoader = ImageLoader(imageURL: imageURL)
  }

  var body: some View {
    Image(uiImage:
      (imageLoader.data.count == 0) ? UIImage(named: "logo-old")! :  UIImage(data: imageLoader.data)!)
        .resizable()
        .cornerRadius(5)
        .frame(width: 120, height:120)
  }
}

这个 Image的 uiImage参数通过 old-logo (占位符)如果 imageLoader 中没有数据(a BindableObject )，并在异步加载后将其替换为正确的:

class ImageLoader : BindableObject {
  let didChange = PassthroughSubject<Data, Never>()

  var data = Data() {
    didSet {
      didChange.send(data)
    }
  }

  init(imageURL: URL) {
    print("Image loader being initted!")
    let url = imageURL

    URLSession.shared.dataTask(with: url) { (data, _, _) in
      guard let data = data else { return }
      DispatchQueue.main.async {
        self.data = data
      }
      }.resume()

  }
}

我怎样才能为这个变化设置动画， data.count不再是 0 ，我们有图像吗？说我想要一个淡出动画..

Answer 1

如果你想使用基于环境对象(或可观察对象)的显式动画，你需要在你的 View 中创建一些状态。
您可以使用 onReceive 对 View 中可观察对象的更改使用react，然后使用显式动画修改您的状态。

struct ImageViewWidget: View {
    @ObservedObject var imageLoader: ImageLoader
    @State var uiImage: UIImage = UIImage(named: "logo-old")!

    init(imageURL: URL) {
        imageLoader = ImageLoader(imageURL: imageURL)
    }

    var body: some View {
        Image(uiImage: uiImage)
            .resizable()
            .cornerRadius(5)
            .frame(width: 120, height: 120)
            .onReceive(imageLoader.$data) { data in
                if data.count != 0 {
                    withAnimation {
                        self.uiImage = UIImage(data: data)!
                    }
                }
            }
    }
}