Animasi & Peralihan
Animasikan view dengan ViewPropertyAnimator, ObjectAnimator dan AnimatorSet. Tambah peralihan fragment, animasi elemen dikongsi dan fizik spring.
Animasi & Peralihan ialah pelajaran Android Academy percuma di CoddyKit. Ini ialah pelajaran 4 daripada 5. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Android Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Android Academy merangkumi sejumlah 5 pelajaran.
Mengapa Animasi Penting
Animasi menjadikan aplikasi terasa hidup dan responsif. Animasi:
- Memberikan maklum balas visual untuk tindakan pengguna
- Menunjukkan hubungan antara skrin
- Menjadikan perubahan data kurang mengejutkan
- Membantu pengguna memahami perkara yang berubah dan sebabnya
Peraturan utama: animasi harus menyokong UI, bukan mengganggunya. Pastikan tempohnya kurang daripada 300ms.
ViewPropertyAnimator — Animasi Pantas
Cara paling mudah untuk menganimasikan paparan. Rantaikan panggilan 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 sebarang sifat bagi sebarang objek mengikut nama. Ia lebih fleksibel berbanding 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 — Berturutan & Selari
AnimatorSet menyelaraskan berbilang animator untuk berjalan bersama 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 mengawal kadar perubahan animasi. Antaranya yang biasa digunakan:
LinearInterpolator— kelajuan malarAccelerateInterpolator— bermula perlahan, kemudian semakin laju (keluar)DecelerateInterpolator— bermula laju, kemudian semakin perlahan (masuk)AccelerateDecelerateInterpolator— perlahan → laju → perlahan (lalai)OvershootInterpolator— melepasi sasaran dan melantun kembaliBounceInterpolator— melantun pada penghujung
TransitionManager — Perubahan Susun Atur
Animasikan perubahan susun atur secara automatik dengan memanggil TransitionManager.beginDelayedTransition() sebelum menukar keterlihatan atau sifat susun atur:
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
}Peralihan Fragment
Tambahkan animasi masuk/keluar pada 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)Peralihan Elemen Dikongsi
Kongsi satu paparan antara dua skrin supaya paparannya dianimasikan dari satu kedudukan ke kedudukan yang lain (contohnya, lakaran kecil yang dikembangkan menjadi imej 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 transitionNameAnimasi Spring
Animasi spring terasa lebih semula jadi berbanding animasi linear atau nyahpecutan kerana animasi ini mensimulasikan fizik spring:
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 memainkan animasi After Effects yang dieksport sebagai JSON. Sesuai untuk pemutar pemuatan, pengalaman pengenalan 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()Amalan Terbaik Animasi
Garis panduan untuk animasi yang lancar dan mudah dicapai:
- Tempoh 150–300ms untuk kebanyakan animasi UI
- Sentiasa hormati
AnimatorUtils.areAnimatorsEnabled()atauSettings.System.ANIMATOR_DURATION_SCALE - Pengguna yang mengalami gangguan vestibular mungkin melumpuhkan animasi — semak tetapan kebolehcapaian
Reduce Motion - Jangan animasikan perkara yang tidak memerlukannya — kurang itu lebih baik
- Uji pada peranti kelas rendah (animasi boleh menyebabkan bingkai tercicir)
Semakan Pantas
Interpolator manakah yang terbaik untuk elemen yang memasuki skrin supaya terasa seperti ia menyahpecut dan berhenti dengan lancar?
Imbas Kembali: Animasi & Peralihan
Berikan nyawa kepada aplikasi anda dengan animasi yang lancar:
view.animate()— alfa, terjemahan, skala dan putaran pantasObjectAnimator— sebarang sifat dengan kawalan terperinciAnimatorSet— menyelaraskan berbilang penganimasi (dengan/selepas)TransitionManager.beginDelayedTransition()— menganimasikan perubahan reka letak secara automatik- Peralihan elemen dikongsi — kesinambungan lancar antara skrin
- Lottie — animasi JSON kompleks daripada After Effects
Seterusnya: Navigasi Bawah dan Tab untuk aplikasi berbilang bahagian.
Pelajari Kotlin dengan tutor kecerdasan buatan — percuma
Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.
- Kursus
- 36
- Pelajaran
- 152
Soalan Lazim
Adakah pelajaran “Animasi & Peralihan” percuma?
Ya — sebanyak 3 pelajaran dalam laluan pembelajaran Android Academy, termasuk “Animasi & Peralihan”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus Android Academy merangkumi sejumlah 5 pelajaran.
Apakah yang akan saya pelajari dalam “Animasi & Peralihan”?
Animasikan view dengan ViewPropertyAnimator, ObjectAnimator dan AnimatorSet. Tambah peralihan fragment, animasi elemen dikongsi dan fizik spring. Anda berlatih Android Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.
Adakah saya memerlukan pengalaman untuk memulakan Android Academy?
Tiada pengalaman terdahulu diperlukan. Pembelajaran Android Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 4 daripada 5.
Berapa lamakah pelajaran “Animasi & Peralihan” diambil?
Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.
Bolehkah saya menulis dan menjalankan kod dalam pelajaran Android Academy ini?
Ya. Setiap pelajaran Android Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.
Semua pelajaran dalam kursus ini
- Asas Material Design
- Tema & Gaya
- View Tersuai
- Animasi & Peralihan
- Navigasi Bawah & Tab