شخصیت به شخصیت ظاهر متن را متحرک کنید

شما می‌توانید ظاهر متن را کاراکتر به کاراکتر متحرک‌سازی کنید، بنابراین مانند یک افکت تایپ در حال پخش به نظر می‌رسد، شبیه به آنچه یک ماشین تحریر تولید می‌کند.

سازگاری نسخه

این پیاده‌سازی مستلزم آن است که 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 دوباره رندر می‌شود.

نتایج

شکل ۱. متن و ایموجی که به صورت کاراکتر به کاراکتر متحرک شده‌اند.

مجموعه‌هایی که حاوی این راهنما هستند

این راهنما بخشی از این مجموعه‌های راهنمای سریعِ برگزیده است که اهداف گسترده‌تر توسعه اندروید را پوشش می‌دهد:

متن بخش اصلی هر رابط کاربری است. روش‌های مختلفی را برای ارائه متن در برنامه خود بیابید تا یک تجربه کاربری لذت‌بخش ارائه دهید.
این مجموعه ویدیوها APIهای مختلف Compose را معرفی می‌کنند و به سرعت به شما نشان می‌دهند که چه چیزهایی در دسترس هستند و چگونه از آنها استفاده کنید.

سوالی یا بازخوردی دارید؟

به صفحه سوالات متداول ما بروید و درباره راهنماهای سریع اطلاعات کسب کنید یا با ما تماس بگیرید و نظرات خود را با ما در میان بگذارید.