Bạn có thể tạo hiệu ứng động cho giao diện của văn bản theo từng ký tự, để văn bản trông giống như hiệu ứng gõ 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 giữa các phiên bản
Việc triển khai này yêu cầu bạn đặ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 chuyển động cho văn bản theo từng ký tự
Mã này tạo hiệu ứ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ẽ cập nhật linh động để chỉ hiện 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ã
BreakIteratorlặp lại chính xác các ký tự bất kể chúng được lưu trữ như thế nào. Ví dụ: biểu tượng cảm xúc dạng ảnh động được tạo thành từ nhiều ký tự;BreakIteratorđảm bảo rằng các biểu tượng cảm xúc đó được xử lý dưới dạng một ký tự duy nhất, để ảnh động không bị gián đoạn.LaunchedEffectkhởi động một coroutine để tạo độ trễ giữa các ký tự. Bạn có thể thay thế khối mã bằng một trình nghe sự kiện nhấp (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
Textkết xuất lại mỗi khi giá trị củasubstringTextđược cập nhật.
Kết quả
Bộ sưu tập có 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, bao gồm các mục tiêu phát triển Android rộng hơn:
Văn bản hiển thị