The Gesture Animations Dance
summary
Builds a dancing chip using Kotlin Multiplatform and the Jetpack Compose Animatable API, with concrete code for tap-to-scale (toggle 1 → 1.2), drag using snapTo for immediate follow, fling using decay to compute target offset then animateDecay or animate back to center, and shake detection by computing acceleration magnitude, applying a low‑pass filter and threshold to trigger synchronized keyframe animations (same duration across scale/rotation/translation). Multiplatform sensor manager maps iOS axes to Android and includes Android Studio virtual sensor demo; full code is in the repo.
AI-written summary · about
chapters (14)
- 0:00Gesture animations intro
- 1:46Animations: what, when, how
- 3:34Dancing chip setup with Compose
- 4:16Tap to scale animation
- 6:04Dynamic effects with animation specs
- 8:31Drag and reposition gestures
- 11:21Fling gestures with decay
- 14:32Multiplatform sensors intro
- 17:21Android sensor manager
- 18:46iOS sensor manager
- 20:32Chip rotation with sensors
- 25:08Shake detection for animations
- 28:19Keyframe animations for shakes
- 30:26Summary and next steps
related talks
32mTap it! Shake it! Fling it! Sheep it!
21mThe Curious Case of Android Gesture Animation
21mAnimations with Jetpack Compose
51mJetpack Compose for Games & Animations
40mExploration of Touch & Input in Jetpack Compose
32mPractical Magic with Animations in Compose
35mAnimations and gesture handling in React Native and native languages
36mPractical Magic with Animations in Compose