Animations with Compose: Make Your Apps Shimmering
summary
A live-coding session demonstrates using Jetpack Compose animation APIs in a small chat app: AnimatedVisibility and animateFloatAsState for toggling FAB text and rotating icons, rememberAnimatedVectorPainter to run animated vector assets, and animateItemPlacement for smooth lazy-list reordering. Navigation transitions are implemented with AnimatedNavHost plus accompanist for slide animations, while keyframes, springs, repeats and LaunchedEffect drive splash, progress-bar and looping motions; most features work out of the box though issues like scroll jump and no shared-element support remain.
AI-written summary · about
chapters (21)
- 0:00Introduction
- 1:09Why animations matter
- 2:12Jetpack Compose overview
- 4:41Chat app demo
- 6:31AnimatedVisibility
- 8:37Rotation with animateFloatAsState
- 10:25Text slide-in/out
- 12:53Custom enter/exit
- 14:39Color animations with animateColorAsState
- 17:10Interpolators
- 19:57AnimatedVectorDrawables
- 21:22List item animations
- 24:14List scroll animations
- 27:25Screen transitions with AnimatedNavHost
- 30:18Screen transition setup
- 33:11Loading screen
- 36:24Preview in Studio
- 37:49Tween spring keyframes
- 39:13Progress bar with LaunchedEffect
- 41:31Best practices & conclusion
- 44:17Encourage animations
related talks
39mMagic Sprinkles: Adding animations to your app with Jetpack Compose
07m5 quick animations to make your Compose app stand out
42mGlitz and glamor: the compose edition
37mJetpack Compose for Games & Animations
36mPractical Magic with Animations in Compose
32mPractical Magic with Animations in Compose
51mJetpack Compose for Games & Animations
37mThe Layout Animations Show