Sử dụng bộ sưu tập để sắp xếp ngăn nắp các trang
Lưu và phân loại nội dung dựa trên lựa chọn ưu tiên của bạn.
Bạn có thể tạo trải nghiệm người dùng tương tác và hấp dẫn hơn trong ứng dụng bằng cách tải tệp có thể vẽ để hiển thị hình ảnh động. Hình ảnh động rất hữu ích trong việc tạo chỉ báo tải, chỉ báo thành công hoặc lỗi, hỗ trợ phát triển trò chơi và nhiều chức năng khác trên giao diện người dùng.
Khả năng tương thích của phiên bản
Phương thức triển khai này yêu cầu bạn phải đặt minSDK của dự án thành API cấp 21 trở lên.
Phần phụ thuộc
Hiển thị hình ảnh động
Mã sau đây hiển thị một vectơ ảnh động tự động bật/tắt giữa hai trạng thái:
Tải tài nguyên vectơ, tạo ảnh động cho các thuộc tính bản vẽ theo thời gian.
Một thực thể Image sử dụng thực thể Painter để thực hiện ảnh động, được tạo từ trạng thái AnimatedImageVector và boolean bằng hàm rememberAnimatedVectorPainter().
Khi atEnd là true, thực thể Painter sẽ ngừng tạo ảnh động.
Kết quả
Hình 1. Vectơ ảnh động có thể vẽ trong Compose.
Các bộ sưu tập chứa hướng dẫn này
Hướng dẫn này là một phần của các bộ sưu tập Hướng dẫn nhanh được tuyển chọn này, bao gồm các mục tiêu phát triển Android rộng hơn:
Hiển thị hình ảnh
Khám phá các kỹ thuật sử dụng hình ảnh tươi sáng, bắt mắt để mang lại giao diện đẹp mắt cho ứng dụng Android.
Nội dung và mã mẫu trên trang này phải tuân thủ các giấy phép như mô tả trong phần Giấy phép nội dung. Java và OpenJDK là nhãn hiệu hoặc nhãn hiệu đã đăng ký của Oracle và/hoặc đơn vị liên kết của Oracle.
Cập nhật lần gần đây nhất: 2025-02-06 UTC.
[[["Dễ hiểu","easyToUnderstand","thumb-up"],["Giúp tôi giải quyết được vấn đề","solvedMyProblem","thumb-up"],["Khác","otherUp","thumb-up"]],[["Thiếu thông tin tôi cần","missingTheInformationINeed","thumb-down"],["Quá phức tạp/quá nhiều bước","tooComplicatedTooManySteps","thumb-down"],["Đã lỗi thời","outOfDate","thumb-down"],["Vấn đề về bản dịch","translationIssue","thumb-down"],["Vấn đề về mẫu/mã","samplesCodeIssue","thumb-down"],["Khác","otherDown","thumb-down"]],["Cập nhật lần gần đây nhất: 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)"]]