অক্ষর দ্বারা অক্ষর টেক্সট চেহারা অ্যানিমেট

আপনি প্রতিটি অক্ষর ধরে ধরে লেখার দৃশ্যকে অ্যানিমেট করতে পারেন, ফলে এটি টাইপরাইটারের মতো একটি চলমান টাইপিং এফেক্টের মতো দেখায়।

ফলাফল

চিত্র ১। লেখা ও ইমোজির অক্ষর-ভিত্তিক অ্যানিমেশন।

সংস্করণ সামঞ্জস্যতা

এই বাস্তবায়নের জন্য আপনার প্রোজেক্টের minSDK অবশ্যই API লেভেল ২১ বা তার বেশি হতে হবে।

নির্ভরশীলতা

পাঠ্যকে অক্ষর-অক্ষর করে অ্যানিমেট করুন

এই কোডটি টেক্সটকে অক্ষর-অনুযায়ী অ্যানিমেট করে। টেক্সটের কতটুকু অংশ দেখানো হবে, তা নিয়ন্ত্রণ করার জন্য এটি একটি ইনডেক্স ট্র্যাক করে। প্রদর্শিত টেক্সটটি গতিশীলভাবে আপডেট হয়ে শুধু বর্তমান ইনডেক্স পর্যন্ত অক্ষরগুলো দেখায়। সবশেষে, ভ্যারিয়েবলটি পরিবর্তিত হলে অ্যানিমেশনটি চলে।

@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 composable-টি পুনরায় রেন্ডার হয়।

যে সংগ্রহগুলিতে এই নির্দেশিকাটি রয়েছে

এই নির্দেশিকাটি বিশেষভাবে নির্বাচিত কুইক গাইড সংকলনগুলোর একটি অংশ, যা অ্যান্ড্রয়েড ডেভেলপমেন্টের বৃহত্তর লক্ষ্যগুলো পূরণ করে:

যেকোনো UI-এর একটি কেন্দ্রীয় অংশ হলো টেক্সট। আপনার অ্যাপে টেক্সট উপস্থাপনের বিভিন্ন উপায় জেনে নিন, যা ব্যবহারকারীকে একটি আনন্দদায়ক অভিজ্ঞতা দেবে।
এই ভিডিও সিরিজটিতে বিভিন্ন কম্পোজ এপিআই (Compose API)-এর সাথে পরিচয় করিয়ে দেওয়া হয়েছে এবং দ্রুত দেখানো হয়েছে কী কী উপলব্ধ আছে ও কীভাবে সেগুলি ব্যবহার করতে হয়।

কোনো প্রশ্ন বা মতামত থাকলে

আমাদের প্রায়শই জিজ্ঞাসিত প্রশ্নাবলী পেজে গিয়ে সংক্ষিপ্ত নির্দেশিকাগুলো সম্পর্কে জানুন অথবা আমাদের সাথে যোগাযোগ করে আপনার মতামত জানান।