Android Academy · Ders

Hareket ve Yay Animasyonları

Fiziğe dayalı doğal hareketler.

Hareket ve Yay Animasyonları, CoddyKit'te ücretsiz bir Android 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, Android Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Android Academy kursu toplamda 4 dersten oluşur.

Etkileşimli, Fiziksel Hareket

En keyif veren animasyonlar kullanıcının parmağına tepki verir ve momentum ile sıçrama özelliklerine sahip gerçek nesneler gibi hissedilir. Bunları oluşturmak için hareketleri fiziğe dayalı animasyonlarla birleştirirsiniz.

Bu derste Animatable, yaylar, savrulma sönümü ve bunların doğal, etkileşimli bir kullanıcı arayüzü için sürükleme hareketlerine bağlanması ele alınır.

Animatable: Düşük Seviyeli Denetim

animate*AsState duruma tepki verirken Animatable size zorunlu denetim sağlar. Bir tanesini remember içinde tutar ve animateTo veya snapTo gibi çağrılarla bir ortak yordamdan yönetirsiniz.

Bu, hareketlerle yönlendirilen hareketin temelini oluşturur.

@Composable
fun BounceOnClick() {
    val scale = remember { Animatable(1f) }
    val scope = rememberCoroutineScope()
    Box(
        Modifier
            .graphicsLayer { scaleX = scale.value; scaleY = scale.value }
            .clickable {
                scope.launch {
                    scale.animateTo(1.3f, spring())
                    scale.animateTo(1f, spring())
                }
            }
    )
}

Yaylar: dampingRatio ve stiffness

Bir spring özelliği iki değerle tanımlanır:

dampingRatio - ne kadar sıçrayacağı. Daha düşük değer daha fazla sıçrama sağlar; 1f (kritik sönümlü) aşımı önler.
stiffness - ne kadar hızlı olacağı. Daha yüksek değer hedefe daha hızlı ulaşır.

Compose, Spring.DampingRatioMediumBouncy ve Spring.StiffnessLow gibi sabitler sağlar; bu nedenle ham sayıları nadiren kullanmanız gerekir.

val spec = spring<Float>(
    dampingRatio = Spring.DampingRatioLowBouncy,
    stiffness = Spring.StiffnessMedium
)

// later, inside a coroutine:
// offset.animateTo(targetValue = 0f, animationSpec = spec)

Sürükleme Hareketlerini Algılama

Hareketi etkileşimli hâle getirmek için dokunma girdisini okursunuz. Kullanıcı parmağını hareket ettirirken Modifier.pointerInput ile detectDragGestures, sürükleme farklarını bildirir.

Bu farkları bir uzaklık değerinde biriktirip composable'a uygularsınız.

@Composable
fun Draggable() {
    var offsetX by remember { mutableStateOf(0f) }
    Box(
        Modifier
            .offset { IntOffset(offsetX.roundToInt(), 0) }
            .size(80.dp)
            .background(Color.Red)
            .pointerInput(Unit) {
                detectDragGestures { change, drag ->
                    change.consume()
                    offsetX += drag.x
                }
            }
    )
}

Yayla Geri Oturtma

Sürüklemeyi, "geri oturma" efekti için Animatable ile birleştirin. Sürükleme sırasında parmağın konumuna anında snapTo uygulayın; bırakıldığında öğenin başlangıç konumuna yay gibi sekerek dönmesi için animateTo(0f) işlevini bir yayla kullanın.

@Composable
fun SnapBack() {
    val offsetX = remember { Animatable(0f) }
    val scope = rememberCoroutineScope()
    Box(
        Modifier
            .offset { IntOffset(offsetX.value.roundToInt(), 0) }
            .size(80.dp)
            .background(Color.Blue)
            .pointerInput(Unit) {
                detectDragGestures(
                    onDrag = { change, drag ->
                        change.consume()
                        scope.launch { offsetX.snapTo(offsetX.value + drag.x) }
                    },
                    onDragEnd = {
                        scope.launch { offsetX.animateTo(0f, spring()) }
                    }
                )
            }
    )
}

Hızla Fırlatma

Gerçek fırlatma hareketleri, parmak kaldırıldıktan sonra da devam eder. Hızı bir VelocityTracker ile izleyin, ardından öğenin sürtünme tabanlı bir DecayAnimationSpec kullanarak doğal biçimde durması için bunu animateDecay işlevine aktarın.

val decay = rememberSplineBasedDecay<Float>()

// on drag end, with measured velocity:
// scope.launch {
//     offsetX.animateDecay(
//         initialVelocity = velocity,
//         animationSpec = decay
//     )
// }

Bağlantı Noktalarıyla Kaydırarak Kapatma

Sabit dinlenme konumlarına sahip kaydırma hareketleri için (örneğin kaydırarak kapatma), anchoredDraggable tanımlanan bağlantı noktalarına oturur. Durumları ve bunların piksel konumlarını bildirirsiniz; Compose aralarındaki yay hareketini yönetir.

enum class DragValue { Start, End }

val state = remember {
    AnchoredDraggableState(
        initialValue = DragValue.Start,
        anchors = DraggableAnchors {
            DragValue.Start at 0f
            DragValue.End at 300f
        }
    )
}

Sonsuz ve Tekrarlanan Animasyonlar

Nabız gibi atan bir nokta veya yükleme parıltısı gibi sürekli hareketler için rememberInfiniteTransition ile infiniteRepeatable kullanın. İleri-geri hareket için RepeatMode değerini Reverse, başa dönerek tekrarlamak için Restart olarak ayarlayın.

@Composable
fun Pulse() {
    val transition = rememberInfiniteTransition(label = "pulse")
    val scale by transition.animateFloat(
        initialValue = 1f,
        targetValue = 1.2f,
        animationSpec = infiniteRepeatable(
            animation = tween(700),
            repeatMode = RepeatMode.Reverse
        ),
        label = "scale"
    )
    Box(Modifier.graphicsLayer { scaleX = scale; scaleY = scale })
}

Hareketi ve Yayı Birleştirme

Etkileşimli kullanımın temel modeli şudur: hareket ettirmek için sürükleyin, yerine oturtmak için bırakın. Sürükleme sırasında hızı izleyin; ardından mesafeye veya hıza bağlı olarak ya animateDecay ile fırlatın ya da bir spring ile bir bağlantı noktasına doğru oturtun.

Alt sayfaların, döngüsel listelerin ve kapatılabilir kartların bu kadar doğal hissettirmesinin nedeni tam olarak budur.

// pattern:
// 1) onDrag    -> animatable.snapTo(current + delta)
// 2) onDragEnd -> if (fast) animatable.animateDecay(velocity, decay)
//                 else      animatable.animateTo(nearestAnchor, spring())

Saf Kotlin'de Yayla Oturma

Bir yayın nasıl yerine oturduğunu görmek için burada saf Kotlin ile yazılmış en küçük döngüyü bulabilirsiniz. Her adımda hedefe doğru geri çağırıcı bir kuvvet uygular ve hızı sönümler; Compose da her karede aynı fikri kullanır.

fun main() {
    var pos = 0f
    var vel = 0f
    val target = 200f
    val stiffness = 0.2f
    val damping = 0.75f
    repeat(8) { step ->
        vel = (vel + (target - pos) * stiffness) * damping
        pos += vel
        println("step $step pos=${"%.1f".format(pos)}")
    }
}

Dokunma, Basma ve Birden Çok Hareket

Sürükleme tek hareket türü değildir. pointerInput, dokunmalar, çift dokunmalar ve uzun basmalar için detectTapGestures; yakınlaştırma ve döndürme içinse detectTransformGestures sunar.

Burada uzun basma, bir yay ölçeklendirmesini tetikler; böylece hareket algılama bir Animatable ile birleştirilir.

@Composable
fun LongPressScale() {
    val scale = remember { Animatable(1f) }
    val scope = rememberCoroutineScope()
    Box(
        Modifier
            .graphicsLayer { scaleX = scale.value; scaleY = scale.value }
            .pointerInput(Unit) {
                detectTapGestures(
                    onLongPress = {
                        scope.launch { scale.animateTo(1.4f, spring()) }
                    },
                    onPress = {
                        tryAwaitRelease()
                        scope.launch { scale.animateTo(1f, spring()) }
                    }
                )
            }
    )
}

Hızlı Kontrol

Bırakıldığında başlangıç konumuna geri sekmesi gereken sürüklenebilir bir kart oluşturuyorsunuz. Deyimsel Compose tercihi olan birleşim hangisidir?

Özet: Hareketler ve Yaylar

Artık doğal ve etkileşimli hareketler oluşturabilirsiniz:

Animatable, animateTo / snapTo aracılığıyla命令sel ve coroutine tabanlı denetim sağlar.
spring, dampingRatio (sekme) ve stiffness (hız) ile ayarlanır.
pointerInput + detectDragGestures, dokunmayı harekete dönüştürür; animateDecay ise fırlatma ekler.
anchoredDraggable, kaydırma etkileşimleri için sabit konumlara oturur.
rememberInfiniteTransition, nabız ve parıltı gibi döngüsel efektleri çalıştırır.

Jetpack Compose'da Animasyonlar konusu böylece tamamlanmış oldu. Artık değerleri, görünürlüğü, içeriği ve hareketleri güvenle animasyonlu hâle getirebilirsiniz.

Sıkça Sorulan Sorular

“Hareket ve Yay Animasyonları” dersi ücretsiz mi?

Evet — “Hareket ve Yay 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 Android Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Android Academy kursu toplamda 4 dersten oluşur.

“Hareket ve Yay Animasyonları” dersinde ne öğreneceğim?

Fiziğe dayalı doğal hareketler. Android 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.

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

Önceden deneyim gerekmez. CoddyKit'te Android 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.

“Hareket ve Yay 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 Android Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Android 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

← Android Academy Sayfasına Dön