The Easing Symphony: AnimationSpec in detail!
summary
Builds a working music visualizer using Compose Multiplatform and KMP with Android using MediaPlayer and MediaExtractor iOS using AVAudioPlayer and desktop using Clip, drawing waveform amplitude and frequency on a Canvas and animating values with animateFloatAsState. Shows using out of the box AnimationSpec types spring, tween, keyframes and swapping easings to change timing. Implements a trailing effect by rotating a float array of amplitudes and creates a custom vectorized AnimationSpec that follows a sine 2D path, and the demo runs successfully.
AI-written summary · about
chapters (13)
- 0:00AnimationSpec and easing intro
- 1:46UI properties from music
- 3:12Cross-platform music reader
- 4:36Simple music visualizer
- 6:20Customizing animations
- 8:48Understanding AnimationSpec in depth
- 10:36Animation configuration
- 12:01Trail animations
- 13:24What easing is
- 15:08Easing in code
- 15:49Custom easing functions
- 17:35Custom AnimationSpec design
- 21:49Final visualizer
related talks
26mFuture Composition of Animation
07m5 quick animations to make your Compose app stand out
39mMagic Sprinkles: Adding animations to your app with Jetpack Compose
42mGlitz and glamor: the compose edition
32mPractical Magic with Animations in Compose
37mThe Layout Animations Show
21mAnimations with Jetpack Compose
36mCreative Coding with Compose