Bạn có thể tạo ảnh động, từng ký tự một, cho giao diện văn bản, để văn bản trông giống như hiệu ứng nhập trực tuyến, tương tự như hiệu ứng mà máy đánh chữ tạo ra.
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
Tạo hiệu ứng động cho văn bản theo từng ký tự
Mã này tạo ảnh động cho văn bản theo từng ký tự. Thành phần này theo dõi một chỉ mục để kiểm soát lượng văn bản được hiển thị. Văn bản hiển thị sẽ tự động cập nhật để chỉ hiển thị các ký tự cho đến chỉ mục hiện tại. Cuối cùng, biến này sẽ chạy ảnh động khi thay đổi.
@Composable private fun AnimatedText() { val text = "This text animates as though it is being typed \uD83E\uDDDE\u200D♀\uFE0F \uD83D\uDD10 \uD83D\uDC69\u200D❤\uFE0F\u200D\uD83D\uDC68 \uD83D\uDC74\uD83C\uDFFD" // Use BreakIterator as it correctly iterates over characters regardless of how they are // stored, for example, some emojis are made up of multiple characters. // You don't want to break up an emoji as it animates, so using BreakIterator will ensure // this is correctly handled! val breakIterator = remember(text) { BreakIterator.getCharacterInstance() } // Define how many milliseconds between each character should pause for. This will create the // illusion of an animation, as we delay the job after each character is iterated on. val typingDelayInMs = 50L var substringText by remember { mutableStateOf("") } LaunchedEffect(text) { // Initial start delay of the typing animation delay(1000) breakIterator.text = StringCharacterIterator(text) var nextIndex = breakIterator.next() // Iterate over the string, by index boundary while (nextIndex != BreakIterator.DONE) { substringText = text.subSequence(0, nextIndex).toString() // Go to the next logical character boundary nextIndex = breakIterator.next() delay(typingDelayInMs) } } Text(substringText)
Các điểm chính về mã
BreakIterator
lặp lại chính xác các ký tự bất kể cách lưu trữ các ký tự đó. Ví dụ: biểu tượng cảm xúc động được tạo thành từ nhiều ký tự;BreakIterator
đảm bảo rằng chúng được xử lý dưới dạng một ký tự duy nhất để ảnh động không bị hỏng.LaunchedEffect
bắt đầu một coroutine để tạo độ trễ giữa các ký tự. Bạn có thể thay thế khối mã bằng trình nghe nhấp chuột hoặc bất kỳ sự kiện nào khác để kích hoạt ảnh động.- Thành phần kết hợp
Text
sẽ kết xuất lại mỗi khi giá trị củasubstringText
được cập nhật.
Kết quả
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:
![](https://developer.android.com/static/images/quick-guides/collection-illustration.png?hl=vi)
Văn bản hiển thị
![](https://developer.android.com/static/images/quick-guides/collection-illustration.png?hl=vi)