Animations pilotées par les gestes
Pilotez les mouvements avec des glissements et des balayages.
Animations pilotées par les gestes est une leçon Jetpack Compose Academy gratuite sur CoddyKit. Ceci est la leçon 4 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Jetpack Compose Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Jetpack Compose Academy comprend 4 leçons au total.
Certaines parties de cette leçon n'ont pas encore été traduites et s'affichent en anglais.
Motion You Control by Touch
State-driven animations run on their own, but some motion should follow your finger. Gesture-driven animations let drags and swipes steer the movement. ✨
Track the Offset
Hold the current position in state. The most direct tool is the Animatable, which stores a value and can both jump and animate to it.
val offsetX = remember { Animatable(0f) }Read Drag Events
Use pointerInput with detectDragGestures to receive each drag delta as the user moves their finger across the element.
Modifier.pointerInput(Unit) { detectDragGestures { _, drag -> } }Follow the Finger
During a drag, call snapTo to move instantly to the new position. Snapping keeps the element glued to the finger with no lag.
scope.launch { offsetX.snapTo(offsetX.value + drag.x) }Apply the Offset
Feed the value into an offset modifier so the Composable physically moves. The view tracks every pixel of the drag in real time.
Modifier.offset { IntOffset(offsetX.value.roundToInt(), 0) }Animate on Release
When the finger lifts, switch from snap to animateTo so the element glides back home or to the nearest anchor smoothly.
scope.launch { offsetX.animateTo(0f) }Carry the Momentum
Capture fling velocity from onDragEnd and pass it to animateDecay. The element keeps coasting after release, just like real flicks. 🌀
offsetX.animateDecay(velocity, exponentialDecay())Swipe Between Anchors
For swipe-to-dismiss or sliders, snap to fixed stops. anchoredDraggable ties gestures to defined anchor points and settles between them.
Coroutines Drive It
Animatable updates are suspend functions, so launch them in a coroutine scope. Grab one with rememberCoroutineScope inside your Composable.
val scope = rememberCoroutineScope()Interruptible by Design
Because gestures and animations share the same Animatable, a new touch interrupts any running animation, handing control straight back to the user.
The Feel of Native Apps
Combining snap during drag with decay and spring on release is the secret to fluid, natural gestures that feel responsive and alive.
Quick Check
While the finger is dragging, which Animatable call keeps the element glued to the touch?
Recap: Touch Meets Motion
You combined pointerInput with Animatable: snapTo while dragging, then animateTo or animateDecay on release for fluid, gesture-driven motion. 🎉
Apprends Kotlin avec un tuteur IA — gratuit
Écris et exécute du vrai code dans ton navigateur, obtiens de l'aide instantanée d'un tuteur IA disponible 24h/24, et reprends là où tu t'es arrêté sur le web ou dans l'app.
- Cours
- 30
- Leçons
- 120
Questions Fréquemment Posées
La leçon « Animations pilotées par les gestes » est-elle gratuite ?
Oui — le texte complet de « Animations pilotées par les gestes » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Jetpack Compose Academy, passe à CoddyKit PRO. Le cours Jetpack Compose Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Animations pilotées par les gestes » ?
Pilotez les mouvements avec des glissements et des balayages. Tu pratiques Jetpack Compose Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Jetpack Compose Academy ?
Aucune expérience préalable n'est requise. Jetpack Compose Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 4 sur 4.
Combien de temps prend la leçon « Animations pilotées par les gestes » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Jetpack Compose Academy ?
Oui. Chaque leçon Jetpack Compose Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- animate*AsState pour des interpolations simples
- AnimatedVisibility et Crossfade
- updateTransition pour des mouvements coordonnés
- Animations pilotées par les gestes