Jetpack Compose Animations: Bringing UIs to Life

Transcript

1. Jetpack Compose Animations: Bringing UIs to Life By Su Thwe Thwe Tun DevFest 2024
2. SU THWE THWE TUN MOBILE APPLICATION DEVELOPER @USA I’m passionate about building mobile apps to achieve easier and better lifestyles in our everyday lives. I have been working as a mobile developer for 10 years with Android and Flutter.
3. AGENDA Why Animations Matter Overview of Jetpack Compose Animation APIs Basic Animation Concepts Advanced Animations Best Practices for Performance Real-World Use cases
4. WHY ANIMATIONS MATTER Enhance User Experience Provide Feedback Guide User Attention Make Apps Engaging
5. Key Animation APIs in Jetpack Compose animate*AsState for animating values. 1. AnimatedVisibility for showing/hiding elements. 2. rememberInfiniteTransition for looping animations. 3. Transition for combining multiple animations. 4. Modifier.graphicsLayer for low-level transformations. 5. Modifier.pointerInput for gesture-based animations. 6.
6. animate*AsState Animate a single property value (e.g., color, size, offset).
7. animate*AsState
8. AnimatedVisibility Animates the appearance and disappearance of composables.
9. AnimatedVisibility
10. rememberInfiniteTransition Creates infinite animations for elements that repeat continuously.
11. rememberInfiniteTransition
12. Transition Manages multiple animations that are synchronized based on a target state.
13. Transition
14. Modifier.graphicsLayer Provides low-level control over visual transformations like scaling, rotation, and opacity.
15. Modifier.graphicsLayer
16. Gestures with Animations Combine Modifier.pointerInput with animations.
17. Real-World Use Cases for Jetpack Compose Animations
18. Real-World Use Cases for Animations Onboarding Flows Dynamic Themes Interactive Elements Loaders and Progress Indicators
19. Onboarding Flows with Animated Transitions Onboarding is often the first interaction users have with your app. Animations help make this experience smooth and engaging. Real-World example: Google Drive’s onboarding flow
20. Dynamic Themes with Smooth Color Transitions Dynamic theming lets users switch between themes (e.g., light/dark mode) or customize app colors. Real-World example: Twitter’s dynamic theme switch
21. Interactive Elements: Expandable Lists and FAB Animations Animations make interactive elements like expandable lists or Floating Action Buttons (FAB) feel intuitive and polished. Real-World example: Google Play Store uses expandable cards for app details. Gmail’s FAB animations make actions accessible and engaging.
22. Engaging Loaders and Progress Indicators Loaders and progress indicators provide feedback for ongoing tasks Real-World example: Google Photos uses subtle animations in its progress indicators during uploads.
23. BEST PRACTICES FOR COMPOSE ANIMATIONS Optimize Animation Performance: 1. Use animate*AsState for lightweight, state-driven animations. Leverage Profiling Tools: 2. Use Layout Inspector and CPU Profiler Consider User Accessibility: 3. Avoid overwhelming animations that may distract or confuse users. Keep Animations Purposeful: 4. Ensure every animation serves a clear purpose
24. Sample code
25. Practices Compose samples https://github.com/android/compose-samples/tree/main?tab=readme-ov-file Jetpack Compose GraphicsLayer Modifier https://medium.com/mobile-app-development-publication/have-fun-with- jetpack-compose-graphicslayer-modifier-e39c12a4791f Jetpack Compose Animations https://medium.com/@rahnuma.sharib786/jetpack-compose-animations- 88edde7ba4c6
26. THANK YOU