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 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ã

  • BreakIterator lặ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.
  • LaunchedEffect khở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 Text 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 được tạo hiệu ứng chuyển động theo từng ký tự.

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 là phần chính của mọi giao diện người dùng. Tìm hiểu các cách trình bày văn bản trong ứng dụng để 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 chúng.

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

Truy cập vào trang câu hỏi thường gặp của chúng tôi để tìm hiểu về các hướng dẫn nhanh hoặc liên hệ với chúng tôi để chia sẻ ý kiến của bạn.