Android Academy · Pelajaran

Animasi Gerak Isyarat dan Spring

Pergerakan semula jadi berasaskan fizik.

Pelajaran 4 daripada 413 langkah

Animasi Gerak Isyarat dan Spring ialah pelajaran Android Academy percuma di CoddyKit. Ini ialah pelajaran 4 daripada 4. 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 4 pelajaran.

Gerakan Interaktif dan Fizikal

Animasi yang paling mengasyikkan memberikan respons kepada jari pengguna dan terasa seperti objek sebenar, dengan momentum serta lantunan. Untuk membinanya, anda menggabungkan gerak isyarat dengan animasi berasaskan fizik.

Pelajaran ini merangkumi Animatable, spring, pereputan lontaran dan penyambungannya kepada gerak isyarat seret untuk UI yang semula jadi dan interaktif.

Animatable: Kawalan Tahap Rendah

Walaupun animate*AsState memberikan respons terhadap keadaan, Animatable memberikan anda kawalan imperatif. Anda menyimpan satu dalam remember dan menggerakkannya daripada coroutine dengan panggilan seperti animateTo atau snapTo.

Inilah asas bagi gerakan yang dipacu oleh gerak isyarat.

@Composable
fun BounceOnClick() {
    val scale = remember { Animatable(1f) }
    val scope = rememberCoroutineScope()
    Box(
        Modifier
            .graphicsLayer { scaleX = scale.value; scaleY = scale.value }
            .clickable {
                scope.launch {
                    scale.animateTo(1.3f, spring())
                    scale.animateTo(1f, spring())
                }
            }
    )
}

Spring: dampingRatio & stiffness

Spesifikasi spring ditakrifkan oleh dua nilai:

dampingRatio - tahap lantunan. Nilai lebih rendah menghasilkan lebih banyak lantunan; 1f (teredam secara kritikal) tidak terlebih sasaran.
stiffness - kelajuan. Nilai lebih tinggi mencapai sasaran dengan lebih cepat.

Compose menyediakan pemalar seperti Spring.DampingRatioMediumBouncy dan Spring.StiffnessLow, jadi anda jarang perlu menggunakan nombor mentah.

val spec = spring<Float>(
    dampingRatio = Spring.DampingRatioLowBouncy,
    stiffness = Spring.StiffnessMedium
)

// later, inside a coroutine:
// offset.animateTo(targetValue = 0f, animationSpec = spec)

Mengesan Gerak Isyarat Seretan

Untuk menjadikan pergerakan interaktif, anda membaca input sentuhan. Modifier.pointerInput dengan detectDragGestures melaporkan perubahan jarak seretan apabila pengguna menggerakkan jarinya.

Anda mengumpulkan perubahan jarak tersebut ke dalam ofset dan menerapkannya pada komponen boleh gubah.

@Composable
fun Draggable() {
    var offsetX by remember { mutableStateOf(0f) }
    Box(
        Modifier
            .offset { IntOffset(offsetX.roundToInt(), 0) }
            .size(80.dp)
            .background(Color.Red)
            .pointerInput(Unit) {
                detectDragGestures { change, drag ->
                    change.consume()
                    offsetX += drag.x
                }
            }
    )
}

Kembali ke Kedudukan Asal dengan Spring

Gabungkan seretan dengan Animatable untuk menghasilkan kesan "kembali ke kedudukan asal". Semasa menyeret, anda menggunakan snapTo untuk menetapkan kedudukan jari serta-merta; apabila dilepaskan, anda menggunakan animateTo(0f) dengan spring supaya elemen melantun kembali ke kedudukan asal.

@Composable
fun SnapBack() {
    val offsetX = remember { Animatable(0f) }
    val scope = rememberCoroutineScope()
    Box(
        Modifier
            .offset { IntOffset(offsetX.value.roundToInt(), 0) }
            .size(80.dp)
            .background(Color.Blue)
            .pointerInput(Unit) {
                detectDragGestures(
                    onDrag = { change, drag ->
                        change.consume()
                        scope.launch { offsetX.snapTo(offsetX.value + drag.x) }
                    },
                    onDragEnd = {
                        scope.launch { offsetX.animateTo(0f, spring()) }
                    }
                )
            }
    )
}

Leret dengan Halaju

Gerakan leret sebenar terus bergerak selepas jari diangkat. Jejaki halaju dengan VelocityTracker, kemudian serahkannya kepada animateDecay supaya elemen bergerak perlahan-lahan hingga berhenti secara semula jadi menggunakan DecayAnimationSpec berasaskan geseran.

val decay = rememberSplineBasedDecay<Float>()

// on drag end, with measured velocity:
// scope.launch {
//     offsetX.animateDecay(
//         initialVelocity = velocity,
//         animationSpec = decay
//     )
// }

Leret untuk Menutup dengan Penambat

Untuk gerak isyarat leret dengan kedudukan rehat yang tetap, seperti leret untuk menutup, anchoredDraggable akan berhenti pada penambat yang ditakrifkan. Anda mengisytiharkan keadaan dan kedudukan pikselnya, kemudian Compose mengendalikan spring antara kedudukan tersebut.

enum class DragValue { Start, End }

val state = remember {
    AnchoredDraggableState(
        initialValue = DragValue.Start,
        anchors = DraggableAnchors {
            DragValue.Start at 0f
            DragValue.End at 300f
        }
    )
}

Animasi Tanpa Henti dan Berulang

Untuk pergerakan berterusan seperti titik berdenyut atau kilauan pemuatan, gunakan rememberInfiniteTransition dengan infiniteRepeatable. Tetapkan RepeatMode kepada Reverse untuk gerakan ulang-alik, atau Restart untuk mengulang dari awal.

@Composable
fun Pulse() {
    val transition = rememberInfiniteTransition(label = "pulse")
    val scale by transition.animateFloat(
        initialValue = 1f,
        targetValue = 1.2f,
        animationSpec = infiniteRepeatable(
            animation = tween(700),
            repeatMode = RepeatMode.Reverse
        ),
        label = "scale"
    )
    Box(Modifier.graphicsLayer { scaleX = scale; scaleY = scale })
}

Menggabungkan Gerak Isyarat dan Spring

Pola interaktif utama: seret untuk bergerak, lepaskan untuk menetap. Jejaki halaju semasa seretan, kemudian sama ada lakukan leretan pantas dengan animateDecay atau tetapkan kedudukan ke arah penambat dengan spring, bergantung pada jarak atau kelajuan.

Beginilah helaian bawah, karusel dan kad yang boleh ditutup terasa begitu semula jadi.

// pattern:
// 1) onDrag    -> animatable.snapTo(current + delta)
// 2) onDragEnd -> if (fast) animatable.animateDecay(velocity, decay)
//                 else      animatable.animateTo(nearestAnchor, spring())

Penetapan Spring dalam Kotlin Tulen

Untuk merasai cara spring menetap, berikut ialah gelung Kotlin tulen yang minimum. Gelung ini mengenakan daya pemulih ke arah sasaran dan meredam halaju pada setiap langkah, iaitu idea yang sama seperti yang dijalankan oleh Compose pada setiap bingkai.

fun main() {
    var pos = 0f
    var vel = 0f
    val target = 200f
    val stiffness = 0.2f
    val damping = 0.75f
    repeat(8) { step ->
        vel = (vel + (target - pos) * stiffness) * damping
        pos += vel
        println("step $step pos=${"%.1f".format(pos)}")
    }
}

Ketik, Tekan dan Pelbagai Gerak Isyarat

Seretan bukan satu-satunya gerak isyarat. pointerInput juga menawarkan detectTapGestures untuk ketikan, ketikan dua kali dan tekanan lama, serta detectTransformGestures untuk zum cubit dan putaran.

Di sini, tekanan lama mencetuskan skala spring, dengan menggabungkan pengesanan gerak isyarat bersama Animatable.

@Composable
fun LongPressScale() {
    val scale = remember { Animatable(1f) }
    val scope = rememberCoroutineScope()
    Box(
        Modifier
            .graphicsLayer { scaleX = scale.value; scaleY = scale.value }
            .pointerInput(Unit) {
                detectTapGestures(
                    onLongPress = {
                        scope.launch { scale.animateTo(1.4f, spring()) }
                    },
                    onPress = {
                        tryAwaitRelease()
                        scope.launch { scale.animateTo(1f, spring()) }
                    }
                )
            }
    )
}

Semakan Pantas

Anda sedang membina kad yang boleh diseret dan sepatutnya melantun kembali ke asal apabila dilepaskan. Gabungan manakah yang merupakan pilihan Compose yang lazim?

Jawab dalam pelajaran interaktif

Ulang Kaji: Gerak Isyarat dan Spring

Anda kini boleh membina pergerakan interaktif yang semula jadi:

Animatable memberikan kawalan imperatif dipacu rutin korutin melalui animateTo / snapTo.
spring dilaraskan dengan dampingRatio (lantunan) dan stiffness (kelajuan).
pointerInput + detectDragGestures menukar sentuhan kepada pergerakan; animateDecay menambah leretan pantas.
anchoredDraggable berhenti pada kedudukan tetap untuk interaksi leret.
rememberInfiniteTransition menggerakkan kesan berulang seperti denyutan dan kilauan.

Dengan ini, bahagian Animasi dalam Jetpack Compose selesai. Anda kini boleh menganimasikan nilai, keterlihatan, kandungan dan gerak isyarat dengan yakin.

Percuma untuk bermula

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

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “Animasi Gerak Isyarat dan Spring” percuma?

Ya — sebanyak 3 pelajaran dalam laluan pembelajaran Android Academy, termasuk “Animasi Gerak Isyarat dan Spring”, 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 4 pelajaran.

Apakah yang akan saya pelajari dalam “Animasi Gerak Isyarat dan Spring”?

Pergerakan semula jadi berasaskan fizik. 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 4.

Berapa lamakah pelajaran “Animasi Gerak Isyarat dan Spring” 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

← Kembali ke Android Academy