Lottie on Android: Part 3 — Dynamic properties

This series of articles follows as a result of mine and Matt Carron’s talk ‘Three approaches to animations on Android’ at the CodeMobile Developer Conference 2019, where we evaluate three approaches to animations including the Android framework, Video and Airbnb’s Lottie library.

• Lottie on Android: Part 1 — The basics
• Lottie on Android: Part 2 — Animation listeners
• Lottie on Android: Part 3 — Dynamic properties (you’re here)

The Github repository with all the examples from this series can be found here. The Lottie animation used in this tutorial is by LottieFiles and can be found here.

Dynamic Properties

So what are dynamic properties? Dynamic properties allows us to target specific animation properties and update them at runtime in response to an event, for example a button click, a success or error state or a download completed event. This sounds pretty cool, but how does it actually work?

In After Effects (AE) where the animation is built, it has a hierarchy of animation properties which is called the animation’s composition. The composition is in turn made of up of a collection of layers. So what’s a layer? A layer is an object with a string name and has similar attributes to a drawable, for example fills and strokes. These layers make up the animation’s hierarchy. So by targeting layers in our code, we can amend the properties of the animation. Confused? Don’t worry, we’ll show lots of examples.

But first, how can we find out what the animation hierarchy looks like?

Discover the KeyPath

By running the resolveKeyPath() method on the animation view we target all the layers using the a Globstar “**” (more info below) and print each layer in the logcat.

And below is the result! ⬇️

This is not the whole composition, it goes on and on… But what we can see here is how each animation layer makes up the data structure of the animation. Time to start updating them at runtime!

1. Target one specific layer

The first use case is to target one specific layer and change its colour to green in response to a button click. In order to do so, we need to target the full path. In this case, we’re targeting the Crown Outlines, in Group 1 and changing Fill 1 to green.

And here’s the result, pretty simple right? 😄

2. Use Wildcards (“*”)

The second use case is to use a Wildcard “*” which allows us to target several layers that ends in the same attributes. By passing in one star to the KeyPath“*” , that’s saying `let’s make all layers ending in the Group 1, Fill 1 be green`. Let’s try it!

And here’s the result! So as we can see, layers that end in the same attributes are updated. 👍

3. Use Globstars (“**”)

Finally, we will use a Globstar “**” which allows us to target all layers ending in the same attribute (this is what we used to log all the layers earlier to print the hierarchy in the logcat). By passing in two stars to KeyPath “**” that’s saying `let’s make all layers ending in the one attribute Fill 1 to be green`. Let’s try it!

And here’s the result:

Pretty cool, huh?

So that’s it for dynamic properties. This is a short demonstration of using them, but there are lots of properties that can be amended including color, opacity, stroke width, stroke colour and an endless number of use cases… It would be great to see what other people have done with dynamic properties!

Thanks for reading and best of luck with your animations! 😄