Android Academy · Pelajaran

Dasar-Dasar animate*AsState

Animasi nilai tunggal dengan mulus.

Dasar-Dasar animate*AsState adalah pelajaran Android Academy gratis di CoddyKit. Ini adalah pelajaran 2 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 Android Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Android Academy mencakup 4 pelajaran total.

Menganimasikan Satu Nilai

Cara paling sederhana untuk menganimasikan sesuatu di Compose adalah keluarga animate*AsState. Anda memberikan nilai target, lalu API ini mengembalikan State yang menganimasi nilai saat ini secara mulus menuju target setiap kali target berubah.

Tersedia varian untuk setiap tipe umum: animateFloatAsState, animateDpAsState, animateColorAsState, animateOffsetAsState, dan lainnya.

animateFloatAsState

animateFloatAsState menganimasikan satu Float. Salah satu penggunaan umumnya adalah opasitas (alfa). Saat visible berubah, alfa yang dikembalikan meluncur antara 0f dan 1f.

Perhatikan kata kunci by: kata kunci ini memungkinkan Anda membaca State<Float> yang dianimasikan secara langsung sebagai Float biasa.

@Composable
fun FadingLabel(visible: Boolean) {
    val alpha by animateFloatAsState(
        targetValue = if (visible) 1f else 0f,
        label = "alpha"
    )
    Text(
        "Hello",
        modifier = Modifier.graphicsLayer { this.alpha = alpha }
    )
}

animateDpAsState

Ukuran dan offset UI menggunakan Dp, jadi gunakan animateDpAsState untuk menganimasikan padding, ukuran, atau posisi.

Di sini, sebuah kotak membesar dari 80dp menjadi 160dp saat diubah. Karena kita memasukkan Dp yang dianimasikan ke dalam size(), ukuran kotak berubah secara mulus.

@Composable
fun GrowingBox(big: Boolean) {
    val size by animateDpAsState(
        targetValue = if (big) 160.dp else 80.dp,
        label = "size"
    )
    Box(
        Modifier
            .size(size)
            .background(Color.Blue)
    )
}

animateColorAsState

Untuk menganimasikan warna, gunakan animateColorAsState. API ini melakukan interpolasi dalam ruang warna sehingga transisi terlihat mulus dan alami, bukan berkedip melalui rona perantara yang aneh.

Di sini, titik status menganimasi perubahan antara merah dan hijau berdasarkan nilai boolean.

@Composable
fun StatusDot(online: Boolean) {
    val color by animateColorAsState(
        targetValue = if (online) Color(0xFF4CAF50) else Color(0xFFF44336),
        label = "status-color"
    )
    Box(
        Modifier
            .size(16.dp)
            .clip(CircleShape)
            .background(color)
    )
}

Menyesuaikan dengan animationSpec

Secara bawaan, pembantu ini menggunakan pegas yang lembut. Berikan animationSpec untuk mengatur waktu. Gunakan tween untuk durasi tetap dengan kurva easing.

Panel ini meluncur selama 400ms dengan kurva yang berakselerasi lalu melambat secara mulus.

@Composable
fun SlidingPanel(open: Boolean) {
    val offset by animateDpAsState(
        targetValue = if (open) 0.dp else 250.dp,
        animationSpec = tween(
            durationMillis = 400,
            easing = FastOutSlowInEasing
        ),
        label = "offset"
    )
    Box(Modifier.offset(x = offset)) { /* content */ }
}

Kurva Easing

Easing menentukan cara animasi berakselerasi dan melambat. Compose menyediakan beberapa pilihan:

LinearEasing - kecepatan konstan (terasa mekanis).
FastOutSlowInEasing - bawaan Material; awal cepat, akhir lembut.
LinearOutSlowInEasing - untuk elemen yang memasuki layar.
FastOutLinearInEasing - untuk elemen yang meninggalkan layar.

Memilih easing yang tepat membuat gerakan terasa disengaja, bukan seperti robot.

val progress by animateFloatAsState(
    targetValue = if (done) 1f else 0f,
    animationSpec = tween(500, easing = LinearOutSlowInEasing),
    label = "progress"
)

Spesifikasi Pegas

Alih-alih durasi tetap, Anda dapat menggunakan pegas, yang terasa alami dan seperti benda fisik. Pegas ditentukan oleh dampingRatio (seberapa memantul) dan stiffness (seberapa cepat).

Pegas sangat berguna karena dapat menyesuaikan diri dengan mulus, bahkan saat target berubah di tengah animasi.

val scale by animateFloatAsState(
    targetValue = if (active) 1.2f else 1f,
    animationSpec = spring(
        dampingRatio = Spring.DampingRatioMediumBouncy,
        stiffness = Spring.StiffnessLow
    ),
    label = "scale"
)

Merespons Penyelesaian

Terkadang Anda perlu melakukan sesuatu saat animasi selesai, misalnya menjalankan panggilan balik setelah suatu nilai mencapai targetnya. animate*AsState menyediakan finishedListener tepat untuk keperluan ini.

val alpha by animateFloatAsState(
    targetValue = if (gone) 0f else 1f,
    label = "alpha",
    finishedListener = { finalValue ->
        if (finalValue == 0f) onFullyHidden()
    }
)

Menganimasikan Beberapa Properti

Anda dapat menggabungkan beberapa pemanggilan animate*AsState untuk menganimasikan lebih dari satu properti sekaligus. Masing-masing melacak nilainya sendiri, dan secara bersama-sama menghasilkan efek yang lebih kaya.

Di sini, chip memperbesar skala sekaligus mengubah warna saat dipilih.

@Composable
fun SelectableChip(selected: Boolean, text: String) {
    val scale by animateFloatAsState(if (selected) 1.1f else 1f, label = "s")
    val bg by animateColorAsState(
        if (selected) Color(0xFF3F51B5) else Color.LightGray,
        label = "bg"
    )
    Box(
        Modifier
            .graphicsLayer { scaleX = scale; scaleY = scale }
            .clip(RoundedCornerShape(16.dp))
            .background(bg)
            .padding(horizontal = 12.dp, vertical = 6.dp)
    ) { Text(text) }
}

Pegas dalam Kotlin Murni

Untuk membangun intuisi tentang apa yang dilakukan spring, berikut simulasi kecil dengan Kotlin murni. Simulasi ini mendorong suatu nilai menuju target pada setiap langkah dengan sedikit redaman, mirip dengan cara pegas Compose bergerak menuju nilai target selama banyak bingkai.

fun main() {
    var value = 0f
    val target = 100f
    var velocity = 0f
    val stiffness = 0.1f
    val damping = 0.6f
    repeat(6) { step ->
        val force = (target - value) * stiffness
        velocity = (velocity + force) * damping
        value += velocity
        println("step $step -> ${"%.1f".format(value)}")
    }
}

Menganimasikan Int dan Offset

Keluarga ini tidak terbatas pada float dan warna. Gunakan animateIntAsState untuk nilai bilangan bulat seperti target jumlah lencana, dan animateOffsetAsState atau animateIntOffsetAsState untuk menganimasikan posisi 2D dalam satu pemanggilan.

Di sini, chip meluncur secara diagonal dengan menganimasikan IntOffset.

@Composable
fun SlidingChip(moved: Boolean) {
    val pos by animateIntOffsetAsState(
        targetValue = if (moved) IntOffset(120, 60) else IntOffset.Zero,
        label = "pos"
    )
    Box(
        Modifier
            .offset { pos }
            .size(40.dp)
            .background(Color.Magenta)
    )
}

Pemeriksaan Singkat

Anda ingin menganimasikan lebar kotak secara mulus, yang diukur dalam Dp, saat nilai boolean berubah. API mana yang paling sesuai?

Rangkuman: animate*AsState

Keluarga animate*AsState adalah pilihan utama Anda untuk menganimasikan satu nilai:

Pilih varian sesuai tipe: animateFloatAsState, animateDpAsState, animateColorAsState, dan sebagainya.
Tetapkan targetValue; hasilnya menganimasi perubahan menuju nilai tersebut.
Sesuaikan gerakan dengan animationSpec menggunakan tween + easing atau spring.
Gabungkan beberapa varian untuk menganimasikan beberapa properti secara bersamaan.
Gunakan finishedListener untuk merespons saat animasi selesai.

Berikutnya: menganimasikan kemunculan dan penghilangan konten dengan AnimatedVisibility dan transisi.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Dasar-Dasar animate*AsState” gratis?

Ya — teks lengkap “Dasar-Dasar animate*AsState” 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 4 pelajaran total.

Apa yang akan aku pelajari di “Dasar-Dasar animate*AsState”?

Animasi nilai tunggal dengan mulus. 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 2 dari 4.

Berapa lama pelajaran “Dasar-Dasar animate*AsState” 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

← Kembali ke Android Academy