Changing Lottie At Runtime

3 min readSep 26, 2022

What is Lottie?

A Lottie is a JSON-based animation file format that enables designers to ship animations on any platform as easily as shipping static assets. They are small files that work on any device and can scale up or down without pixelation.

There are various properties of a lottie which can be changed on the runtime , which are called value providers.

AnyValueProvider is a protocol that return animation data for a property at a given time. Every fame an AnimationView queries all of its properties and asks if their ValueProvider has an update. If it does the AnimationView will read the property and update that portion of the animation.

Value Providers can be used to dynamically set animation properties at run time.

ValueProviders work with a few Primitive data types.

Color: A primitive that describes a color in R G B A (0–1)
Vector1D: A single float value.
Vector3D: A three dimensional vector. (X, Y, Z)

Animation Keypaths

AnimationKeypath is an object that describes a keypath search for nodes in the animation JSON. AnimationKeypath matches views and properties inside of AnimationView to their backing Animation model by name.

A keypath can be used to set properties on an existing animation, or can be validated with an existing Animation. AnimationKeypath can describe a specific object, or can use wildcards for fuzzy matching of objects. Acceptable wildcards are either "*" (star) or "**" (double star). Single star will search a single depth for the next object. Double star will search any depth.

An AnimationKeypath can be initialized with a dot-separated keypath, or with an array of keys

Keypath Examples:

/// Represents a specific color node on a specific stroke.
@"Layer.Shape Group.Stroke 1.Color
/// Represents a specific color node on a specific stroke.
@"Layer.Shape Group.Stroke 1.Color"

Code Example:

/// A keypath that finds the color value for all `Fill 1` nodes.  
let fillKeypath =  AnimationKeypath(keypath:  "**.Fill 1.Color")

Change Color Of Lottie in Runtime

Get The Url Of Lottie Animation:

Load The Animation from the URL

Animation.loadedFrom(url: "Your Url", closure: { animation in
//Load the Animation form the URl.self.animationView.animation = animation
self.animationView.play()}, animationCache: LRUAnimationCache.sharedCache)

Log The KeyPaths Of The Lottie Animation

For Changing the color of lottie in runtime we need to give a colorValueProvider and keyPath . We can log all the keypaths using logHierarchyKeypaths() function.

/// Returns all the keyPaths for a lottie file.  
animationView.logHierarchyKeypaths()

Output:

Lottie: Logging Animation KeypathsLayer 15
Layer 15.Transform
Layer 15.Transform.Opacity
Layer 15.Transform.Anchor Point
Layer 15.Transform.Scale
Layer 15.Transform.Position
Layer 15.Transform.Rotation
Layer 15.Group 1
Layer 15.Group 1.ScaleLayer 15.Group 1.Opacity
Layer 15.Group 1.Anchor Point
Layer 15.Group 1.Skew
Layer 15.Group 1.Skew Axis
Layer 15.Group 1.Position
Layer 15.Group 1.Rotation
Layer 15.Group 1.Path 1
Layer 15.Group 1.Path 1.Path
Layer 15.Group 1.Fill 1
Layer 15.Group 1.Fill 1.Opacity
Layer 15.Group 1.Fill 1.Color
Layer 15.Group 1.Transform
Layer 15.Group 1.Transform.Scale
Layer 15.Group 1.Transform.Opacity
Layer 15.Group 1.Transform.Anchor Point
Layer 15.Group 1.Transform.Skew
Layer 15.Group 1.Transform.Skew Axis
Layer 15.Group 1.Transform.Position
Layer 15.Group 1.Transform.Rotation
Like icon
Like icon.TransformLike icon.Transform.Rotation
Like icon.Transform.Opacity
Like icon.Transform.Anchor Point
Like icon.Transform.Position
Like icon.Transform.Scale
Like icon.Group 1
Like icon.Group 1.Opacity
Like icon.Group 1.Rotation
Like icon.Group 1.Skew Axis
Like icon.Group 1.Scale
Like icon.Group 1.Anchor Point
Like icon.Group 1.Position
Like icon.Group 1.Skew
Like icon.Group 1.Path 1
Like icon.Group 1.Path 1.Path
Like icon.Group 1.Stroke 1
Like icon.Group 1.Stroke 1.Stroke Width
Like icon.Group 1.Stroke 1.Dashes
Like icon.Group 1.Stroke 1.Dash Phase
Like icon.Group 1.Stroke 1.Opacity
Like icon.Group 1.Stroke 1.Color
Like icon.Group 1.Transform
Like icon.Group 1.Transform.Opacity
Like icon.Group 1.Transform.Rotation
Like icon.Group 1.Transform.Skew Axis
Like icon.Group 1.Transform.Scale
Like icon.Group 1.Transform.Anchor Point
Like icon.Group 1.Transform.Position
Like icon.Group 1.Transform.Skew
Like icon.Trim Paths 1
Like icon.Trim Paths 1.Start
Like icon.Trim Paths 1.Offset
Like icon.Trim Paths 1.End

Specify The color Value Provider

To change the color , specify a keyPath And colorValueProvider

Example:

/// Represents a specific color
 let color = Color(r: (0/255), g: (128/255), b: (0/255), a: 1
 let colorValueProvider = ColorValueProvider(color)

After Specifying a color we ned to specify a keyPath, i.e a specific color node for which the color to be changed.

Example:

/// Represent a color node 
let keyPath = AnimationKeypath(keypath: "1.Layer 1 Outlines.Group 2.Stroke 1.Color")
self.animationView.setValueProvider(colorValueProvider, keypath: keyPath)

Result:

Changing Lottie At Runtime

Animation Keypaths

Change Color Of Lottie in Runtime

Written by Kamal Negi