Android Academy · Ders

Animasyonlar Neden Önemlidir

Kullanıcıları yönlendiren ve memnun eden hareketler.

Animasyonlar Neden Önemlidir, CoddyKit'te ücretsiz bir Android Academy dersidir. Bu, 4 dersinin 1. 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.

Amaçlı Hareket

Animasyonlar yalnızca görsel süs değildir. İyi bir Android uygulamasında hareket, dikkati yönlendirir, neyin değiştiğini açıklar ve kullanıcı arayüzünün duyarlı ve canlı hissettirmesini sağlar.

Bu kursta Jetpack Compose'un animasyon API'lerini; tek satırlık animate*AsState yardımcılarından AnimatedVisibility, geçişler ve fizik tabanlı yaylara kadar öğreneceksiniz.

Bu ilk ders, hareketinizin her zaman bir amaca hizmet etmesi için animasyonun neden ve ne zaman kullanılacağı hakkındadır.

Compose Bildirimsel Olarak Animasyon Uygular

Compose'ta animasyonları kare kare elle başlatıp durdurmazsınız. Bunun yerine bir hedef değer tanımlarsınız ve Compose, bu değer her değiştiğinde hedefe doğru yumuşak bir animasyon uygular.

Burada bir kutunun rengi tek bir boolean durum tarafından yönetilir. Duruma dokunulduğunda durum tersine çevrilir ve renk otomatik olarak geçiş yapar.

@Composable
fun ColorBox() {
    var selected by remember { mutableStateOf(false) }
    val color by animateColorAsState(
        targetValue = if (selected) Color.Green else Color.Gray,
        label = "box-color"
    )
    Box(
        Modifier
            .size(120.dp)
            .background(color)
            .clickable { selected = !selected }
    )
}

Kullanıcı Eylemleri İçin Geri Bildirim

Hareketin en önemli görevlerinden biri geri bildirim sağlamaktır. Kullanıcı bir düğmeye dokunduğunda veya bir anahtarı değiştirdiğinde küçük bir animasyon, uygulamanın eylemi aldığını doğrular.

Anlık ve sarsıcı değişiklikler uygulamayı bozuk hissettirir; 150-300 ms'lik hızlı bir geçiş ise özenli bir his verir. Burada düğmeye basıldığı sırada düğme biraz küçülür.

@Composable
fun PressableButton(onClick: () -> Unit) {
    var pressed by remember { mutableStateOf(false) }
    val scale by animateFloatAsState(
        targetValue = if (pressed) 0.92f else 1f,
        label = "press-scale"
    )
    Button(
        onClick = onClick,
        modifier = Modifier.graphicsLayer {
            scaleX = scale; scaleY = scale
        }
    ) { Text("Tap me") }
}

Durum Değişikliklerini Açıklama

Kullanıcı arayüzü değiştiğinde animasyon, kullanıcının az önce ne olduğunu anlamasına yardımcı olur. Belirerek ve kayarak gelen bir öğe "yeni" olarak algılanır; belirerek kaybolan bir öğe ise "kaldırıldı" anlamına gelir.

Hareket olmadığında içerik aniden görünebilir veya kaybolabilir; bu da kullanıcıların bir şeyin görünüp görünmediği, kaybolup kaybolmadığı ya da taşınıp taşınmadığı konusunda kafasını karıştırır.

@Composable
fun Banner(visible: Boolean) {
    AnimatedVisibility(
        visible = visible,
        enter = fadeIn() + slideInVertically(),
        exit = fadeOut() + slideOutVertically()
    ) {
        Text("Saved successfully!")
    }
}

Süreklilik ve Mekânsal Algı

Hareket sürekliliği korur. Bir kart genişlediğinde veya bir öğe yeni bir konuma taşındığında değişikliği animasyonlu hâle getirmek, kullanıcının mekân içindeki yönünü korumasını sağlar.

Compose, Modifier.animateContentSize() ile yerleşim değişikliklerine otomatik olarak animasyon uygulayabilir; böylece içerik değiştikçe kutu yumuşak bir şekilde büyür veya küçülür.

@Composable
fun ExpandableCard(expanded: Boolean) {
    Column(
        Modifier
            .fillMaxWidth()
            .animateContentSize()
            .padding(16.dp)
    ) {
        Text("Title", style = MaterialTheme.typography.titleMedium)
        if (expanded) {
            Text("Here is the longer body that appears when expanded.")
        }
    }
}

Süre ve Zamanlama Önemlidir

İyi animasyon hızlıdır. Çoğu kullanıcı arayüzü geçişi yaklaşık 150 ms ile 400 ms arasında tamamlanmalıdır. Çok yavaş olursa uygulama ağırlaşmış hissedilir; çok hızlı olursa hareket görünmez.

Compose, süreyi ve hızı tween ile bir easing eğrisi kullanarak ayarlamanıza olanak tanır. Easing, hızlanıp yavaşlayarak hareketin doğal hissettirmesini sağlar.

val offset by animateDpAsState(
    targetValue = if (open) 0.dp else 200.dp,
    animationSpec = tween(
        durationMillis = 300,
        easing = FastOutSlowInEasing
    ),
    label = "panel-offset"
)

Abartmayın

Animasyon güçlüdür; bu da onu aşırı kullanmayı kolaylaştırır. Fazla hareket dikkat dağıtır, kullanıcıları yavaşlatır ve hatta rahatsızlığa neden olabilir.

Genel kurallar:

Süslemek için değil, iletişim kurmak için animasyon kullanın.
Geçişleri kısa ve hafif tutun.
Ekrandaki her şeye aynı anda animasyon uygulamaktan kaçının.
Animasyon sırasında kullanıcının eylemde bulunmasını hiçbir zaman engellemeyin.

Erişilebilirliğe Saygı Gösterin

Bazı kullanıcılar, harekete duyarlılıkları nedeniyle sistem ayarlarında Animasyonları kaldır seçeneğini etkinleştirir. Özenli bir uygulama bu tercihe uyar.

Animasyonların sıfıra ölçeklenip ölçeklenmediğini okuyabilir ve gerekli olmayan hareketleri buna göre azaltabilir veya devre dışı bırakabilirsiniz.

@Composable
fun rememberReduceMotion(): Boolean {
    val context = LocalContext.current
    val scale = Settings.Global.getFloat(
        context.contentResolver,
        Settings.Global.ANIMATOR_DURATION_SCALE,
        1f
    )
    return scale == 0f
}

Compose Animasyon Araç Kutusu

Compose, katmanlı bir animasyon API'leri kümesi sunar. Bu kurs boyunca bunlarla tanışacaksınız:

animate*AsState - tek bir değeri (renk, boyut, kayan noktalı sayı) canlandırır.
AnimatedVisibility - görünmeyi ve kaybolmayı canlandırır.
updateTransition - birkaç değeri birlikte eşgüdümlü hâle getirir.
AnimatedContent - farklı içerikler arasında çapraz geçiş yapar.
Animatable ve spring - düşük seviyeli, fiziğe dayalı denetim sağlar.

Yüksek seviyeden başlayın; yalnızca daha fazla denetime ihtiyaç duyduğunuzda daha alt seviyelere inin.

Animasyon Durumu İzler

Her şeyi anlamanızı sağlayacak zihinsel model şudur: Compose'ta animasyonlar durumu izler. Bir değeri değiştirirsiniz ve bir animasyon API'si, her karede kullanıcı arayüzünü yeni değere doğru yumuşak biçimde ara değerler.

Bu, nadiren bir zaman çizelgesi yazacağınız anlamına gelir. "Bu özellik X'e eşit olmalı" dersiniz, Compose da aradaki kareleri sizin için oluşturur.

@Composable
fun FadingText(highlighted: Boolean) {
    val alpha by animateFloatAsState(
        targetValue = if (highlighted) 1f else 0.4f,
        label = "text-alpha"
    )
    Text(
        "Status",
        modifier = Modifier.graphicsLayer { this.alpha = alpha }
    )
}

Kısa Bir Saf Kotlin Isınması

Animasyonlar değerler arasında ara değerler oluşturur. Temelde bu yalnızca matematiktir: 0 ile 1 arasındaki t kesri, başlangıç ve bitiş değerlerini harmanlar. Bu fikir (doğrusal ara değerleme veya lerp), yazacağınız her animasyonun temelini oluşturur.

Bu küçük saf Kotlin kod parçacığı, Compose'un saniyede birçok kez uyguladığı kavramı gösterir.

fun lerp(start: Float, end: Float, t: Float): Float =
    start + (end - start) * t

fun main() {
    for (i in 0..4) {
        val t = i / 4f
        println("t=$t -> ${lerp(0f, 100f, t)}")
    }
}

Kısa Bir Kontrol

Jetpack Compose'ta animasyonlar için temel zihinsel model nedir?

Özet: Anlamlı Hareket

Artık animasyonun neden önemli olduğunu ve arkasındaki modeli biliyorsunuz:

Hareket geri bildirim sağlar, değişiklikleri açıklar ve sürekliliği korur.
Compose animasyonları bildirimsel yapıdadır ve durumu izler.
Geçişleri kısa (≈150-400 ms) ve amaçlı tutun; abartmayın.
Erişilebilirlik için hareketi azaltan kullanıcılara saygı gösterin.
Önce yüksek seviyeli API'lere başvurun: animate*AsState, AnimatedVisibility, geçişler ve yaylar.

Sırada: animate*AsState ailesiyle tekil değerleri canlandırmak var.

Sıkça Sorulan Sorular

“Animasyonlar Neden Önemlidir” dersi ücretsiz mi?

Evet — “Animasyonlar Neden Önemlidir” 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.

“Animasyonlar Neden Önemlidir” dersinde ne öğreneceğim?

Kullanıcıları yönlendiren ve memnun eden 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 1. dersidir.

“Animasyonlar Neden Önemlidir” 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