How to change the animation color in lottie in iOS?

Question

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

Pulvinus

Answer 1

Maybe this helps:

let keypath = AnimationKeypath(keys: ["**", "Fill", "**", "Color"])
let colorProvider = ColorValueProvider(UIColor.green.lottieColorValue)
animationView.setValueProvider(colorProvider, keypath: keypath)

Casaleggio

Works, but check your animation keypaths with AnimationView.logHierarchyKeypaths(), because not always the keypaths will be "Fill". – Azaleah

In my case, I printed the logHierarchyKeypaths() and used the first word that showed up in the list to replace the "Fill" on the Animationkeypath. And it worked. – Gardant

In my case I had to replace Fill with Fill 1. It is worth to log the keys and see which one it's being used for the color. Thanks folks! – Idola

Android has a simpler way to get color property, doesn't iOS have a simpler way rather than checking the keypaths and checking which one overrides the color we need? – Albert

Answer 2

• 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.

Imbed

Requires paid subscription – Acanthous

Answer 3

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

Graehme

Answer 4

If using SwiftUI, there is a colorMultiply function available on SwiftUI views that works well with a lottie animation (Given that you created a SwiftUI wrapper or used a lib like LottieUI). This will work only if the animation color is initially white (you can make it white with the lottie editor).

After doing so you will be able to dynamically change your animation color like so :

LottieView("some-anim")
    .loopMode(.repeat(.infinity))
    .play(true)
    .colorMultiply(.red)

The .colorMultiply(tintColor) is part of SwiftUI and will apply a tint on the view providing the same outcome as a color change if the base animation color is white.

Flabbergast

Answer 5

Actually, we don't need to know the keypath of the fill color. Just set a ValueDelegate for all keypaths.

@implementation LOTAnimationView (tintColor)

- (void)updateColor:(UIColor *)color {
    NSArray *keypaths = [self keysForKeyPath:[LOTKeypath keypathWithString:@"**"]];
    
    LOTColorValueCallback *colorCallback = [LOTColorValueCallback withCGColor:color.CGColor];
    for (NSString *keyPathStr in keypaths) {
        LOTKeypath *keypath = [LOTKeypath keypathWithString:[keyPathStr stringByAppendingString:@".Color"]];
        [self setValueDelegate:colorCallback forKeypath:keypath];
    }
}

@end

Weissmann

Answer 6

You can customize lottie animation in lottie editor link. Lottie Animation Editor

Barnet

This question was for how to customise the colour programmatically so that it can be changed dynamically with ease. – Jaborandi