কম্পোজ সাধারণ অ্যানিমেশন ব্যবহারের ক্ষেত্রে পরিচালনার জন্য অন্তর্নির্মিত কম্পোজেবল এবং মডিফায়ারের সাথে আসে।
অন্তর্নির্মিত অ্যানিমেটেড কম্পোজেবল
AnimatedVisibility
সহ অ্যানিমেট চেহারা এবং অন্তর্ধান
![সবুজ কম্পোজেবল দেখাচ্ছে এবং নিজেকে লুকিয়ে](https://developer.android.com/static/develop/ui/compose/images/animations/animated_visibility_column.gif?authuser=1&hl=bn)
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 // ... }
ডিফল্টরূপে, বিষয়বস্তু বিবর্ণ এবং প্রসারিত হয়ে উপস্থিত হয় এবং এটি বিবর্ণ এবং সঙ্কুচিত হয়ে অদৃশ্য হয়ে যায়। 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)) }
আপনি উপরের উদাহরণে দেখতে পাচ্ছেন, আপনি একটি +
অপারেটরের সাথে একাধিক 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" } ) }
অ্যানিমেট প্রবেশ এবং প্রস্থান শিশুদের জন্য
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… } } }
কিছু ক্ষেত্রে, আপনি 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)) }
Transition
সম্পর্কে বিস্তারিত জানার জন্য updateTransition দেখুন।
AnimatedContent
সহ টার্গেট স্টেটের উপর ভিত্তি করে অ্যানিমেট করুন
AnimatedContent
কম্পোজেবল তার বিষয়বস্তু অ্যানিমেট করে কারণ এটি একটি লক্ষ্য অবস্থার উপর ভিত্তি করে পরিবর্তিত হয়।
Row { var count by remember { mutableStateOf(0) } Button(onClick = { count++ }) { Text("Add") } AnimatedContent(targetState = count) { targetCount -> // Make sure to use `targetCount`, not `count`. Text(text = "Count: $targetCount") } }
মনে রাখবেন যে আপনার সর্বদা ল্যাম্বডা প্যারামিটার ব্যবহার করা উচিত এবং বিষয়বস্তুতে এটি প্রতিফলিত করা উচিত। 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() with 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() with slideOutVertically { height -> height } + fadeOut() }.using( // Disable clipping since the faded slide-in/out should // be displayed out of bounds. SizeTransform(clip = false) ) } ) { targetCount -> Text(text = "$targetCount") }
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)) with 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 } } } } ) { targetExpanded -> if (targetExpanded) { Expanded() } else { ContentIcon() } } }
অ্যানিমেট শিশু প্রবেশ এবং প্রস্থান পরিবর্তন
AnimatedVisibility
মতই, AnimatedContent
কন্টেন্ট ল্যাম্বডা-এর ভিতরে animateEnterExit
মডিফায়ার পাওয়া যায়। প্রতিটি প্রত্যক্ষ বা পরোক্ষ শিশুদের জন্য আলাদাভাবে EnterAnimation
এবং ExitAnimation
প্রয়োগ করতে এটি ব্যবহার করুন।
কাস্টম অ্যানিমেশন যোগ করুন
AnimatedVisibility
মতোই, transition
ফিল্ডটি AnimatedContent
কনটেন্টের কন্টেন্ট ল্যাম্বডা-এর ভিতরে উপলব্ধ। একটি কাস্টম অ্যানিমেশন প্রভাব তৈরি করতে এটি ব্যবহার করুন যা AnimatedContent
রূপান্তরের সাথে একযোগে চলে। বিস্তারিত জানার জন্য আপডেট ট্রানজিশন দেখুন।
Crossfade
দিয়ে দুটি লেআউটের মধ্যে অ্যানিমেট করুন
Crossfade
একটি ক্রসফেড অ্যানিমেশন সহ দুটি লেআউটের মধ্যে অ্যানিমেট করে। current
প্যারামিটারে পাস করা মানটিকে টগল করার মাধ্যমে, বিষয়বস্তু একটি ক্রসফেড অ্যানিমেশনের সাথে স্যুইচ করা হয়।
var currentPage by remember { mutableStateOf("A") } Crossfade(targetState = currentPage) { screen -> when (screen) { "A" -> Text("Page A") "B" -> Text("Page B") } }
অন্তর্নির্মিত অ্যানিমেশন মডিফায়ার
অ্যানিমেট কম্পোজেবল সাইজ animateContentSize
সাথে পরিবর্তন হয়
![সবুজ সংমিশ্রণযোগ্য অ্যানিমেটিং এর আকার মসৃণভাবে পরিবর্তন করে।](https://developer.android.com/static/develop/ui/compose/images/animations/animated_content_size.gif?authuser=1&hl=bn)
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 } ) { }
তালিকা আইটেম অ্যানিমেশন
আপনি যদি অলস তালিকা বা গ্রিডের মধ্যে আইটেম পুনঃক্রম অ্যানিমেট করতে চান, তাহলে অলস লেআউট আইটেম অ্যানিমেশন ডকুমেন্টেশনটি দেখুন।
{% শব্দার্থে %}আপনার জন্য প্রস্তাবিত
- দ্রষ্টব্য: জাভাস্ক্রিপ্ট বন্ধ থাকলে লিঙ্ক টেক্সট প্রদর্শিত হয়
- মান-ভিত্তিক অ্যানিমেশন
- রচনায় অ্যানিমেশন
- অ্যানিমেশন টুলিং সমর্থন {:#tooling}