Next Gen Lottie: Powering Motion Graphics Across the Apple Ecosystem

iOS Seoul Meetup May Edition with LottieFiles, by Jinny You
- https://youtu.be/MThkq2Q2UUM?si=IX28IN3l6zzEYTpe

Transcript

1. Next-Gen Lottie: Powering Motion Graphics Across the Apple Ecosystem jinny@lottiefiles.com Seoul iOS Meetup [May Edition] with
2. Quiz: How did Lottie format start to get popular?
3. Answer: Devs started to love it!
5. FE Engineer at LottieFiles
6. FE Engineer at LottieFiles App Developer by night
7. Why Motion
9. Now we know what we need. Animation that are Small in Size Easy to edit Easy to implement
10. We want to make the journey Easy & Simple!
12. Optimized file size GIF Lottie 82.7 kb 36.4 kb .Lottie 3.5 kb
13. Handoff made super easy!
14. Simple Customization
15. Keep the designers’ workflow as is
17. Human Interface Guidelines
18. Motion Beautiful, fluid motions bring the interface to life, conveying status, providing feedback and instruction, and enriching the visual experience of your app or game. https://developer.apple.com/design/human-interface-guidelines/motion
19. Motion Beautiful, fluid motions bring the interface to life, conveying status, providing feedback and instruction, and enriching the visual experience of your app or game. https://developer.apple.com/design/human-interface-guidelines/motion
20. Motion Beautiful, fluid motions bring the interface to life, conveying status, providing feedback and instruction, and enriching the visual experience of your app or game. https://developer.apple.com/design/human-interface-guidelines/motion
21. Motion Beautiful, fluid motions bring the interface to life, conveying status, providing feedback and instruction, and enriching the visual experience of your app or game. https://developer.apple.com/design/human-interface-guidelines/motion
22. How to use Motion
23. Previously Lottie in Apple platforms
28. However
33. community community So how can we address this issue?
34. A super set of Lottie JSON Lottie spec & Smaller size & Faster performance
37. lottie.host https://lottie.host/embed/58a42e5f-9638-423c-80c7- 96c6fd13ba32/hgnWWfP1Cy.json Extremely lightweight, scalable & interactive file format standard GIF 598KB Lottie JSON 89% smaller than GIF dotLottie 99% smaller than GIF GIF
38. dotLottie offers even more powerful features
39. dotLottie Theming
40. dotLottie Segment
41. dotLottie integration to Apple system
42. multi animations, theming
43. How?
44. Introducing
45. 1 Web integration 10+ maintainers over the world minimum binary size Start from Hardware Acceleration WebGPU Integration Designed for wide range of programs To learn more
46. In our case, this led to saving approximately 8 seconds marking an improvement of around 80%. Similarly, in memory terms, we saved approximately 164MB, which equates to ~70%.
47. Specification 2.0 Powerful Theming & State Machine
48. dotLottie V2 Specifications Multiple Animations in One File https://dotlottie.io/spec/2.0/
49. What is StateMachine? (Interactivity) Interactivity is the combination of motion design (animation, movement, and transitions) with user interaction (touch, click, hover, drag, etc.). It allows animations to respond dynamically to user inputs, creating a more engaging and intuitive experience.
50. Exploding state Light-mode Dark-mode Star Rating
51. Multiple Themes for one Animation
52. dotLottie StateMachines
53. dotLottie StateMachines
54. community community Elevating user experience is not just the responsibility of designers or PM's anymore… — it's also the responsibility of developers.
55. community community Q&A Any Questions?
56. Think Motion. Thank you.