How to change the animation color in lottie in iOS?

user_11540656 0
Viewed 11346

I am loading the animation typing indicator from the json file using lottie framework. I want to change the animation of the indicator color. I don't want to change the colour from the json file. Want to change the colour for animation view programmatically.

Eg : (. . . .) -> Typing indicator (Want to change the dot colour)

  private let animationView = LOTAnimationView(name: 
  Constants.ImageAssets.typingIndicatorIcon, bundle:Bundle(identifier: Constants.GenericKeys.bundleIdentifier)!)

    private func loadTypingIndicator() {
    animationView.loopAnimation = true
    animationView.translatesAutoresizingMaskIntoConstraints = true
    // *** It's not working 
    animationView.setValue(UIColor.green, forKeypath: "boule.Ellipse 1.Fill 1.Color", atFrame: 0)
    animationView.play()
}
lottie swift ios
5 Answers

Maybe this helps:

let keypath = AnimationKeypath(keys: ["**", "Fill", "**", "Color"])
let colorProvider = ColorValueProvider(UIColor.green.lottieColorValue)
animationView.setValueProvider(colorProvider, keypath: keypath)
user_110627710
user_84331660
  • Because the animations can be complex and have multiple colours. The 'Layers' can be edited using the LottieEditor by clicking on "Edit Layer Colours". Then save the .JSON to a file and add to the XCode project.
  • Then in code, what I did is just refer to the .JSON file with the colour desired depending on the UI color scheme. So I suffix the file with its unique color. ie. download_black.json, download_blue.json.
user_58098360

As option - use view.mask if needed template like behaviour.

lottiViewTintView.backgroundColor = tintColor
lottieView = AnimationView(name: "animation_file")
lottieView.bounds = lottiViewTintView.bounds
lottiViewTintView.mask = lottieView
user_11351540
user_57360310
Related