แอนิเมชันที่ขับเคลื่อนด้วยท่าทาง

State-driven animations run on their own, but some motion should follow your finger. Gesture-driven animations let drags and swipes steer the movement. ✨

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.

Use pointerInput with detectDragGestures to receive each drag delta as the user moves their finger across the element.

During a drag, call snapTo to move instantly to the new position. Snapping keeps the element glued to the finger with no lag.

Feed the value into an offset modifier so the Composable physically moves. The view tracks every pixel of the drag in real time.

When the finger lifts, switch from snap to animateTo so the element glides back home or to the nearest anchor smoothly.

Capture fling velocity from onDragEnd and pass it to animateDecay. The element keeps coasting after release, just like real flicks. 🌀

For swipe-to-dismiss or sliders, snap to fixed stops. anchoredDraggable ties gestures to defined anchor points and settles between them.

Animatable updates are suspend functions, so launch them in a coroutine scope. Grab one with rememberCoroutineScope inside your Composable.

Because gestures and animations share the same Animatable, a new touch interrupts any running animation, handing control straight back to the user.

Combining snap during drag with decay and spring on release is the secret to fluid, natural gestures that feel responsive and alive.

While the finger is dragging, which Animatable call keeps the element glued to the touch?

You combined pointerInput with Animatable: snapTo while dragging, then animateTo or animateDecay on release for fluid, gesture-driven motion. 🎉