Ảnh động trong Compose
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.
Xem cách tạo ảnh động cho các giá trị trạng thái, sử dụng hiệu ứng chuyển đổi, tạo ảnh động cho các thay đổi về chế độ hiển thị hoặc kích thước và hiệu ứng chuyển tiếp bằng cách sử dụng API ảnh động Compose.
Điểm chính
- API
animate*AsState
rất hữu ích để tạo ảnh động cho một giá trị duy nhất dựa trên thay đổi về trạng thái.
- Để tạo ảnh động cho nhiều giá trị cùng một lúc, hãy tạo hiệu ứng chuyển đổi bằng hàm
updateTransition
.
- Bạn có thể khai báo từng giá trị ảnh động bằng một hàm mở rộng trên đối tượng chuyển đổi.
- Để tuỳ chỉnh hành vi của ảnh động, hãy chỉ định tham số
transitionSpec
.
AnimatedVisibility
rất hữu ích trong việc tạo ảnh động cho sự xuất hiện và biến mất.
- Tuỳ chỉnh hành vi ảnh động bằng cách chỉ định các tham số cho trạng thái vào và thoát.
- Để tạo ảnh động thay đổi kích thước của các phần tử, hãy sử dụng đối tượng sửa đổi
animateContentSize
.
- Để tạo ảnh động cho các thay đổi khi bạn hoán đổi các phần của giao diện người dùng, hãy sử dụng thành phần kết hợp
Crossfade
.
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:
Kiến thức cơ bản về Compose
Loạt video này giới thiệu nhiều API Compose, giúp bạn nhanh chóng nắm được các API có sẵn và cách sử dụng các API đó.
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,["# Animation in Compose\n\n\u003cbr /\u003e\n\nSee how to animate state values, using transitions, animating visibility or size\nchanges and crossfades by using the Compose animation APIs. \n\nKey points\n----------\n\n- The [`animate*AsState`](/reference/kotlin/androidx/compose/animation/core/package-summary#animateDpAsState(androidx.compose.ui.unit.Dp,androidx.compose.animation.core.AnimationSpec,kotlin.String,kotlin.Function1)) API is useful for animating a single value based on a state change.\n- To animate multiple values at the same time, create a transition with the [`updateTransition`](/reference/kotlin/androidx/compose/animation/core/package-summary#updateTransition(kotlin.Any,kotlin.String)) function.\n - You can declare each animation value with an extension function on the transition object.\n- To customize the animation behavior, specify the `transitionSpec` parameter.\n- [`AnimatedVisibility`](/reference/kotlin/androidx/compose/animation/package-summary#(androidx.compose.animation.core.Transition).AnimatedVisibility(kotlin.Function1,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.Function1)) is useful for animating appearance and disappearance.\n- Customize animation behavior by specifying parameters for enter and exit.\n- To animate size changes of elements, use the [`animateContentSize`](/reference/kotlin/androidx/compose/animation/package-summary#(androidx.compose.ui.Modifier).animateContentSize(androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Function2)) modifier.\n- To animate changes when you swap out portions of your UI, use the [`Crossfade`](/reference/kotlin/androidx/compose/animation/package-summary#(androidx.compose.animation.core.Transition).Crossfade(androidx.compose.ui.Modifier,androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Function1,kotlin.Function1)) composable.\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### Compose basics\n\nThis series of videos introduces various Compose APIs, quickly showing you what's available and how to use them. \n[Quick guide collection](/develop/ui/compose/quick-guides/collections/compose-basics) \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)"]]