updateUIView() does not change the color of the animation

[Alex0Klain]

Hello. I don't quite understand what I'm doing wrong and I'm asking for your help. I want to change the animation color when the updateUIView call occurs and I found a variable for this that should update the color in runtime (https://airbnb.io/lottie/#/ios?id=value-providers ), but for some reason it doesn't work. What am I doing wrong?

// Called in view

WaterHeaterAnimation(
  mode: mode,
  redColor: mode == .disabled ? disabledRedColor : redColor,
  greenColor: mode == .disabled ? disabledGreenColor : greenColor,
  blueColor: mode == .disabled ? disabledBlueColor : blueColor
)
.brightness(0.5)
.opacity(mode == .disabled ? 0.4 : 1)
.mask(gradient)
.background(Asset.Colors.Opacity.opacity4.color.suiColor)
.cornerRadius(16)
.id(mode)

// Struct of animation

public struct WaterHeaterAnimation: UIViewRepresentable {
  // MARK: Lifecycle

  public init(
    mode: Mode,
    redColor: Double,
    greenColor: Double,
    blueColor: Double
  ) {
    self.mode = mode
    self.colorProvider = ColorValueProvider(LottieColor(r: redColor, g: greenColor, b: blueColor, a: 1))
    self.animationView = LottieAnimationView(configuration: LottieConfiguration(renderingEngine: .coreAnimation))
  }

  // MARK: Public
  
  public func makeUIView(context: Context) -> UIView {
    print(#function)
    let view = UIView()
    animationView.animation = Lottie.LottieAnimation.filepath(filePath)
    
    animationView.loopMode = .loop
    animationView.contentMode = .scaleAspectFit
    animationView.backgroundBehavior = .pauseAndRestore
    animationView.translatesAutoresizingMaskIntoConstraints = false
    
    animationView.animationLoaded = { animationView, animation in
      let colorProvider = ColorValueProvider(color)
      let keypath = AnimationKeypath(keys: ["**", "Fill 1", "Color"])
      animationView
        .setValueProvider(
          colorProvider,
          keypath: keypath
        )
      animationView.play()
    }
    view.addSubview(animationView)

    NSLayoutConstraint.activate([
      animationView.centerYAnchor.constraint(equalTo: view.centerYAnchor),
      animationView.centerXAnchor.constraint(equalTo: view.centerXAnchor),
      animationView.heightAnchor.constraint(equalToConstant: 100),
    ])

    return view
  }

  public func updateUIView(_ uiView: UIView, context: Context) {
    print(#function)
    // It doesn't change the UI
    context.coordinator.parent.colorProvider.color = colorProvider.color
  }

  public func makeCoordinator() -> Coordinator {
    Coordinator(self)
  }

  // MARK: Private

  private var mode: Mode
  private var colorProvider: ColorValueProvider
  private var animationView: LottieAnimationView

  private var filePath: String {
    switch mode {
    case .quiet:
      return Paths.Lottie.boilerQuiet
    case .heat:
      return Paths.Lottie.boilerHeat
    case .disabled:
      return Paths.Lottie.boilerQuiet
    }
  }
}

// MARK: WaterHeaterAnimation.WaterHeaterMode

extension WaterHeaterAnimation {
  public enum Mode: Equatable {
    case heat
    case quiet
    case disabled
  }
}

// MARK: WaterHeaterAnimation.Coordinator

extension WaterHeaterAnimation {
  // MARK: Public

  public class Coordinator: NSObject {
    // MARK: Lifecycle

    init(_ parent: WaterHeaterAnimation) {
      self.parent = parent
    }

    // MARK: Internal

    var parent: WaterHeaterAnimation
  }
}

Lottie version: 4.2.0

[Alex0Klain]

If you change the color change to something like this, then it will work. But is this correct?

public func updateUIView(_ uiView: UIView, context: Context) {
  DispatchQueue.main.async {
    context.coordinator.parent.colorProvider.color = colorProvider.color
    context.coordinator.parent.animationView.play()
  }
}

[Alex0Klain]

I also noticed that if you use .CoreAnimation, the application freezes for 2-3 seconds. With .MainThread is acceptable result