Android Academy · Ders

Animasyonlar ve Geçişler

Görünümleri ViewPropertyAnimator, ObjectAnimator ve AnimatorSet ile canlandırın. Fragment geçişleri, paylaşılan öğe animasyonları ve yay fiziği ekleyin.

Animasyonlar ve Geçişler, CoddyKit'te ücretsiz bir Android Academy dersidir. Bu, 5 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 5 dersten oluşur.

Animasyonlar Neden Önemlidir?

Animasyonlar, uygulamaların canlı ve duyarlı hissettirmesini sağlar. Şunları yapar:

Kullanıcı eylemleri için görsel geri bildirim sağlar
Ekranların birbiriyle ilişkisini gösterir
Veri değişikliklerinin daha yumuşak algılanmasını sağlar
Kullanıcıların neyin ve neden değiştiğini anlamasına yardımcı olur

Temel kural: Animasyonlar kullanıcı arayüzüne hizmet etmeli, dikkati ondan uzaklaştırmamalıdır. Animasyonları 300 ms'nin altında tutun.

ViewPropertyAnimator — Hızlı Animasyonlar

Bir görünümü canlandırmanın en basit yoludur. Çağrıları zincirleyin ve start() çağrısını yapın:

// Fade a view out:
binding.tvMessage
    .animate()
    .alpha(0f)
    .setDuration(300)
    .withEndAction { binding.tvMessage.visibility = View.GONE }
    .start()

// Slide in from bottom:
binding.cardView.translationY = 200f
binding.cardView.alpha = 0f
binding.cardView
    .animate()
    .translationY(0f)
    .alpha(1f)
    .setDuration(250)
    .setInterpolator(DecelerateInterpolator())
    .start()

ObjectAnimator

ObjectAnimator, herhangi bir nesnenin herhangi bir özelliğini adına göre canlandırır. ViewPropertyAnimator'dan daha esnektir:

// Rotate an image:
val rotateAnimator = ObjectAnimator.ofFloat(
    binding.ivLogo,
    "rotation",
    0f, 360f
).apply {
    duration = 600
    repeatCount = ObjectAnimator.INFINITE
    interpolator = LinearInterpolator()
    start()
}

// Stop it:
rotateAnimator.cancel()

AnimatorSet — Sıralı ve Paralel

AnimatorSet, birden fazla animatörün birlikte veya art arda çalışmasını düzenler:

val fadeIn  = ObjectAnimator.ofFloat(binding.card, "alpha", 0f, 1f).setDuration(300)
val scaleX  = ObjectAnimator.ofFloat(binding.card, "scaleX", 0.8f, 1f).setDuration(300)
val scaleY  = ObjectAnimator.ofFloat(binding.card, "scaleY", 0.8f, 1f).setDuration(300)
val slideUp = ObjectAnimator.ofFloat(binding.card, "translationY", 100f, 0f).setDuration(300)

AnimatorSet().apply {
    // Run fadeIn + scaleX + scaleY together, then slideUp
    play(fadeIn).with(scaleX).with(scaleY)
    play(slideUp).after(fadeIn)
    interpolator = DecelerateInterpolator()
    start()
}

Enterpolatörler

Enterpolatörler, bir animasyondaki değişim hızını kontrol eder. Yaygın olanlar:

LinearInterpolator — sabit hız
AccelerateInterpolator — yavaş başlar, hızlanır (çıkışlar)
DecelerateInterpolator — hızlı başlar, yavaşlar (girişler)
AccelerateDecelerateInterpolator — yavaş → hızlı → yavaş (varsayılan)
OvershootInterpolator — hedefi aşar ve geri seker
BounceInterpolator — sonunda seker

TransitionManager — Yerleşim Değişiklikleri

Görünürlük veya yerleşim niteliklerini değiştirmeden önce TransitionManager.beginDelayedTransition() çağırarak yerleşim değişikliklerini otomatik olarak canlandırın:

binding.btnToggle.setOnClickListener {
    // Tell the framework to animate the next layout change
    TransitionManager.beginDelayedTransition(
        binding.root,
        ChangeBounds().apply { duration = 300 }
    )

    // Now change visibility/size — Android animates the difference automatically
    binding.expandedSection.visibility =
        if (binding.expandedSection.isVisible) View.GONE else View.VISIBLE
}

Fragment Geçişleri

Fragment işlemlerine giriş ve çıkış animasyonları ekleyin:

supportFragmentManager.beginTransaction()
    .setCustomAnimations(
        R.anim.slide_in_right,   // enterAnim
        R.anim.slide_out_left,   // exitAnim
        R.anim.slide_in_left,    // popEnterAnim
        R.anim.slide_out_right   // popExitAnim
    )
    .replace(R.id.container, DetailFragment())
    .addToBackStack(null)
    .commit()

// Or use MaterialSharedAxis for a modern, Material Motion feel:
val forward = MaterialSharedAxis(MaterialSharedAxis.X, true)
exitTransition = forward
enterTransition = MaterialSharedAxis(MaterialSharedAxis.X, true)

Paylaşılan Öğe Geçişleri

Bir görünümü iki ekran arasında paylaşarak bir konumdan diğerine canlandırılmasını sağlayın (ör. tam görüntüye genişleyen bir küçük resim):

// In ListFragment:
binding.ivThumbnail.transitionName = "hero_image_${item.id}"

val extras = FragmentNavigatorExtras(
    binding.ivThumbnail to "hero_image_${item.id}"
)
findNavController().navigate(R.id.action_list_to_detail, null, null, extras)

// In DetailFragment:
sharedElementEnterTransition = TransitionInflater
    .from(requireContext())
    .inflateTransition(android.R.transition.move)

// ImageView in detail layout must have the same transitionName

Yay Animasyonu

Yay animasyonları, fiziksel yay hareketini taklit ettikleri için doğrusal veya yavaşlayan animasyonlardan daha doğal hissettirir:

implementation 'androidx.dynamicanimation:dynamicanimation:1.0.0'

// Spring animation on a button press:
val spring = SpringAnimation(binding.fabAdd, DynamicAnimation.SCALE_X, 1f).apply {
    spring = SpringForce(1f).apply {
        stiffness = SpringForce.STIFFNESS_MEDIUM
        dampingRatio = SpringForce.DAMPING_RATIO_LOW_BOUNCY
    }
}

binding.fabAdd.setOnClickListener {
    binding.fabAdd.scaleX = 0.8f
    spring.start()
}

Lottie — Karmaşık Animasyonlar

Lottie, JSON olarak dışa aktarılan After Effects animasyonlarını oynatır. Yükleme göstergeleri, tanıtım akışları ve boş durumlar için idealdir:

// app/build.gradle:
// implementation 'com.airbnb.android:lottie:6.4.0'

<!-- In layout XML -->
<com.airbnb.lottie.LottieAnimationView
    android:id="@+id/lottieView"
    android:layout_width="200dp"
    android:layout_height="200dp"
    app:lottie_rawRes="@raw/loading_animation"
    app:lottie_autoPlay="true"
    app:lottie_loop="true" />

// Control in code:
binding.lottieView.playAnimation()
binding.lottieView.pauseAnimation()

Animasyonlar İçin En İyi Uygulamalar

Akıcı ve erişilebilir animasyonlar için yönergeler:

Çoğu kullanıcı arayüzü animasyonu için süreyi 150–300 ms olarak ayarlayın
Her zaman AnimatorUtils.areAnimatorsEnabled() veya Settings.System.ANIMATOR_DURATION_SCALE ayarına uyun
Vestibüler bozukluğu olan kullanıcılar animasyonları devre dışı bırakabilir — Reduce Motion erişilebilirlik ayarını kontrol edin
Gerekmeyen şeyleri canlandırmayın — az, çoktur
Düşük donanımlı cihazlarda test edin (animasyonlar kare düşüşlerine neden olabilir)

Kısa Kontrol

Ekrana giren bir öğenin yavaşlayıp yerine oturuyormuş gibi hissettirmesi için hangi enterpolatör en uygundur?

Özet: Animasyonlar ve Geçişler

Uygulamanıza akıcı animasyonlarla hayat katın:

view.animate() — hızlı alfa, öteleme, ölçekleme ve döndürme
ObjectAnimator — herhangi bir özellik için ayrıntılı denetim
AnimatorSet — birden çok animatörü (with/after) birlikte düzenleme
TransitionManager.beginDelayedTransition() — yerleşim değişikliklerini otomatik olarak canlandırma
Paylaşılan öğe geçişleri — ekranlar arasında kesintisiz süreklilik
Lottie — After Effects'ten alınan karmaşık JSON animasyonları

Sırada: çok bölümlü uygulamalar için alt gezinme ve sekmeler.

Sıkça Sorulan Sorular

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

Evet — “Animasyonlar 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 5 dersten oluşur.

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

Görünümleri ViewPropertyAnimator, ObjectAnimator ve AnimatorSet ile canlandırın. Fragment geçişleri, paylaşılan öğe animasyonları ve yay fiziği ekleyin. 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, 5 dersinin 4. dersidir.

“Animasyonlar 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