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)
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
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! 😄