Practical Magic with Animations in Compose
summary
Implements a gesture-driven navigation drawer in Jetpack Compose that translates X, scales content to 0.8, and rounds corners using Modifier.graphicsLayer, first with manual animatable + draggable + spline-based decay (snapping, velocity-based fling, midpoint threshold) and then simplified to anchorDraggable with anchors at 0 and drawer width (Compose 1.6.0 alpha3). Compares spring animation vs tween easing, shows using rememberInfiniteTransition and two Animatable objects to build a blinking, pulsing SVG jellyfish rendered with rememberVectorPainter; everything animates and snaps as intended.
AI-written summary · about
chapters (10)
- 0:00Introduction to animations
- 1:29Breaking down animations
- 3:56Using graphics layer
- 5:00Triggering animations
- 8:21Gesture-driven animations
- 17:10Customizing animation specs
- 23:49Built-in animation composables
- 25:33Choosing the right API
- 28:05Summary and Q&A
- 28:26Bonus: Animated vector graphics
related talks
36mPractical Magic with Animations in Compose
21mAnimations with Jetpack Compose
47mAnimations with Compose: Make Your Apps Shimmering
39mMagic Sprinkles: Adding animations to your app with Jetpack Compose
36mPractical implementations of powerful UI expressions using Jetpack Compose
07m5 quick animations to make your Compose app stand out
51mJetpack Compose for Games & Animations
32mJetpack Compose for Games & Animations