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

score 21 · Answer 1 · edited Oct 04 '21 at 13:38

21

Maybe this helps:

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

edited Oct 04 '21 at 13:38

TylerH

20,799
66
75
101

answered Nov 28 '19 at 15:05

G. Meira

310
1
6

13

Works, but check your animation keypaths with AnimationView.logHierarchyKeypaths(), because not always the keypaths will be "Fill". – Pelanes Dec 02 '19 at 13:51
4

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. – Roney Sampaio Dec 04 '19 at 05:42
6

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! – Leonel Menezes Morato Lima Dec 30 '19 at 18:17
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? – Joshua Vidamo Jan 20 '20 at 13:32

score 6 · Answer 2 · answered May 15 '20 at 02:56

6

Bumped into this question... in case anyone wanted to know more, here's a tutorial about using value provider to change the Lottie animation color. https://swiftsenpai.com/development/lottie-value-providers/

answered May 15 '20 at 02:56

Lee Kah Seng

183
1
6

6

While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. – Rajan May 15 '20 at 04:34

score 1 · Answer 3 · answered Apr 16 '20 at 03:03

1

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.

answered Apr 16 '20 at 03:03

Dr Ian Gregory

184
6

Requires paid subscription – Vladimir Kuzomenskyi May 09 '23 at 16:27

score 0 · Answer 4 · answered May 24 '21 at 12:56

0

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

answered May 24 '21 at 12:56

Kirow

1,077
12
25

score -3 · Answer 5 · answered May 24 '21 at 13:37

-3

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

answered May 24 '21 at 13:37

Yadav-JI

1
2

This question was for how to customise the colour programmatically so that it can be changed dynamically with ease. – CristianMoisei Mar 29 '23 at 13:14

How to change the animation color in lottie in iOS?

5 Answers5