Jetpack Compose Animations: Bringing UIs to Life By Su Thwe Thwe Tun DevFest 2024

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.

AGENDA Why Animations Matter Overview of Jetpack Compose Animation APIs Basic Animation Concepts Advanced Animations Best Practices for Performance Real-World Use cases

WHY ANIMATIONS MATTER Enhance User Experience Provide Feedback Guide User Attention Make Apps Engaging

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.

animate*AsState Animate a single property value (e.g., color, size, offset).

animate*AsState

AnimatedVisibility Animates the appearance and disappearance of composables.

AnimatedVisibility

rememberInfiniteTransition Creates infinite animations for elements that repeat continuously.

rememberInfiniteTransition

Transition Manages multiple animations that are synchronized based on a target state.

Transition

Modifier.graphicsLayer Provides low-level control over visual transformations like scaling, rotation, and opacity.

Modifier.graphicsLayer

Gestures with Animations Combine Modifier.pointerInput with animations.

Real-World Use Cases for Jetpack Compose Animations

Real-World Use Cases for Animations Onboarding Flows Dynamic Themes Interactive Elements Loaders and Progress Indicators

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

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

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.

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.

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

Sample code

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

THANK YOU