Jetpack Compose Academy · Ders

Hareketlerle Yönlendirilen Animasyonlar

Hareketi sürüklemeler ve kaydırmalarla yönlendirin.

Hareketlerle Yönlendirilen Animasyonlar, CoddyKit'te ücretsiz bir Jetpack Compose Academy dersidir. Bu, 4 dersinin 4. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Jetpack Compose Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Jetpack Compose Academy kursu toplamda 4 dersten oluşur.

Bu dersin bazı bölümleri henüz çevrilmemiş olup İngilizce olarak gösterilmektedir.

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. 🎉

Sıkça Sorulan Sorular

“Hareketlerle Yönlendirilen Animasyonlar” dersi ücretsiz mi?

Evet — “Hareketlerle Yönlendirilen Animasyonlar” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Jetpack Compose Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Jetpack Compose Academy kursu toplamda 4 dersten oluşur.

“Hareketlerle Yönlendirilen Animasyonlar” dersinde ne öğreneceğim?

Hareketi sürüklemeler ve kaydırmalarla yönlendirin. Jetpack Compose Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

Jetpack Compose Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te Jetpack Compose Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 4. dersidir.

“Hareketlerle Yönlendirilen Animasyonlar” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu Jetpack Compose Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Jetpack Compose Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

← Jetpack Compose Academy Sayfasına Dön