Tạo hiệu ứng động cho giao diện văn bản theo từng ký tự

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ủa substringText được cập nhật.

Kết quả

Hình 1. Văn bản và biểu tượng cảm xúc động theo từng ký tự.

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:

Văn bản là phần chính của mọi giao diện người dùng. Tìm hiểu các cách khác nhau để trình bày văn bản trong ứng dụng nhằm mang lại trải nghiệm thú vị cho người dùng.
Loạt video này giới thiệu nhiều API Compose, nhanh chóng cho bạn biết những API có sẵn và cách sử dụng các API đó.

Bạn có câu hỏi hoặc ý kiến phản hồi

Hãy truy cập vào trang câu hỏi thường gặp để tìm hiểu về các hướng dẫn nhanh hoặc liên hệ với chúng tôi để cho chúng tôi biết suy nghĩ của bạn.