אתם יכולים להוסיף אנימציה לטקסט, תו אחר תו, כך שייראה כמו אפקט הקלדה בזמן אמת, בדומה לאפקט שיוצרת מכונת כתיבה.
תאימות גרסאות
כדי להטמיע את הקוד הזה, צריך להגדיר את 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
מפעילה פונקציית קורוטין כדי ליצור עיכוב בין התווים. כדי להפעיל את האנימציה, אפשר להחליף את בלוק הקוד במאזין לקליק או בכל אירוע אחר.- הרכיב הניתן לקיבוץ
Text
עובר עיבוד מחדש בכל פעם שהערך שלsubstringText
מתעדכן.
תוצאות
אוספים שמכילים את המדריך הזה
המדריך הזה הוא חלק מהאוספים הבאים של מדריכים מהירים, שמכסים יעדים רחבים יותר לפיתוח Android:
![](https://developer.android.google.cn/static/images/quick-guides/collection-illustration.png?hl=he)
הטקסט שיוצג
טקסט הוא רכיב מרכזי בכל ממשק משתמש. כאן מוסבר איך להציג טקסט באפליקציה כדי לספק חוויית משתמש נעימה.
![](https://developer.android.google.cn/static/images/quick-guides/collection-illustration.png?hl=he)
יסודות הכתיבה (אוסף סרטונים)
בסדרת הסרטונים הזו נסביר על ממשקי API שונים של Compose, ונראה במהירות מה זמין ואיך משתמשים בהם.
יש לכם שאלות או משוב
אתם יכולים להיכנס לדף השאלות הנפוצות שלנו ולקרוא מדריכים מהירים, או ליצור איתנו קשר ולספר לנו מה דעתכם.