Tetap teratur dengan koleksi
Simpan dan kategorikan konten berdasarkan preferensi Anda.
Anda dapat membuat pengalaman pengguna yang lebih interaktif dan menarik di aplikasi dengan
memuat file drawable untuk menampilkan gambar animasi. Gambar animasi berguna
untuk membuat indikator pemuatan, indikator keberhasilan atau error, memfasilitasi pengembangan
game, dan berbagai fungsi UI lainnya.
Kompatibilitas versi
Implementasi ini mengharuskan minSDK project Anda ditetapkan ke API level 21 atau
yang lebih tinggi.
Dependensi
Menampilkan gambar animasi
Kode berikut menampilkan vektor animasi yang secara otomatis beralih
antara dua status:
Memuat resource vektor, menganimasikan atribut gambar dari waktu ke waktu.
Instance Image yang menggunakan instance Painter untuk melakukan
animasi, yang dibuat dari status AnimatedImageVector dan boolean oleh
fungsi rememberAnimatedVectorPainter().
Jika atEnd adalah true, instance Painter akan berhenti dianimasikan.
Hasil
Gambar 1. Vektor drawable animasi di Compose.
Koleksi yang berisi panduan ini
Panduan ini adalah bagian dari koleksi Panduan Cepat pilihan yang membahas
sasaran pengembangan Android yang lebih luas:
Menampilkan gambar
Temukan teknik untuk menggunakan visual yang cerah dan menarik untuk
memberikan tampilan dan nuansa yang menarik pada aplikasi Android Anda.
Konten dan contoh kode di halaman ini tunduk kepada lisensi yang dijelaskan dalam Lisensi Konten. Java dan OpenJDK adalah merek dagang atau merek dagang terdaftar dari Oracle dan/atau afiliasinya.
Terakhir diperbarui pada 2025-02-06 UTC.
[[["Mudah dipahami","easyToUnderstand","thumb-up"],["Memecahkan masalah saya","solvedMyProblem","thumb-up"],["Lainnya","otherUp","thumb-up"]],[["Informasi yang saya butuhkan tidak ada","missingTheInformationINeed","thumb-down"],["Terlalu rumit/langkahnya terlalu banyak","tooComplicatedTooManySteps","thumb-down"],["Sudah usang","outOfDate","thumb-down"],["Masalah terjemahan","translationIssue","thumb-down"],["Masalah kode / contoh","samplesCodeIssue","thumb-down"],["Lainnya","otherDown","thumb-down"]],["Terakhir diperbarui pada 2025-02-06 UTC."],[],[],null,["# Display an animated image\n\n\u003cbr /\u003e\n\nYou can create a more interactive and engaging user experience in your app by\nloading a drawable file to display animated images. Animated images are useful\nfor creating loading indicators, success or error indicators, facilitating game\ndevelopment, and various other UI functions.\n\nVersion compatibility\n---------------------\n\nThis implementation requires that your project minSDK be set to API level 21 or\nhigher.\n\n### Dependencies\n\n### Kotlin\n\n\u003cbr /\u003e\n\n```kotlin\n implementation(platform(\"androidx.compose:compose-bom:2025.08.00\"))\n implementation(\"androidx.compose.animation:animation.graphics.android:1.6.3\")\n \n```\n\n\u003cbr /\u003e\n\n### Groovy\n\n\u003cbr /\u003e\n\n```groovy\n implementation platform('androidx.compose:compose-bom:2025.08.00')\n implementation 'androidx.compose.animation:animation.graphics.android:1.6.3'\n \n```\n\n\u003cbr /\u003e\n\nDisplay an animated image\n-------------------------\n\nThe following code displays an animated vector that automatically toggles\nbetween two states:\n\n\n```kotlin\n@Composable\nfun AnimatedVectorDrawable() {\n val image = AnimatedImageVector.animatedVectorResource(R.drawable.ic_hourglass_animated)\n var atEnd by remember { mutableStateOf(false) }\n Image(\n painter = rememberAnimatedVectorPainter(image, atEnd),\n contentDescription = \"Timer\",\n modifier = Modifier.clickable {\n atEnd = !atEnd\n },\n contentScale = ContentScale.Crop\n )\n}https://github.com/android/snippets/blob/dd30aee903e8c247786c064faab1a9ca8d10b46e/compose/snippets/src/main/java/com/example/compose/snippets/animations/AnimationSnippets.kt#L915-L927\n```\n\n\u003cbr /\u003e\n\n### Key points about the code\n\n- Loads a vector resource, animating the drawing attributes over time.\n- An `Image` instance that uses a [`Painter`](/reference/kotlin/androidx/compose/ui/graphics/painter/Painter) instance to perform the animation, created from the `AnimatedImageVector` and `boolean` state by the `rememberAnimatedVectorPainter()` function.\n- When `atEnd` is `true`, the `Painter` instance stops animating.\n\nResults\n-------\n\n**Figure 1.** Animated vector drawable in Compose.\n\nCollections that contain this guide\n-----------------------------------\n\nThis guide is part of these curated Quick Guide collections that cover\nbroader Android development goals: \n\n### Display images\n\nDiscover techniques for using bright, engaging visuals to give your Android app a beautiful look and feel. \n[Quick guide collection](/develop/ui/compose/quick-guides/collections/display-images) \n\nHave questions or feedback\n--------------------------\n\nGo to our frequently asked questions page and learn about quick guides or reach out and let us know your thoughts. \n[Go to FAQ](/quick-guides/faq) [Leave feedback](https://issuetracker.google.com/issues/new?component=1573691&template=1993320)"]]
