Lottie-ios: LOTKeyPath not working on iOS but working fine on Android

[ScubaInstructor]

Hi

I try to change the colors of a lottie files in iOS.

In Android this works fine:

lottieAnimationView.addValueCallback(new KeyPath("foreground", "**"), LottieProperty.COLOR_FILTER, new LottieValueCallback(colorFilterForeground));

How to translate this to iOS objecive c?
LOTKeypath *keypath = [LOTKeypath keypathWidhKeys:@"foreground", @"**", nil]; LOTColorValueCallback *colorCallback = [LOTColorCallback withCGColor:[UIColor redColor].CGColor}; [lottieAnimation setValueDelegate:colorCallback forKeypath:keypath];

The above does not work, the color is not changed.
I work with exactly the same lottie.json on Android and iOS.

Is this a bug or is the approach fundamentally different on iOS?

Best Regards Jochen

[leotumwattana]

Hi Lottie Team,

Thanks for the amazing library. I'm having a similar issue as well. In my case, I'm trying to set the stroke color on a LOTAnimatedSwitch, but nothing happens.

let keypath = LOTKeypath(string: "front Outlines.Group 1.Fill 1.Color")
let color = LOTColorValueCallback(color: UIColor.red.cgColor)
setValueDelegate(color, for: keypath)

Appreciate the help in advance!

Cheers / Leo

[exevil]

+1 here.

I've also noticed that logHierarchyKeypaths() function is not showing editable properties now, in my case it's showing only layers and shapes. Here's the example output:

2018-07-09 23:21:49.417642+0200 LottieTest[58939:16350261] Grid-Background.Group 8.Path 1
2018-07-09 23:21:49.417833+0200 LottieTest[58939:16350261] TimelineDayPoint.Ellipse 1.Ellipse Path 1
2018-07-09 23:21:49.417919+0200 LottieTest[58939:16350261] sleep.100.4
2018-07-09 23:21:49.418026+0200 LottieTest[58939:16350261] Timeline.Trim Paths 1
2018-07-09 23:21:49.418228+0200 LottieTest[58939:16350261] sleep.50.4
2018-07-09 23:21:49.418299+0200 LottieTest[58939:16350261] sleep.25.6
2018-07-09 23:21:49.418357+0200 LottieTest[58939:16350261] focus.100
2018-07-09 23:21:49.418444+0200 LottieTest[58939:16350261] onTheGo.25.Path 3
2018-07-09 23:21:49.418535+0200 LottieTest[58939:16350261] sleep.75.2
2018-07-09 23:21:49.418673+0200 LottieTest[58939:16350261] onTheGo.75.Path 1
2018-07-09 23:21:49.418766+0200 LottieTest[58939:16350261] sleep.75
2018-07-09 23:21:49.418913+0200 LottieTest[58939:16350261] onTheGo.75.Stroke 1
2018-07-09 23:21:49.419033+0200 LottieTest[58939:16350261] onTheGo.50.Stroke 1
2018-07-09 23:21:49.419108+0200 LottieTest[58939:16350261] onTheGo.100.Path 3
2018-07-09 23:21:49.419168+0200 LottieTest[58939:16350261] Grid-Background.Group 6.Stroke 1
2018-07-09 23:21:49.419221+0200 LottieTest[58939:16350261] onTheGo.50.Path 5
2018-07-09 23:21:49.419318+0200 LottieTest[58939:16350261] sleep.50.5
2018-07-09 23:21:49.419409+0200 LottieTest[58939:16350261] sleep.25.7
2018-07-09 23:21:49.419566+0200 LottieTest[58939:16350261] Grid-Background.Group 2.Path 1
2018-07-09 23:21:49.419722+0200 LottieTest[58939:16350261] focus.75
2018-07-09 23:21:49.419864+0200 LottieTest[58939:16350261] sleep.75.3
2018-07-09 23:21:49.420023+0200 LottieTest[58939:16350261] Grid-Background.Group 4.Stroke 1
2018-07-09 23:21:49.420158+0200 LottieTest[58939:16350261] onTheGo.25
2018-07-09 23:21:49.420264+0200 LottieTest[58939:16350261] sleep.100.5
2018-07-09 23:21:49.420405+0200 LottieTest[58939:16350261] relax.100
2018-07-09 23:21:49.420599+0200 LottieTest[58939:16350261] sleep.100.Stroke 2
2018-07-09 23:21:49.420750+0200 LottieTest[58939:16350261] focus.25.Stroke 1
2018-07-09 23:21:49.420895+0200 LottieTest[58939:16350261] sleep.50.6
...

I'm using AE v15.0.1 (Build 73), Bodymovin v5.1.20, Lottie v2.5.0.

Thanks!

[thomasouk]

Hello,

I had the same troubles with changing colors and found out thanks to the docs saying:

NOTE: The delegate is weakly retained. Be sure that the creator of a delegate is retained.

let colorRetainer: LOTColorValueCallback = LOTColorValueCallback.init(color: UIColor.red.cgColor)

func setupLottie(){
    let path = "front Outlines.Group 1.Fill 1.Color"
    let keypath = LOTKeypath(string: path) 
    self.lottieView.setValueDelegate(colorRetainer, for: keypath)
} 

Then I tried to have a variable and it worked for me.

[willsmillie]

I was running into the same issue. What fixed it was following the BodyMovin installation instructions here: https://github.com/airbnb/lottie-web

and then using this code:

    LOTKeypath *kp = [LOTKeypath keypathWithString:@"**.Fill 1.Color"];
    LOTColorValueCallback *callback = [LOTColorValueCallback withCGColor:[UIColor greenColor].CGColor];
    [animationView setValueDelegate:callback forKeypath:kp];

similarly to @exevil my logHierarchyKeypaths() does not list "**.Fill 1.Color" as property, but it doesn't seem to be causing any issues after following the install instructions in the read me.

[fredpi]

Just to share my experience:

I subclassed LOTAnimationView and created a custom initializer that internally called the designated super.init(contentsOf:) initializer. With this configuration I faced issues with key path adjustments not taking effect immediately.

When I used the convenience self.init(name:bundle) initializer instead, forcing me to make my custom initializer a convenience initializer too, and allowing me to replace my custom required init(coder:) implementation, all issues went straight away.

Maybe someone with a similar issues may find this workaround helpful...

[buba447]

Lottie has been completely rewritten in Swift as of 3.0 (https://github.com/airbnb/lottie-ios/pull/777)

I am closing all issues prior to this release to reduce the noise. If you continue to run into this issues or any issue with Lottie 3.0 please open a new ticket

For continued support of Lottie Objective-c please point to this branch: https://github.com/airbnb/lottie-ios/tree/lottie/objectiveC