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

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

سازگاری نسخه

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

نتایج

شکل 1. متن و ایموجی متحرک شخصیت به کاراکتر.

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

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

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

سوال یا بازخورد داشته باشید

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