Mobile Dev Japan #5
2024.12.18 Tiphaine
Customize your
Lottie animations
Slide 2
Slide 2 text
Hello!
I am Tiphaine
◆ Android dev at DeNA (Pococha)
◆ DroidKaigi staff, Mobile Dev Japan co-org
2
Slide 3
Slide 3 text
What is Lottie ?
1
Slide 4
Slide 4 text
Lottie
4
Open-source library for rendering animations on
Android, iOS, React Native, Web and Windows
airbnb.io/lottie
Slide 5
Slide 5 text
LottieFiles
5
lottiefiles.com
Where you can find all related resources:
other Lottie products, integration tools/plugins,
animation assets, tutorials, etc.
Slide 6
Slide 6 text
Why it’s nice
6
◆ Lightweight, scalable with larger screens
◆ Same file can be used for several platforms
◆ Good balance between customization and
ease of implementation
Slide 7
Slide 7 text
7
@Composable
fun MyAnimation() {
val composition by rememberLottieComposition(
LottieCompositionSpec.RawRes(R.raw.thanks)
)
LottieAnimation(composition = composition)
}
Usage example
Slide 8
Slide 8 text
2
How to customize
Slide 9
Slide 9 text
What can you customize?
9
◆ Basic: iteration/loop, speed, progression
◆ Dynamically: colors, stroke width, opacity,
font, text size, text, image...
Slide 10
Slide 10 text
Dynamic Properties
10
Use to update the animation at runtime with:
◆ A LottieProperty
◆ A KeyPath
Doc: Dynamic Properties
Slide 11
Slide 11 text
LottieProperty
11
◆ The animation property you want to change
◆ Choose from a list of static constants with
pre-defined return types
Doc: Animatable Properties list, LottieProperty.java
Slide 12
Slide 12 text
KeyPath
12
◆ The path to the node (layer object in a JSON)
that has the property you target
◆ A list of Strings used to find that target node
20
// Returns a list of all the nodes (Layer objects)
LottieAnimationView.resolveKeyPath(KeyPath("**"))
Step 2: get the KeyPath of the target node
Use this helper method to discover
the structure of the JSON file
Slide 21
Slide 21 text
21
◆ Can’t access it through Compose 🥲
◆ Need to temporarily wrap the animation
in an AndroidView (just to print the result)
Ref: lottie-android issue #2080
But...
Slide 22
Slide 22 text
22
val context = LocalContext.current
val customView = remember {
LottieAnimationView(context)
}
AndroidView({ customView }) { view ->
with(view) {
setAnimation(R.raw.thanks)
// Print the result of this
view.resolveKeyPath(KeyPath("**"))
}
}
Slide 23
Slide 23 text
23
🤯
Slide 24
Slide 24 text
24
Slide 25
Slide 25 text
25
Slide 26
Slide 26 text
26
Slide 27
Slide 27 text
27
// Get all the nodes under “Heart Filled Outlines”
KeyPath("Love icon", "Heart Filled Outlines", "**")
Ref: KeyPath (doc), Dynamic Lottie Animations on Android
Slide 28
Slide 28 text
28
Step 3: use the LottieProperty and the KeyPath
to build a rememberLottieDynamicProperty