Lottie: Animating the bridge between Designers and Developers

Learn how to use Lottie by AirBnb in Android, iOS and Web. Presentation at Fragments 2017.

Transcript

2. Designer was feeling high that day..
3. Developer was feeling low that day..
4. With Lottie, all are happy!
5. Lottie Animating the bridge between Designers and Developers
6. Animations in Mobile 1. Building Animations by hand 2. Facebook Keyframes 3. GIFs/PNG sequences 4. Animated Vector Drawable (Android) 5. Quartz 2D (iOS) 6. Lottie for Android / iOS / Web / React
7. We have a winner
9. What is Lottie? Umm.. Lotte Choco Pie?
10. Lottie is named after a German film director and the pioneer of silhouette animation, Lotte Reiniger. Papageno
11. Lottie Lottie is a tool by Airbnb that parses Adobe After Effects animations exported as json with Bodymovin and renders them on mobile.
12. What else? Now engineers can use exactly what the designer intended, exactly how it was made
15. “Dropping this into the app felt almost like cheating; I’d never implemented a complex animation in so little time.” - Nick Butcher, Google
17. Inspired by Squall, Keyframes, RubberHose, 9 Squares Motion Corpse, Animography
18. Workflow After Effects Bodymovin Lottie
19. The Experiment Lottie can build animations in no time while creating them by hand can be daunting.
20. How it works? It’s easier than you think. Almost magical
21. Create an animation in AE
22. Export using Bodymovin
23. Bodymovin JSON output Bodymovin renders animation by iterating layers from After Effects in non-readable JSON.
24. Upload on lottiefiles.com
25. Scan QR Code
26. Lottie Android 1. Add Lottie dependency to your app gradle. 2. Add lottie-file.json to your project assets.
27. Lottie Android 3. Use LottieAnimationView in XML or Java/Kotlin file.
28. Lottie Android To reuse animation (like in list items), load from a network request JSONObject.
29. Lottie Android Load animation through a file from assets folder or from the network.
30. Lottie Android Control the animation or add listeners.
31. Lottie iOS 1. Add Lottie using Cocoapods or Carthage. 2. Add lottie-file.json to your project.
32. Lottie iOS 3. Use LottieAnimationView in Objective-C/Swift file.
33. Hands on & • Installing BodyMovin Plugin in Adobe After Effects. • Creating an Animation in After Effects and render it using BodyMovin. • Creating cool Animations in Android using Lottie. Lets do some
34. Pros 1. Simple Workflow 2. Cross Platform 3. Feature & API Support (>API 14) 4. Progress / Scale / Speed Control 5. On Demand Animations
35. There are more.. 6. It supports loading JSON files over the network, which is useful for A/B testing. 7. It also has an optional caching mechanism, so frequently used animations, such as a wish-list heart, can load a cached copy each time. 8. Lottie animations can be driven by gestures using the animated progress feature, and animation speed can be manipulated by changing a simple value. 9. Text Delegate for text animations for say Internationalisation. 10.Specify layer and mask it for interactive Animated Transitions or change colour of any layer.
36. Cons 1. Performance issues with complex animations. 2. Black Boxes because of non-readable JSON. 3. Its method count is 1057. Comp MC(Picasso) = 849 and MC(Glide) = 2879. Its dex count is 142. Comp DC(Picasso) = 106, DC(Glide) = 403. 4. Doesn't work with all text animations. Workaround: Convert text to Shapes/Masks. 5. Masks and mattes are less performant as Lottie renders layers using buffer for such animations. Workaround: use lesser frame rate.
37. Who uses Lottie?
38. References • http://airbnb.design/redefiningboundaries • http://airbnb.io/lottie/ • https://github.com/airbnb/lottie-android • https://blog.prototypr.io/a-lottie-to-like-6670f2bed3c5 • http://www.videocopilot.net/basic • http://www.lottiefiles.com
40. Lottie and The Noun Project on open-source animated icons. Modern Pictograms for Lottie
41. Complimentary Tools Bringing Sketch and After Effects closer together
42. Sketch2AE
43. Inspector Spacetime
44. Thank You! Nattu [Lead Product Designer at ServisHero] Jaspal Singh [Designer at ColorBlind] Garima Jain [Senior Android Dev at Fueled]
45. Here’s a silhouette shot by me at Kheer Ganga, HP
46. With Love Chetan Sachdeva [Android Dev at Fueled] @chetsachdeva