Android Academy · Pelajaran

Animasi & Transisi

Animasikan view dengan ViewPropertyAnimator, ObjectAnimator, dan AnimatorSet. Tambahkan transisi fragment, animasi elemen bersama, dan fisika pegas.

Pelajaran 4 dari 513 langkah

Animasi & Transisi adalah pelajaran Android Academy gratis di CoddyKit. Ini adalah pelajaran 4 dari 5. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Android Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Android Academy mencakup 5 pelajaran total.

Mengapa Animasi Penting

Animasi membuat aplikasi terasa hidup dan responsif. Animasi:

  • Memberikan umpan balik visual atas tindakan pengguna
  • Menunjukkan hubungan antarlayar
  • Membuat perubahan data terasa lebih halus
  • Membantu pengguna memahami apa yang berubah dan alasannya

Aturan utamanya: animasi harus mendukung UI, bukan mengalihkan perhatian. Pertahankan durasinya di bawah 300 md.

ViewPropertyAnimator — Animasi Cepat

Cara paling sederhana untuk menganimasikan tampilan. Rangkai pemanggilan dan panggil start():

// 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 menganimasikan properti apa pun dari objek apa pun berdasarkan nama. Lebih fleksibel daripada ViewPropertyAnimator:

// 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 — Berurutan & Paralel

AnimatorSet mengatur beberapa animator agar berjalan bersama-sama atau satu demi satu:

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()
}

Interpolator

Interpolator mengatur laju perubahan suatu animasi. Beberapa yang umum:

  • LinearInterpolator — kecepatan konstan
  • AccelerateInterpolator — mulai lambat, lalu semakin cepat (keluar)
  • DecelerateInterpolator — mulai cepat, lalu melambat (masuk)
  • AccelerateDecelerateInterpolator — lambat → cepat → lambat (bawaan)
  • OvershootInterpolator — melewati target lalu memantul kembali
  • BounceInterpolator — memantul di akhir

TransitionManager — Perubahan Tata Letak

Animasikan perubahan tata letak secara otomatis dengan memanggil TransitionManager.beginDelayedTransition() sebelum mengubah visibilitas atau properti tata letak:

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
}

Transisi Fragment

Tambahkan animasi masuk/keluar ke transaksi fragment:

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)

Transisi Elemen Bersama

Bagikan sebuah tampilan antara dua layar agar tampilannya dianimasikan dari satu posisi ke posisi lain (misalnya, gambar mini yang diperbesar menjadi gambar penuh):

// 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

Animasi Pegas

Animasi pegas terasa lebih alami daripada animasi linear atau perlambatan karena mensimulasikan fisika pegas:

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 — Animasi Kompleks

Lottie memutar animasi After Effects yang diekspor sebagai JSON. Cocok untuk indikator pemuatan, orientasi awal, dan keadaan kosong:

// 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()

Praktik Terbaik Animasi

Panduan untuk animasi yang halus dan mudah diakses:

  • Gunakan durasi 150–300 md untuk sebagian besar animasi UI
  • Selalu hormati AnimatorUtils.areAnimatorsEnabled() atau Settings.System.ANIMATOR_DURATION_SCALE
  • Pengguna dengan gangguan vestibular mungkin menonaktifkan animasi — periksa pengaturan aksesibilitas Reduce Motion
  • Jangan menganimasikan hal yang tidak memerlukannya — lebih sedikit lebih baik
  • Uji pada perangkat kelas bawah (animasi dapat menyebabkan frame terlewat)

Pemeriksaan Singkat

Interpolator mana yang paling tepat untuk elemen yang masuk ke layar agar terasa melambat dan berhenti dengan halus?

Ringkasan: Animasi & Transisi

Hidupkan aplikasi Anda dengan animasi yang mulus:

  • view.animate() — alpha, translasi, skala, dan rotasi dengan cepat
  • ObjectAnimator — properti apa pun dengan kontrol mendetail
  • AnimatorSet — mengatur beberapa animator (dengan/seusai)
  • TransitionManager.beginDelayedTransition() — menganimasikan perubahan tata letak secara otomatis
  • Transisi elemen bersama — kesinambungan antarlayar yang mulus
  • Lottie — animasi JSON kompleks dari After Effects

Berikutnya: Navigasi Bawah dan Tab untuk aplikasi dengan banyak bagian.

Gratis untuk memulai

Belajar Kotlin dengan tutor AI — gratis

Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.

Kursus
36
Pelajaran
152

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Animasi & Transisi” gratis?

Ya — teks lengkap “Animasi & Transisi” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Android Academy, upgrade ke CoddyKit PRO. Kursus Android Academy mencakup 5 pelajaran total.

Apa yang akan aku pelajari di “Animasi & Transisi”?

Animasikan view dengan ViewPropertyAnimator, ObjectAnimator, dan AnimatorSet. Tambahkan transisi fragment, animasi elemen bersama, dan fisika pegas. Kamu berlatih Android Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Android Academy?

Tidak diperlukan pengalaman sebelumnya. Android Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 4 dari 5.

Berapa lama pelajaran “Animasi & Transisi” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Android Academy ini?

Ya. Setiap pelajaran Android Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

  1. Dasar-Dasar Material Design
  2. Tema & Gaya
  3. View Kustom
  4. Animasi & Transisi
  5. Navigasi Bawah & Tab
← Kembali ke Android Academy