Android Academy · Ders

animate*AsState Temelleri

Tekil değerleri akıcı biçimde canlandırın.

animate*AsState Temelleri, CoddyKit'te ücretsiz bir Android Academy dersidir. Bu, 4 dersinin 2. 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.

Tek Bir Değeri Canlandırma

Compose'ta animasyon oluşturmanın en basit yolu animate*AsState ailesidir. Bir hedef değer verirsiniz; hedef değiştiğinde mevcut değerden hedefe doğru yumuşak biçimde canlanan bir State döndürür.

Yaygın her tür için bir varyant vardır: animateFloatAsState, animateDpAsState, animateColorAsState, animateOffsetAsState ve daha fazlası.

animateFloatAsState

animateFloatAsState, tek bir Float değerini canlandırır. Yaygın kullanım alanlarından biri opaklıktır (alfa). visible değiştiğinde döndürülen alfa, 0f ile 1f arasında akıcı biçimde geçiş yapar.

by anahtar sözcüğüne dikkat edin: Bu sözcük, canlandırılan State<Float> değerini doğrudan düz bir Float olarak okumanızı sağlar.

@Composable
fun FadingLabel(visible: Boolean) {
    val alpha by animateFloatAsState(
        targetValue = if (visible) 1f else 0f,
        label = "alpha"
    )
    Text(
        "Hello",
        modifier = Modifier.graphicsLayer { this.alpha = alpha }
    )
}

animateDpAsState

Kullanıcı arayüzü boyutları ve uzaklıkları Dp kullanır; bu nedenle dolgu, boyut veya konumu canlandırmak için animateDpAsState kullanın.

Burada bir kutu, geçiş yapıldığında 80dp'den 160dp'ye büyür. Canlandırılan Dp değerini size() içine verdiğimiz için kutu akıcı biçimde yeniden boyutlanır.

@Composable
fun GrowingBox(big: Boolean) {
    val size by animateDpAsState(
        targetValue = if (big) 160.dp else 80.dp,
        label = "size"
    )
    Box(
        Modifier
            .size(size)
            .background(Color.Blue)
    )
}

animateColorAsState

Renkleri canlandırmak için animateColorAsState kullanın. Renk uzayı boyunca ara değerler oluşturarak geçişlerin, tuhaf ara tonlar arasında titreşmek yerine akıcı ve doğal görünmesini sağlar.

Burada bir durum noktası, boole değerine göre kırmızı ve yeşil arasında canlanır.

@Composable
fun StatusDot(online: Boolean) {
    val color by animateColorAsState(
        targetValue = if (online) Color(0xFF4CAF50) else Color(0xFFF44336),
        label = "status-color"
    )
    Box(
        Modifier
            .size(16.dp)
            .clip(CircleShape)
            .background(color)
    )
}

animationSpec ile Özelleştirme

Varsayılan olarak bu yardımcılar yumuşak bir yay kullanır. Zamanlamayı denetlemek için bir animationSpec geçirin. Sabit süreyi bir yumuşatma eğrisiyle kullanmak için tween seçin.

Bu panel, akıcı bir hızlanma ve ardından yavaşlama eğrisiyle 400 ms boyunca kayar.

@Composable
fun SlidingPanel(open: Boolean) {
    val offset by animateDpAsState(
        targetValue = if (open) 0.dp else 250.dp,
        animationSpec = tween(
            durationMillis = 400,
            easing = FastOutSlowInEasing
        ),
        label = "offset"
    )
    Box(Modifier.offset(x = offset)) { /* content */ }
}

Yumuşatma Eğrileri

Yumuşatma, bir animasyonun nasıl hızlanıp yavaşlayacağını belirler. Compose birkaç seçenek sunar:

LinearEasing - sabit hız (mekanik bir his).
FastOutSlowInEasing - Material'ın varsayılanı; hızlı başlangıç, yumuşak bitiş.
LinearOutSlowInEasing - ekrana giren ögeler için.
FastOutLinearInEasing - ekrandan çıkan ögeler için.

Doğru yumuşatmayı seçmek, hareketin robotik yerine bilinçli tasarlanmış gibi hissedilmesini sağlar.

val progress by animateFloatAsState(
    targetValue = if (done) 1f else 0f,
    animationSpec = tween(500, easing = LinearOutSlowInEasing),
    label = "progress"
)

Yay Özellikleri

Sabit bir süre yerine fiziksel ve doğal hissettiren bir yay kullanabilirsiniz. Yay, dampingRatio (ne kadar sıçrayacağı) ve stiffness (ne kadar hızlı olacağı) ile tanımlanır.

Yaylar kullanışlıdır; çünkü animasyonun ortasında hedef değişse bile sorunsuz biçimde uyum sağlar.

val scale by animateFloatAsState(
    targetValue = if (active) 1.2f else 1f,
    animationSpec = spring(
        dampingRatio = Spring.DampingRatioMediumBouncy,
        stiffness = Spring.StiffnessLow
    ),
    label = "scale"
)

Tamamlanmaya Tepki Verme

Bazen bir animasyon tamamlandığında, örneğin bir değer hedefine ulaştığında bir geri çağırma işlevi çalıştırmak gibi, bir işlem yapmanız gerekir. animate*AsState tam olarak bunun için bir finishedListener kabul eder.

val alpha by animateFloatAsState(
    targetValue = if (gone) 0f else 1f,
    label = "alpha",
    finishedListener = { finalValue ->
        if (finalValue == 0f) onFullyHidden()
    }
)

Birden Çok Özelliği Canlandırma

Aynı anda birden fazla özelliği canlandırmak için birkaç animate*AsState çağrısını birleştirebilirsiniz. Her biri kendi değerini izler ve birlikte daha zengin bir etki oluştururlar.

Burada bir yonga seçildiğinde hem ölçeği değişir hem de rengi canlanır.

@Composable
fun SelectableChip(selected: Boolean, text: String) {
    val scale by animateFloatAsState(if (selected) 1.1f else 1f, label = "s")
    val bg by animateColorAsState(
        if (selected) Color(0xFF3F51B5) else Color.LightGray,
        label = "bg"
    )
    Box(
        Modifier
            .graphicsLayer { scaleX = scale; scaleY = scale }
            .clip(RoundedCornerShape(16.dp))
            .background(bg)
            .padding(horizontal = 12.dp, vertical = 6.dp)
    ) { Text(text) }
}

Saf Kotlin ile Bir Yay

Bir yayın ne yaptığını anlamak için küçük bir saf Kotlin benzetimi inceleyelim. Bu benzetim, bir miktar sönümlemeyle her adımda bir değeri hedefe doğru iter; Compose'un yayınının birçok kare boyunca hedef değerinize yaklaşmasına benzer.

fun main() {
    var value = 0f
    val target = 100f
    var velocity = 0f
    val stiffness = 0.1f
    val damping = 0.6f
    repeat(6) { step ->
        val force = (target - value) * stiffness
        velocity = (velocity + force) * damping
        value += velocity
        println("step $step -> ${"%.1f".format(value)}")
    }
}

Int ve Offset Değerlerini Canlandırma

Bu aile kayan noktalı sayılarla ve renklerle sınırlı değildir. Rozet sayısı hedefi gibi tam sayı değerleri için animateIntAsState; iki boyutlu konumu tek çağrıda canlandırmak için animateOffsetAsState veya animateIntOffsetAsState kullanın.

Burada bir yonga, IntOffset değerini canlandırarak çapraz yönde kayar.

@Composable
fun SlidingChip(moved: Boolean) {
    val pos by animateIntOffsetAsState(
        targetValue = if (moved) IntOffset(120, 60) else IntOffset.Zero,
        label = "pos"
    )
    Box(
        Modifier
            .offset { pos }
            .size(40.dp)
            .background(Color.Magenta)
    )
}

Kısa Bir Kontrol

Bir boole değeri değiştiğinde, Dp cinsinden ölçülen bir kutunun genişliğini yumuşak biçimde canlandırmak istiyorsunuz. Hangi API en uygundur?

Özet: animate*AsState

animate*AsState ailesi, tek bir değeri canlandırmak için başvuracağınız seçenektir:

Türe uygun varyantı seçin: animateFloatAsState, animateDpAsState, animateColorAsState vb.
Bir targetValue ayarlayın; sonuç her değişiklikte bu değere doğru canlanır.
Hareketi, tween + yumuşatma veya spring ile animationSpec kullanarak ayarlayın.
Birden çok özelliği birlikte canlandırmak için birkaçını birleştirin.
Bir animasyon tamamlandığında tepki vermek için finishedListener kullanın.

Sırada: AnimatedVisibility ve geçişlerle içeriğin görünmesini ve kaybolmasını canlandırmak var.

Sıkça Sorulan Sorular

“animate*AsState Temelleri” dersi ücretsiz mi?

Evet — “animate*AsState Temelleri” 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.

“animate*AsState Temelleri” dersinde ne öğreneceğim?

Tekil değerleri akıcı biçimde canlandırın. 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 2. dersidir.

“animate*AsState Temelleri” 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