Animações Orientadas por Gestos
Controle o movimento com arrastos e deslizes.
Animações Orientadas por Gestos é uma aula grátis de Jetpack Compose Academy no CoddyKit. Esta é a aula 4 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Jetpack Compose Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Jetpack Compose Academy inclui 4 aulas no total.
Partes desta aula ainda não foram traduzidas e aparecem em inglês.
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. 🎉
Perguntas Frequentes
A aula “Animações Orientadas por Gestos” é grátis?
Sim — o texto completo de “Animações Orientadas por Gestos” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Jetpack Compose Academy, atualize para CoddyKit PRO. O curso de Jetpack Compose Academy inclui 4 aulas no total.
O que vou aprender em “Animações Orientadas por Gestos”?
Controle o movimento com arrastos e deslizes. Você pratica Jetpack Compose Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar Jetpack Compose Academy?
Nenhuma experiência prévia é necessária. Jetpack Compose Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 4 de 4.
Quanto tempo leva a aula “Animações Orientadas por Gestos”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de Jetpack Compose Academy?
Sim. Cada aula de Jetpack Compose Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- animate*AsState para Interpolações Simples
- AnimatedVisibility e Crossfade
- updateTransition para Movimento Coordenado
- Animações Orientadas por Gestos