Animasi yang Digerakkan Gestur
Kendalikan gerakan dari seretan dan usapan.
Animasi yang Digerakkan Gestur adalah pelajaran Jetpack Compose Academy gratis di CoddyKit. Ini adalah pelajaran 4 dari 4. 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 Jetpack Compose Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Jetpack Compose Academy mencakup 4 pelajaran total.
Gerakan yang Anda Kendalikan dengan Sentuhan
Animasi yang digerakkan status berjalan sendiri, tetapi beberapa gerakan seharusnya mengikuti jari Anda. Animasi yang digerakkan gestur memungkinkan seretan dan usapan mengarahkan gerakan. ✨
Lacak Offset
Simpan posisi saat ini dalam status. Alat yang paling langsung adalah Animatable, yang menyimpan nilai dan dapat langsung berpindah maupun menganimasikan perpindahan ke nilai tersebut.
val offsetX = remember { Animatable(0f) }Baca Peristiwa Seret
Gunakan pointerInput dengan detectDragGestures untuk menerima setiap perubahan jarak seret saat pengguna menggerakkan jarinya melintasi elemen.
Modifier.pointerInput(Unit) { detectDragGestures { _, drag -> } }Ikuti Jari
Saat melakukan seretan, panggil snapTo untuk berpindah seketika ke posisi baru. Perpindahan seketika membuat elemen tetap menempel pada jari tanpa jeda.
scope.launch { offsetX.snapTo(offsetX.value + drag.x) }Terapkan Offset
Masukkan nilainya ke pengubah offset agar Composable berpindah secara fisik. Tampilan mengikuti setiap piksel seretan secara langsung.
Modifier.offset { IntOffset(offsetX.value.roundToInt(), 0) }Animasikan saat Dilepas
Saat jari diangkat, beralihlah dari perpindahan seketika ke animateTo agar elemen meluncur kembali ke posisi awal atau ke jangkar terdekat dengan mulus.
scope.launch { offsetX.animateTo(0f) }Bawa Momentumnya
Ambil kecepatan luncur dari onDragEnd dan teruskan ke animateDecay. Elemen akan terus meluncur setelah dilepas, seperti gerakan sentil sungguhan. 🌀
offsetX.animateDecay(velocity, exponentialDecay())Usap di antara Jangkar
Untuk fitur usap untuk menutup atau penggeser, gunakan titik berhenti tetap. anchoredDraggable menghubungkan gestur dengan titik jangkar yang ditentukan dan membuat elemen berhenti di antaranya.
Coroutine yang Menggerakkannya
Pembaruan Animatable adalah fungsi suspend, jadi jalankan dalam cakupan coroutine. Dapatkan salah satunya dengan rememberCoroutineScope di dalam Composable Anda.
val scope = rememberCoroutineScope()Dapat Disela sejak Awal
Karena gestur dan animasi menggunakan Animatable yang sama, sentuhan baru akan menyela animasi yang sedang berjalan dan langsung mengembalikan kendali kepada pengguna.
Sensasi Aplikasi Asli
Menggabungkan perpindahan seketika saat menyeret dengan peluruhan dan pegas saat dilepas adalah kunci gestur yang lancar, alami, responsif, dan terasa hidup.
Pemeriksaan Singkat
Pemanggilan Animatable apa yang membuat elemen tetap menempel pada sentuhan saat jari sedang menyeretnya?
Rangkuman: Sentuhan Bertemu Gerakan
Anda menggabungkan pointerInput dengan Animatable: gunakan snapTo saat menyeret, lalu animateTo atau animateDecay saat dilepas untuk menghasilkan gerakan yang lancar dan digerakkan gestur. 🎉
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
- 30
- Pelajaran
- 120
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Animasi yang Digerakkan Gestur” gratis?
Ya — teks lengkap “Animasi yang Digerakkan Gestur” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Jetpack Compose Academy, upgrade ke CoddyKit PRO. Kursus Jetpack Compose Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Animasi yang Digerakkan Gestur”?
Kendalikan gerakan dari seretan dan usapan. Kamu berlatih Jetpack Compose 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 Jetpack Compose Academy?
Tidak diperlukan pengalaman sebelumnya. Jetpack Compose 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 4.
Berapa lama pelajaran “Animasi yang Digerakkan Gestur” 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 Jetpack Compose Academy ini?
Ya. Setiap pelajaran Jetpack Compose 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
- animate*AsState untuk Tween Sederhana
- AnimatedVisibility & Crossfade
- updateTransition untuk Gerakan Terkoordinasi
- Animasi yang Digerakkan Gestur