تحريك مظهر النص حرفًا تلو الآخر

يمكنك إضافة مؤثرات متحركة إلى مظهر النص حرفًا حرفًا، لكي يبدو مثل تأثير الكتابة المباشرة، على غرار ما قد تنتجه آلة كاتبة.

توافق الإصدار

يتطلّب هذا التنفيذ ضبط الحد الأدنى من إصدار حزمة SDK لمشروعك على المستوى 21 من واجهة برمجة التطبيقات أو إصدار أحدث.

التبعيات

تحريك النص حرفًا تلو الآخر

تُنشئ هذه التعليمات البرمجية صورة متحركة للنص حرفًا تلو الآخر. وتتتبّع هذه الميزة فهرسًا للتحكّم في مقدار النص الذي يتم عرضه. يتم تعديل النص المعروض بشكل ديناميكي لعرض الأحرف حتى الفهرس الحالي فقط. أخيرًا، يشغِّل المتغيّر المؤثرات المتحركة عند تغيُّره.

@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)

النقاط الرئيسية حول الرمز

  • يكرّر BreakIterator الأحرف بشكل صحيح بغض النظر عن كيفية تخزينها. على سبيل المثال، تتألّف الرموز التعبيرية المتحركة من أحرف متعددة، ويضمن الرمزBreakIterator التعامل معها كحرف واحد كي لا يتم إيقاف الحركة.
  • يبدأ LaunchedEffect دالة معالجة متزامنة لإضافة تأخير بين الأحرف. يمكنك استبدال مجموعة الرموز البرمجية بمراقب للنقرات أو أي حدث آخر لتشغيل الحركة.
  • تتم إعادة عرض العنصر القابل للتجميع Text في كل مرة يتم فيها تعديل قيمة substringText.

النتائج

الشكل 1. نص ورموز تعبيرية متحرّكة حرفًا تلو الآخر

المجموعات التي تتضمّن هذا الدليل

هذا الدليل هو جزء من مجموعات الأدلة السريعة المنظَّمة التي تتناول أهداف تطوير Android الأوسع نطاقًا:

يشكّل النص جزءًا أساسيًا من أي واجهة مستخدم. تعرَّف على الطرق المختلفة التي يمكنك من خلالها عرض النص في تطبيقك لتوفير تجربة رائعة للمستخدم.
تعرِض سلسلة الفيديوهات هذه واجهات برمجة التطبيقات المختلفة لتطبيق Compose، وتوضّح لك بسرعة الميزات المتاحة وكيفية استخدامها.

إذا كانت لديك أسئلة أو ملاحظات

يمكنك الانتقال إلى صفحة الأسئلة الشائعة والاطّلاع على الأدلة السريعة أو التواصل معنا وإعلامنا برأيك.