Android Academy · Ders

AnimatedVisibility ve Geçişler

İçeriğin gösterilmesini ve gizlenmesini canlandırın.

AnimatedVisibility ve Geçişler, CoddyKit'te ücretsiz bir Android Academy dersidir. Bu, 4 dersinin 3. 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.

Görünümü Canlandırma

İçeriği aniden göstermek ve gizlemek rahatsız edici hissettirebilir. Compose'un AnimatedVisibility bileşeni, bir bileşenin yerleşime girişini ve çıkışını canlandırır.

İçeriğinizi bunun içine sarın ve görünürlüğü bir boole değeriyle denetleyin. Bu boole değiştiğinde Compose, içeriği aniden gösterip gizlemek yerine giriş veya çıkış animasyonu oynatır.

@Composable
fun Greeting(show: Boolean) {
    AnimatedVisibility(visible = show) {
        Text("Welcome aboard!")
    }
}

Giriş ve Çıkış Geçişleri

İçeriğin tam olarak nasıl girip çıkacağını enter ve exit parametreleriyle seçebilirsiniz. Yaygın yapı taşları arasında fadeIn/fadeOut, slideIn/slideOut ve expandVertically/shrinkVertically bulunur.

Birkaçını aynı anda çalıştırmak için bunları + işleciyle birleştirin.

@Composable
fun Toast(show: Boolean) {
    AnimatedVisibility(
        visible = show,
        enter = fadeIn() + slideInVertically { it },
        exit = fadeOut() + slideOutVertically { it }
    ) {
        Text("Item added to cart")
    }
}

Geçiş Özelliğini Ayarlama

Her giriş/çıkış geçişi bir animationSpec kabul eder; böylece animate*AsState ile olduğu gibi süreyi ve yumuşatmayı denetleyebilirsiniz.

Burada içerik 300 ms boyunca görünür ve daha hızlı şekilde, 150 ms içinde kaybolur. Bu, kapatmaların atik hissettirmesini sağlayan yaygın bir kalıptır.

AnimatedVisibility(
    visible = show,
    enter = fadeIn(animationSpec = tween(300)),
    exit = fadeOut(animationSpec = tween(150))
) {
    Card { Text("Details") }
}

Genişletme ve Daraltma

Daha fazla içeriği ortaya çıkaran bölümlerde expandVertically ve shrinkVertically, yüksekliği canlandırarak çevredeki içeriğin akıcı biçimde yer değiştirmesini sağlar.

Bu yaklaşım, daraltılabilir paneller, SSS ögeleri veya "daha fazlasını göster" bölümleri için idealdir.

@Composable
fun Details(expanded: Boolean) {
    AnimatedVisibility(
        visible = expanded,
        enter = expandVertically() + fadeIn(),
        exit = shrinkVertically() + fadeOut()
    ) {
        Text("Extra details revealed when expanded.")
    }
}

updateTransition: Tek Durum, Birçok Değer

Bir duruma bağlı olarak birkaç özellik birlikte değişmeliyse updateTransition bunları eşgüdümlü hâle getirir. Alt ögeleri eş zamanlı canlanan bir Transition nesnesi oluşturur.

Durumu tanımlayın; ardından her özellik için bu duruma bağlı bir işlev olarak animateColor, animateDp vb. kullanın.

enum class BoxState { Collapsed, Expanded }

@Composable
fun MorphingBox(state: BoxState) {
    val transition = updateTransition(state, label = "box")
    val size by transition.animateDp(label = "size") {
        if (it == BoxState.Expanded) 200.dp else 100.dp
    }
    val color by transition.animateColor(label = "color") {
        if (it == BoxState.Expanded) Color.Magenta else Color.Cyan
    }
    Box(Modifier.size(size).background(color))
}

Bir Geçişte Özellik Başına Zamanlama

updateTransition kullanmanın önemli bir avantajı, özellik başına zamanlamadır. Her animate* alt ögesi kendi transitionSpec değerini sağlayabilir; böylece renk ve boyut, aynı durum tarafından eşgüdümlü tutulurken farklı hızlarda hareket edebilir.

val size by transition.animateDp(
    transitionSpec = { tween(durationMillis = 300) },
    label = "size"
) { if (it == BoxState.Expanded) 200.dp else 100.dp }

val corner by transition.animateDp(
    transitionSpec = { tween(durationMillis = 600) },
    label = "corner"
) { if (it == BoxState.Expanded) 0.dp else 24.dp }

AnimatedContent: İçerik Değiştirme

Yalnızca görünürlük değil, içeriğin kendisi değiştiğinde AnimatedContent kullanın. Eski ve yeni içerik arasında varsayılan olarak çapraz geçiş yapar.

Sayaç, adım göstergesi veya yükleniyor ve yüklendi durumları arasında geçiş gibi durumlar için idealdir.

@Composable
fun Counter(count: Int) {
    AnimatedContent(
        targetState = count,
        label = "counter"
    ) { value ->
        Text("$value", style = MaterialTheme.typography.headlineLarge)
    }
}

AnimatedContent Geçişlerini Özelleştirme

AnimatedContent bileşeninin içeriği nasıl değiştireceğini transitionSpec ile özelleştirin. Sayaçlar için klasik bir yaklaşım, yeni değeri yukarı kaydırırken eski değeri soluklaştırarak uzaklaştırmaktır.

using anahtar sözcüğü, kapsayıcının da akıcı biçimde yeniden boyutlanması için bir SizeTransform ekler.

AnimatedContent(
    targetState = count,
    transitionSpec = {
        (slideInVertically { it } + fadeIn()) togetherWith
            (slideOutVertically { -it } + fadeOut())
    },
    label = "counter"
) { value -> Text("$value") }

Liste Ögelerini Canlandırma

Bir LazyColumn içinde eklenen, kaldırılan veya taşınan ögeler, her ögenin içeriğinde Modifier.animateItem() kullanılarak yerlerine girerken canlandırılabilir.

Bu, elle kayıt tutmaya gerek kalmadan yeniden sıralama ve ekleme işlemlerinin akıcı olmasını sağlar.

LazyColumn {
    items(tasks, key = { it.id }) { task ->
        Text(
            task.title,
            modifier = Modifier.animateItem()
        )
    }
}

Tüm Ekranlar İçin Çapraz Geçiş

Crossfade, iki durum arasında soluklaşarak geçiş yapan basit ve odaklı bir yardımcıdır; tüm ekranlar veya büyük kullanıcı arayüzü durumları arasında geçiş yapmak için idealdir.

Mevcut durumu ve bir içerik lambda'sını geçirin; durum değiştiğinde Crossfade eski içeriği soluklaştırarak gizler, yenisini ise görünür hâle getirir.

@Composable
fun ScreenHost(screen: Screen) {
    Crossfade(targetState = screen, label = "screen") { current ->
        when (current) {
            Screen.Home -> HomeScreen()
            Screen.Profile -> ProfileScreen()
        }
    }
}

Giriş Yapan Alt Ögeleri Eşgüdümleme

Bir AnimatedVisibility bloğunun içinde, Modifier.animateEnterExit() sağlayan bir AnimatedVisibilityScope elde edersiniz. Bu sayede tek tek alt ögeler, üst ögenin geçişine ek olarak kendi giriş/çıkış animasyonlarıyla canlanabilir.

Örneğin bir panel içeri kayarken başlığı, katmanlı bir etki oluşturmak için biraz daha geç görünür hâle gelebilir.

AnimatedVisibility(visible = show, enter = slideInVertically()) {
    Column {
        Text(
            "Title",
            modifier = Modifier.animateEnterExit(
                enter = fadeIn(tween(delayMillis = 100))
            )
        )
        Text("Body")
    }
}

Kısa Bir Kontrol

3 sayısından 4 sayısına geçişi canlandırmak, yeni değeri soluklaştırarak ve kaydırarak içeri getirmek istiyorsunuz. Hangi API en uygundur?

Özet: Görünürlük ve Geçişler

Artık içeriğin görünmesini, kaybolmasını ve değişmesini canlandırabilirsiniz:

AnimatedVisibility, fadeIn/Out, slideIn/Out ve expand/shrink ile giriş/çıkışı canlandırır; bunlar + ile birleştirilebilir.
updateTransition, tek bir durumdan türeyen birçok değeri, her biri kendi özelliğine sahip olacak şekilde eşgüdümler.
AnimatedContent, farklı içerikler arasındaki değişimleri canlandırır; Crossfade basit soluklaşma varyantıdır.
Modifier.animateItem(), listeye eklemeleri ve yeniden sıralamayı canlandırır.

Sırada: doğal ve etkileşimli hareket için hareketler ve fiziğe dayalı yay animasyonları var.

Sıkça Sorulan Sorular

“AnimatedVisibility ve Geçişler” dersi ücretsiz mi?

Evet — “AnimatedVisibility ve Geçişler” 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.

“AnimatedVisibility ve Geçişler” dersinde ne öğreneceğim?

İçeriğin gösterilmesini ve gizlenmesini 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 3. dersidir.

“AnimatedVisibility ve Geçişler” 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