הוספת אנימציה להופעת הטקסט תו אחר תו

אתם יכולים להנפיש את הטקסט, אות אחרי אות, כך שייראה כאילו הוא מוקלד, כמו במכונת כתיבה.

תוצאות

איור 1. טקסט ואמוג'י עם אנימציה של כל תו בנפרד.

תאימות גרסאות

כדי להטמיע את התכונה הזו, צריך להגדיר את minSDK בפרויקט לרמת API‏ 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 מפעילה שגרת המשך (coroutine) כדי ליצור את העיכוב בין התווים. אפשר להחליף את בלוק הקוד ב-listener של קליקים – או בכל אירוע אחר – כדי להפעיל את האנימציה.
  • הקומפוננטה Text עוברת עיבוד מחדש בכל פעם שהערך של substringText מתעדכן.

אוספים שכוללים את המדריך הזה

המדריך הזה הוא חלק מאוספים של מדריכים מהירים שנבחרו בקפידה ועוסקים ביעדים רחבים יותר של פיתוח ל-Android:

טקסט הוא חלק מרכזי בכל ממשק משתמש. כאן מוסבר על דרכים שונות להצגת טקסט באפליקציה כדי לספק חוויית משתמש נעימה.
בסדרת הסרטונים הזו מוצגים ממשקי API שונים של Compose, ומוסבר בקצרה מה זמין ואיך משתמשים בהם.

יש לך שאלות או משוב?

אפשר לעבור לדף השאלות הנפוצות שלנו כדי לקרוא מדריכים מהירים, או לפנות אלינו ולספר לנו מה דעתך.