Jetpack Compose Animation: Transition ve AnimatedVisibility

Jetpack Compose'da animasyon yapmak eski yöntemlere göre çok daha basit. Transition ve AnimatedVisibility, UI öğelerinin görünüp kaybolmasını ya da durumunu değiştirmesini pürüzsüz hale getiriyor.

Transition, bir durumdan diğerine geçişi kontrol eder. AnimatedVisibility ise bir composable'ın görünürlüğünü animasyonlu şekilde değiştirir. İkisi de aynı prensibi kullanır: durumu takip et, değiştiğinde animasyon yap.

Adım 1: AnimatedVisibility ile Temel Animasyon

Bir butona basınca bir text'in görünüp kaybolmasını sağlayalım.

1@Composable
2fun SimpleVisibilityAnimation() {
3var isVisible by remember { mutableStateOf(true) }
4
5Column(modifier = Modifier.padding(16.dp)) {
6Button(onClick = { isVisible =!isVisible }) {
7Text("Göster/Gizle")
8}
9
10AnimatedVisibility(visible = isVisible) {
11Text(
12"Bu metin animasyonlu görünüyor!",
13modifier = Modifier.padding(top = 16.dp)
14)
15}
16}
17}

Butona basınca text kaybolur ve görünür. Varsayılan olarak fade (solma) efekti uygulanır.

Adım 2: Giriş ve Çıkış Animasyonları Özelleştirme

Daha dinamik bir animasyon için enterTransition ve exitTransition parametrelerini kullan.

1AnimatedVisibility(
2visible = isVisible,
3enter = slideInVertically(initialOffsetY = { -40 }) + fadeIn(),
4exit = slideOutVertically(targetOffsetY = { -40 }) + fadeOut()
5) {
6Text("Yukarıdan kayıyor!")
7}

Burada text yukarıdan aşağıya kaymaya giriyor (slideInVertically), aynı zamanda solma efekti (fadeIn) uygulanıyor. Çıkışta tersi olur.

Adım 3: Transition ile Renk ve Boyut Değişimi

Daha karmaşık durumlar için Transition kullan. Mesela bir kartın durumuna göre rengi ve boyutu değişsin.

1@Composable
2fun CardTransitionExample() {
3var isExpanded by remember { mutableStateOf(false) }
4val transition = updateTransition(isExpanded, label = "card")
5
6val backgroundColor by transition.animateColor(label = "bg") { expanded ->
7if (expanded) Color.Blue else Color.Gray
8}
9
10val size by transition.animateDp(label = "size") { expanded ->
11if (expanded) 200.dp else 100.dp
12}
13
14Column(
15modifier = Modifier.fillMaxSize().padding(16.dp),
16horizontalAlignment = Alignment.CenterHorizontally
17) {
18Box(
19modifier = Modifier.size(size).background(backgroundColor).clickable { isExpanded =!isExpanded }
20)
21}
22}

Karta tıklandığında rengi gri'den mavi'ye değişir ve boyutu 100dp'den 200dp'ye büyür. Tüm değişim pürüzsüz animasyonla olur.

Pratik İpucu

Animasyon süresi varsayılan 300ms'dir. Özelleştirmek için animationSpec parametresini kullan: animateColor(animationSpec = tween(durationMillis = 500)). Daha hızlı ya da yavaş animasyonlar için süreyi ayarla.

Transition ve AnimatedVisibility birlikte kullanılabilir: AnimatedVisibility içinde Transition tanımla, böylece görünürlük değişirken renk ve boyut da değişebilir.