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

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

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

يتطلّب هذا التنفيذ ضبط minSDK في مشروعك على المستوى 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، وتوضّح لك بسرعة الميزات المتاحة وكيفية استخدامها.

هل لديك أسئلة أو ملاحظات؟

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