অ্যানিমেশন মডিফায়ার এবং কম্পোজেবল

কম্পোজ সাধারণ অ্যানিমেশন ব্যবহারের ক্ষেত্রে পরিচালনার জন্য অন্তর্নির্মিত কম্পোজেবল এবং মডিফায়ারের সাথে আসে।

অন্তর্নির্মিত অ্যানিমেটেড কম্পোজেবল

AnimatedVisibility সহ অ্যানিমেট চেহারা এবং অন্তর্ধান

চিত্র 1. একটি কলামে একটি আইটেমের উপস্থিতি এবং অন্তর্ধান অ্যানিমেটিং

AnimatedVisibility কম্পোজেবল এর বিষয়বস্তুর উপস্থিতি এবং অন্তর্ধানকে অ্যানিমেট করে।

var visible by remember {
    mutableStateOf(true)
}
// Animated visibility will eventually remove the item from the composition once the animation has finished.
AnimatedVisibility(visible) {
    // your composable here
    // ...
}
AnimationQuickGuide.kt

ডিফল্টরূপে, বিষয়বস্তু বিবর্ণ এবং প্রসারিত হয়ে উপস্থিত হয় এবং এটি বিবর্ণ এবং সঙ্কুচিত হয়ে অদৃশ্য হয়ে যায়। EnterTransition এবং ExitTransition উল্লেখ করে রূপান্তরটি কাস্টমাইজ করা যেতে পারে।

var visible by remember { mutableStateOf(true) }
val density = LocalDensity.current
AnimatedVisibility(
    visible = visible,
    enter = slideInVertically {
        // Slide in from 40 dp from the top.
        with(density) { -40.dp.roundToPx() }
    } + expandVertically(
        // Expand from the top.
        expandFrom = Alignment.Top
    ) + fadeIn(
        // Fade in with the initial alpha of 0.3f.
        initialAlpha = 0.3f
    ),
    exit = slideOutVertically() + shrinkVertically() + fadeOut()
) {
    Text(
        "Hello",
        Modifier
            .fillMaxWidth()
            .height(200.dp)
    )
}
AnimationSnippets.kt

আপনি উপরের উদাহরণে দেখতে পাচ্ছেন, আপনি একটি + অপারেটরের সাথে একাধিক EnterTransition বা ExitTransition অবজেক্টকে একত্রিত করতে পারেন এবং প্রতিটি তার আচরণ কাস্টমাইজ করতে ঐচ্ছিক পরামিতি গ্রহণ করে। আরো তথ্যের জন্য রেফারেন্স দেখুন.

EnterTransition এবং ExitTransition উদাহরণ

এন্টার ট্রানজিশন	প্রস্থান ট্রানজিশন
fadeIn	fadeOut
slideIn	slideOut
slideInHorizontally	slideOutHorizontally
slideInVertically	slideOutVertically
scaleIn	scaleOut
expandIn	shrinkOut
expandHorizontally	shrinkHorizontally
expandVertically	shrinkVertically

AnimatedVisibility একটি রূপান্তরও অফার করে যা একটি MutableTransitionState নেয়। কম্পোজিশন ট্রিতে AnimatedVisibility যুক্ত হওয়ার সাথে সাথে এটি আপনাকে একটি অ্যানিমেশন ট্রিগার করতে দেয়। এটি অ্যানিমেশন অবস্থা পর্যবেক্ষণের জন্যও কার্যকর।

// Create a MutableTransitionState<Boolean> for the AnimatedVisibility.
val state = remember {
    MutableTransitionState(false).apply {
        // Start the animation immediately.
        targetState = true
    }
}
Column {
    AnimatedVisibility(visibleState = state) {
        Text(text = "Hello, world!")
    }

    // Use the MutableTransitionState to know the current animation state
    // of the AnimatedVisibility.
    Text(
        text = when {
            state.isIdle && state.currentState -> "Visible"
            !state.isIdle && state.currentState -> "Disappearing"
            state.isIdle && !state.currentState -> "Invisible"
            else -> "Appearing"
        }
    )
}
AnimationSnippets.kt

অ্যানিমেট প্রবেশ এবং প্রস্থান শিশুদের জন্য

AnimatedVisibility (প্রত্যক্ষ বা পরোক্ষ শিশু) এর মধ্যে থাকা বিষয়বস্তু তাদের প্রত্যেকের জন্য আলাদা অ্যানিমেশন আচরণ নির্দিষ্ট করতে animateEnterExit মডিফায়ার ব্যবহার করতে পারে। এই শিশুদের প্রত্যেকের জন্য ভিজ্যুয়াল এফেক্ট হল AnimatedVisibility কম্পোজেবলে নির্দিষ্ট করা অ্যানিমেশন এবং শিশুর নিজস্ব এন্টার এবং এক্সিট অ্যানিমেশনের সংমিশ্রণ।

var visible by remember { mutableStateOf(true) }

AnimatedVisibility(
    visible = visible,
    enter = fadeIn(),
    exit = fadeOut()
) {
    // Fade in/out the background and the foreground.
    Box(
        Modifier
            .fillMaxSize()
            .background(Color.DarkGray)
    ) {
        Box(
            Modifier
                .align(Alignment.Center)
                .animateEnterExit(
                    // Slide in/out the inner box.
                    enter = slideInVertically(),
                    exit = slideOutVertically()
                )
                .sizeIn(minWidth = 256.dp, minHeight = 64.dp)
                .background(Color.Red)
        ) {
            // Content of the notification…
        }
    }
}
AnimationSnippets.kt

কিছু ক্ষেত্রে, আপনি AnimatedVisibility কোনো অ্যানিমেশন প্রয়োগ না করতে চাইতে পারেন যাতে বাচ্চারা animateEnterExit মাধ্যমে প্রত্যেকের নিজস্ব আলাদা অ্যানিমেশন থাকতে পারে। এটি অর্জন করতে, AnimatedVisibility composable এ EnterTransition.None এবং ExitTransition.None উল্লেখ করুন।

কাস্টম অ্যানিমেশন যোগ করুন

আপনি যদি বিল্ট-ইন এন্টার এবং এক্সিট অ্যানিমেশনের বাইরে কাস্টম অ্যানিমেশন প্রভাব যুক্ত করতে চান, তাহলে AnimatedVisibility জন্য সামগ্রী ল্যাম্বডা-এর ভিতরে transition প্রপার্টির মাধ্যমে অন্তর্নিহিত Transition ইনস্ট্যান্স অ্যাক্সেস করুন। ট্রানজিশন ইন্সট্যান্সে যোগ করা যেকোনো অ্যানিমেশন স্টেট AnimatedVisibility -এর এন্টার এবং এক্সিট অ্যানিমেশনের সাথে একযোগে চলবে। AnimatedVisibility অপেক্ষা করে যতক্ষণ না Transition সমস্ত অ্যানিমেশন এর বিষয়বস্তু সরানোর আগে শেষ না হয়। Transition (যেমন animate*AsState ব্যবহার করে) স্বাধীনভাবে তৈরি করা অ্যানিমেশনের প্রস্থানের জন্য, AnimatedVisibility তাদের জন্য অ্যাকাউন্ট করতে সক্ষম হবে না, এবং তাই শেষ হওয়ার আগে কম্পোজযোগ্য বিষয়বস্তু সরিয়ে ফেলতে পারে।

var visible by remember { mutableStateOf(true) }

AnimatedVisibility(
    visible = visible,
    enter = fadeIn(),
    exit = fadeOut()
) { // this: AnimatedVisibilityScope
    // Use AnimatedVisibilityScope#transition to add a custom animation
    // to the AnimatedVisibility.
    val background by transition.animateColor(label = "color") { state ->
        if (state == EnterExitState.Visible) Color.Blue else Color.Gray
    }
    Box(
        modifier = Modifier
            .size(128.dp)
            .background(background)
    )
}
AnimationSnippets.kt

Transition সম্পর্কে বিস্তারিত জানার জন্য updateTransition দেখুন।

AnimatedContent সহ টার্গেট স্টেটের উপর ভিত্তি করে অ্যানিমেট করুন

AnimatedContent কম্পোজেবল তার বিষয়বস্তু অ্যানিমেট করে কারণ এটি একটি লক্ষ্য অবস্থার উপর ভিত্তি করে পরিবর্তিত হয়।

Row {
    var count by remember { mutableIntStateOf(0) }
    Button(onClick = { count++ }) {
        Text("Add")
    }
    AnimatedContent(
        targetState = count,
        label = "animated content"
    ) { targetCount ->
        // Make sure to use `targetCount`, not `count`.
        Text(text = "Count: $targetCount")
    }
}
AnimationSnippets.kt

মনে রাখবেন যে আপনার সর্বদা ল্যাম্বডা প্যারামিটার ব্যবহার করা উচিত এবং বিষয়বস্তুতে এটি প্রতিফলিত করা উচিত। API বর্তমানে প্রদর্শিত বিষয়বস্তু সনাক্ত করতে এই মানটিকে কী হিসাবে ব্যবহার করে।

ডিফল্টরূপে, প্রাথমিক বিষয়বস্তু বিবর্ণ হয়ে যায় এবং তারপর লক্ষ্য বিষয়বস্তু ম্লান হয়ে যায় (এই আচরণটিকে ফেড থ্রু বলা হয়)। আপনি transitionSpec প্যারামিটারে একটি ContentTransform অবজেক্ট নির্দিষ্ট করে এই অ্যানিমেশন আচরণ কাস্টমাইজ করতে পারেন। আপনি ইনফিক্স ফাংশন ব্যবহার with একটি ExitTransition এর সাথে EnterTransition একত্রিত করে ContentTransform তৈরি করতে পারেন। আপনি ইনফিক্স ফাংশন using এটিকে সংযুক্ত করে ContentTransform এ SizeTransform প্রয়োগ করতে পারেন।

AnimatedContent(
    targetState = count,
    transitionSpec = {
        // Compare the incoming number with the previous number.
        if (targetState > initialState) {
            // If the target number is larger, it slides up and fades in
            // while the initial (smaller) number slides up and fades out.
            slideInVertically { height -> height } + fadeIn() togetherWith
                slideOutVertically { height -> -height } + fadeOut()
        } else {
            // If the target number is smaller, it slides down and fades in
            // while the initial number slides down and fades out.
            slideInVertically { height -> -height } + fadeIn() togetherWith
                slideOutVertically { height -> height } + fadeOut()
        }.using(
            // Disable clipping since the faded slide-in/out should
            // be displayed out of bounds.
            SizeTransform(clip = false)
        )
    }, label = "animated content"
) { targetCount ->
    Text(text = "$targetCount")
}
AnimationSnippets.kt

EnterTransition সংজ্ঞায়িত করে কিভাবে লক্ষ্য বিষয়বস্তু প্রদর্শিত হবে, এবং ExitTransition সংজ্ঞায়িত করে কিভাবে প্রাথমিক বিষয়বস্তু অদৃশ্য হওয়া উচিত। AnimatedVisibility এর জন্য উপলব্ধ সমস্ত EnterTransition এবং ExitTransition ফাংশন ছাড়াও, AnimatedContent slideIntoContainer এবং slideOutOfContainer অফার করে। এগুলি হল slideInHorizontally/Vertically এবং slideOutHorizontally/Vertically স্লাইডের সুবিধাজনক বিকল্প যা প্রাথমিক বিষয়বস্তুর আকার এবং AnimatedContent সামগ্রীর লক্ষ্য বিষয়বস্তুর উপর ভিত্তি করে স্লাইড দূরত্ব গণনা করে৷

SizeTransform সংজ্ঞায়িত করে কিভাবে আকারটি প্রাথমিক এবং লক্ষ্য বিষয়বস্তুর মধ্যে অ্যানিমেট করা উচিত। আপনি যখন অ্যানিমেশন তৈরি করছেন তখন আপনার প্রাথমিক আকার এবং লক্ষ্য আকার উভয়ই অ্যাক্সেস রয়েছে। SizeTransform অ্যানিমেশনের সময় উপাদানের আকারে ক্লিপ করা উচিত কিনা তাও নিয়ন্ত্রণ করে।

var expanded by remember { mutableStateOf(false) }
Surface(
    color = MaterialTheme.colorScheme.primary,
    onClick = { expanded = !expanded }
) {
    AnimatedContent(
        targetState = expanded,
        transitionSpec = {
            fadeIn(animationSpec = tween(150, 150)) togetherWith
                fadeOut(animationSpec = tween(150)) using
                SizeTransform { initialSize, targetSize ->
                    if (targetState) {
                        keyframes {
                            // Expand horizontally first.
                            IntSize(targetSize.width, initialSize.height) at 150
                            durationMillis = 300
                        }
                    } else {
                        keyframes {
                            // Shrink vertically first.
                            IntSize(initialSize.width, targetSize.height) at 150
                            durationMillis = 300
                        }
                    }
                }
        }, label = "size transform"
    ) { targetExpanded ->
        if (targetExpanded) {
            Expanded()
        } else {
            ContentIcon()
        }
    }
}
AnimationSnippets.kt

অ্যানিমেট শিশু প্রবেশ এবং প্রস্থান পরিবর্তন

AnimatedVisibility মতই, AnimatedContent কন্টেন্ট ল্যাম্বডা-এর ভিতরে animateEnterExit মডিফায়ার পাওয়া যায়। প্রতিটি প্রত্যক্ষ বা পরোক্ষ শিশুদের জন্য আলাদাভাবে EnterAnimation এবং ExitAnimation প্রয়োগ করতে এটি ব্যবহার করুন।

কাস্টম অ্যানিমেশন যোগ করুন

AnimatedVisibility মতোই, transition ফিল্ডটি AnimatedContent কনটেন্টের কন্টেন্ট ল্যাম্বডা-এর ভিতরে উপলব্ধ। একটি কাস্টম অ্যানিমেশন প্রভাব তৈরি করতে এটি ব্যবহার করুন যা AnimatedContent রূপান্তরের সাথে একযোগে চলে। বিস্তারিত জানার জন্য আপডেট ট্রানজিশন দেখুন।

Crossfade দিয়ে দুটি লেআউটের মধ্যে অ্যানিমেট করুন

Crossfade একটি ক্রসফেড অ্যানিমেশন সহ দুটি লেআউটের মধ্যে অ্যানিমেট করে। current প্যারামিটারে পাস করা মানটিকে টগল করার মাধ্যমে, বিষয়বস্তু একটি ক্রসফেড অ্যানিমেশনের সাথে স্যুইচ করা হয়।

var currentPage by remember { mutableStateOf("A") }
Crossfade(targetState = currentPage, label = "cross fade") { screen ->
    when (screen) {
        "A" -> Text("Page A")
        "B" -> Text("Page B")
    }
}
AnimationSnippets.kt

অন্তর্নির্মিত অ্যানিমেশন মডিফায়ার

অ্যানিমেট কম্পোজেবল সাইজ animateContentSize সাথে পরিবর্তন হয়

চিত্র 2. কম্পোজযোগ্য মসৃণভাবে একটি ছোট এবং একটি বড় আকারের মধ্যে অ্যানিমেটিং

animateContentSize সংশোধক একটি আকার পরিবর্তন অ্যানিমেট করে।

দ্রষ্টব্য: আপনার সংশোধক চেইনে animateContentSize কোথায় রাখা হয়েছে তার ক্রমবিন্যাস গুরুত্বপূর্ণ। মসৃণ অ্যানিমেশনের জন্য, নিশ্চিত করুন যে আপনি এটিকে size বা defaultMinSize মতো যেকোন সাইজ মডিফায়ারের আগে রাখবেন যাতে animateContentSize লেআউটে অ্যানিমেটেড মান পরিবর্তনের রিপোর্ট করে।

var expanded by remember { mutableStateOf(false) }
Box(
    modifier = Modifier
        .background(colorBlue)
        .animateContentSize()
        .height(if (expanded) 400.dp else 200.dp)
        .fillMaxWidth()
        .clickable(
            interactionSource = remember { MutableInteractionSource() },
            indication = null
        ) {
            expanded = !expanded
        }

) {
}
AnimationQuickGuide.kt

তালিকা আইটেম অ্যানিমেশন

আপনি যদি অলস তালিকা বা গ্রিডের মধ্যে আইটেম পুনঃক্রম অ্যানিমেট করতে চান, তাহলে অলস লেআউট আইটেম অ্যানিমেশন ডকুমেন্টেশনটি দেখুন।

{% শব্দার্থে %} {% endverbatim %}