Customize your Lottie animations

Mobile Dev Japan #5 - 18/12/2024
https://mobiledev-japan.connpass.com/event/338503/

Animation GIFs are not moving on PDF format.
Feel free to have a look at the original slides here:
https://docs.google.com/presentation/d/1mYO9NCVbVuIU71eSinVefgUpTO2kzAHdceyBQgZ32BM/edit?usp=sharing

Transcript

1. Mobile Dev Japan #5 2024.12.18　Tiphaine Customize your Lottie animations
2. Hello! I am Tiphaine ◆ Android dev at DeNA (Pococha) ◆ DroidKaigi staff, Mobile Dev Japan co-org 2
3. What is Lottie ? 1
4. Lottie 4 Open-source library for rendering animations on Android, iOS, React Native, Web and Windows airbnb.io/lottie
5. LottieFiles 5 lottiefiles.com Where you can find all related resources: other Lottie products, integration tools/plugins, animation assets, tutorials, etc.
6. 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
7. 7 @Composable fun MyAnimation() { val composition by rememberLottieComposition( LottieCompositionSpec.RawRes(R.raw.thanks) ) LottieAnimation(composition = composition) } Usage example
8. 2 How to customize
9. What can you customize? 9 ◆ Basic: iteration/loop, speed, progression ◆ Dynamically: colors, stroke width, opacity, font, text size, text, image...
10. Dynamic Properties 10 Use to update the animation at runtime with: ◆ A LottieProperty ◆ A KeyPath Doc: Dynamic Properties
11. 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
12. 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
13. 13 Free Thanks Button Animation by Shoval Ozeri (Today’s animation example)
15. 15 Use the values associated with “nm” keys in each node you traverse until the target node
16. 16 Find more about what each JSON key means: Lottie系列二：高级属性 **Chinese only, sorry 😇 (but Google translate is your friend)
17. 3 Let’s try!
18. Example: modify a color 18 Let’s make the filled heart shape green ✊
19. 19 Doc: Animatable Properties list, LottieProperty.java Step 1: choose the appropriate LottieProperty LottieProperty.COLOR
20. 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
21. 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...
22. 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("**")) } }
23. 23 🤯
27. 27 // Get all the nodes under “Heart Filled Outlines” KeyPath("Love icon", "Heart Filled Outlines", "**") Ref: KeyPath (doc), Dynamic Lottie Animations on Android
28. 28 Step 3: use the LottieProperty and the KeyPath to build a rememberLottieDynamicProperty
29. 29 rememberLottieDynamicProperty( property = LottieProperty.COLOR, value = Color(0xFF00857a).toArgb(), keyPath = arrayOf( "Love icon", "Heart Filled Outlines", "**", ) )
30. 30 val dynamicProperties = rememberLottieDynamicProperties( rememberLottieDynamicProperty(...), ... ) Step 4: wrap the DynamicProperty inside a rememberLottieDynamicProperties
31. 31 LottieAnimation( composition = composition, iterations = LottieConstants.IterateForever, dynamicProperties = dynamicProperties, ) Step 5: pass the DynamicProperties to LottieAnimation as an argument
32. 32 🎉 ✅ Filled heart color is green ✅ Text and outlined heart colors did not change
33. 33 Thanks! tahia910 Theme: SlidesCarnival