شما میتوانید ظاهر متن را کاراکتر به کاراکتر متحرکسازی کنید، بنابراین مانند یک افکت تایپ در حال پخش به نظر میرسد، شبیه به آنچه یک ماشین تحریر تولید میکند.
سازگاری نسخه
این پیادهسازی مستلزم آن است که 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یک کوروتین را برای ایجاد تأخیر بین کاراکترها شروع میکند. میتوانید بلوک کد را با یک شنونده کلیک - یا هر رویداد دیگری - برای ایجاد انیمیشن جایگزین کنید. - هر بار که مقدار
substringTextبهروزرسانی میشود، کامپوننتTextدوباره رندر میشود.
نتایج
مجموعههایی که حاوی این راهنما هستند
این راهنما بخشی از این مجموعههای راهنمای سریعِ برگزیده است که اهداف گستردهتر توسعه اندروید را پوشش میدهد:

نمایش متن
