উন্নত অ্যানিমেশন উদাহরণ: অঙ্গভঙ্গি
সেভ করা পৃষ্ঠা গুছিয়ে রাখতে 'সংগ্রহ' ব্যবহার করুন
আপনার পছন্দ অনুযায়ী কন্টেন্ট সেভ করুন ও সঠিক বিভাগে রাখুন।
আমরা যখন একা অ্যানিমেশনের সাথে কাজ করি তার তুলনায় আমরা স্পর্শ ইভেন্ট এবং অ্যানিমেশনগুলির সাথে কাজ করার সময় আমাদের বেশ কয়েকটি বিষয় বিবেচনা করতে হবে। প্রথমত, ব্যবহারকারীর মিথস্ক্রিয়াকে সর্বোচ্চ অগ্রাধিকার দেওয়া উচিত বলে স্পর্শ ইভেন্টগুলি শুরু হলে আমাদের একটি চলমান অ্যানিমেশনকে বাধা দিতে হতে পারে।
নীচের উদাহরণে, আমরা একটি বৃত্তের উপাদানের অফসেট অবস্থান উপস্থাপন করতে একটি Animatable
ব্যবহার করি। টাচ ইভেন্টগুলি pointerInput
মডিফায়ার দিয়ে প্রক্রিয়া করা হয়। যখন আমরা একটি নতুন ট্যাপ ইভেন্ট শনাক্ত করি, তখন অফসেট মানটিকে ট্যাপ পজিশনে অ্যানিমেট করতে আমরা animateTo
কল করি। অ্যানিমেশনের সময়ও একটি ট্যাপ ইভেন্ট ঘটতে পারে, এবং সেই ক্ষেত্রে, animateTo
চলমান অ্যানিমেশনকে বাধা দেয় এবং বাধাপ্রাপ্ত অ্যানিমেশনের বেগ বজায় রেখে অ্যানিমেশনটিকে নতুন লক্ষ্য অবস্থানে শুরু করে।
@Composable
fun Gesture() {
val offset = remember { Animatable(Offset(0f, 0f), Offset.VectorConverter) }
Box(
modifier = Modifier
.fillMaxSize()
.pointerInput(Unit) {
coroutineScope {
while (true) {
// Detect a tap event and obtain its position.
awaitPointerEventScope {
val position = awaitFirstDown().position
launch {
// Animate to the tap position.
offset.animateTo(position)
}
}
}
}
}
) {
Circle(modifier = Modifier.offset { offset.value.toIntOffset() })
}
}
private fun Offset.toIntOffset() = IntOffset(x.roundToInt(), y.roundToInt())
আরেকটি ঘন ঘন প্যাটার্ন হল আমাদের অ্যানিমেশন মানগুলিকে স্পর্শ ইভেন্ট থেকে আসা মানগুলির সাথে সিঙ্ক্রোনাইজ করতে হবে, যেমন টেনে আনা। নীচের উদাহরণে, আমরা দেখতে পাচ্ছি "খারিজ করতে সোয়াইপ" একটি Modifier
হিসাবে প্রয়োগ করা হয়েছে ( SwipeToDismiss
কম্পোজেবল ব্যবহার করার পরিবর্তে)। উপাদানটির অনুভূমিক অফসেট একটি Animatable
হিসাবে উপস্থাপিত হয়। অঙ্গভঙ্গি অ্যানিমেশনে এই API-এর একটি বৈশিষ্ট্য রয়েছে। স্পর্শ ইভেন্টের পাশাপাশি অ্যানিমেশন দ্বারা এর মান পরিবর্তন করা যেতে পারে। যখন আমরা একটি টাচ ডাউন ইভেন্ট পাই, তখন আমরা stop
পদ্ধতিতে Animatable
বন্ধ করি যাতে যেকোন চলমান অ্যানিমেশন আটকে যায়।
একটি ড্র্যাগ ইভেন্টের সময়, আমরা স্পর্শ ইভেন্ট থেকে গণনা করা মানের সাথে Animatable
মান আপডেট করতে snapTo
ব্যবহার করি। ফ্লিং-এর জন্য, কম্পোজ ড্র্যাগ ইভেন্ট রেকর্ড করতে এবং বেগ গণনা করতে VelocityTracker
প্রদান করে। ফ্লিং অ্যানিমেশনের জন্য বেগ সরাসরি animateDecay
খাওয়ানো যেতে পারে। যখন আমরা অফসেট মানটিকে আসল অবস্থানে স্লাইড করতে চাই, তখন আমরা animateTo
পদ্ধতির সাথে 0f
এর টার্গেট অফসেট মান নির্দিষ্ট করি।
fun Modifier.swipeToDismiss(
onDismissed: () -> Unit
): Modifier = composed {
val offsetX = remember { Animatable(0f) }
pointerInput(Unit) {
// Used to calculate fling decay.
val decay = splineBasedDecay<Float>(this)
// Use suspend functions for touch events and the Animatable.
coroutineScope {
while (true) {
val velocityTracker = VelocityTracker()
// Stop any ongoing animation.
offsetX.stop()
awaitPointerEventScope {
// Detect a touch down event.
val pointerId = awaitFirstDown().id
horizontalDrag(pointerId) { change ->
// Update the animation value with touch events.
launch {
offsetX.snapTo(
offsetX.value + change.positionChange().x
)
}
velocityTracker.addPosition(
change.uptimeMillis,
change.position
)
}
}
// No longer receiving touch events. Prepare the animation.
val velocity = velocityTracker.calculateVelocity().x
val targetOffsetX = decay.calculateTargetValue(
offsetX.value,
velocity
)
// The animation stops when it reaches the bounds.
offsetX.updateBounds(
lowerBound = -size.width.toFloat(),
upperBound = size.width.toFloat()
)
launch {
if (targetOffsetX.absoluteValue <= size.width) {
// Not enough velocity; Slide back.
offsetX.animateTo(
targetValue = 0f,
initialVelocity = velocity
)
} else {
// The element was swiped away.
offsetX.animateDecay(velocity, decay)
onDismissed()
}
}
}
}
}
.offset { IntOffset(offsetX.value.roundToInt(), 0) }
}
{% শব্দার্থে %}
{% endverbatim %} আপনার জন্য প্রস্তাবিত
{% শব্দার্থে %} {% endverbatim %}
এই পৃষ্ঠার কন্টেন্ট ও কোডের নমুনাগুলি Content License-এ বর্ণিত লাইসেন্সের অধীনস্থ। Java এবং OpenJDK হল Oracle এবং/অথবা তার অ্যাফিলিয়েট সংস্থার রেজিস্টার্ড ট্রেডমার্ক।
2025-08-27 UTC-তে শেষবার আপডেট করা হয়েছে।
[[["সহজে বোঝা যায়","easyToUnderstand","thumb-up"],["আমার সমস্যার সমাধান হয়েছে","solvedMyProblem","thumb-up"],["অন্যান্য","otherUp","thumb-up"]],[["এতে আমার প্রয়োজনীয় তথ্য নেই","missingTheInformationINeed","thumb-down"],["খুব জটিল / অনেক ধাপ","tooComplicatedTooManySteps","thumb-down"],["পুরনো","outOfDate","thumb-down"],["অনুবাদ সংক্রান্ত সমস্যা","translationIssue","thumb-down"],["নমুনা / কোড সংক্রান্ত সমস্যা","samplesCodeIssue","thumb-down"],["অন্যান্য","otherDown","thumb-down"]],["2025-08-27 UTC-তে শেষবার আপডেট করা হয়েছে।"],[],[],null,["There are several things we have to take into consideration when we are working\nwith touch events and animations, compared to when we are working with\nanimations alone. First of all, we might need to interrupt an ongoing animation\nwhen touch events begin as user interaction should have the highest priority.\n\nIn the example below, we use an `Animatable` to represent the offset position of\na circle component. Touch events are processed with the\n[`pointerInput`](/reference/kotlin/androidx/compose/ui/input/pointer/package-summary#(androidx.compose.ui.Modifier).pointerInput(kotlin.Any,%20kotlin.coroutines.SuspendFunction1))\nmodifier. When we detect a new tap event, we call `animateTo` to animate the\noffset value to the tap position. A tap event can happen during the animation\ntoo, and in that case, `animateTo` interrupts the ongoing animation and starts\nthe animation to the new target position while maintaining the velocity of the\ninterrupted animation.\n\n\n```kotlin\n@Composable\nfun Gesture() {\n val offset = remember { Animatable(Offset(0f, 0f), Offset.VectorConverter) }\n Box(\n modifier = Modifier\n .fillMaxSize()\n .pointerInput(Unit) {\n coroutineScope {\n while (true) {\n // Detect a tap event and obtain its position.\n awaitPointerEventScope {\n val position = awaitFirstDown().position\n\n launch {\n // Animate to the tap position.\n offset.animateTo(position)\n }\n }\n }\n }\n }\n ) {\n Circle(modifier = Modifier.offset { offset.value.toIntOffset() })\n }\n}\n\nprivate fun Offset.toIntOffset() = IntOffset(x.roundToInt(), y.roundToInt())https://github.com/android/snippets/blob/5673ffc60b614daf028ee936227128eb8c4f9781/compose/snippets/src/main/java/com/example/compose/snippets/animations/AdvancedAnimationSnippets.kt#L62-L88\n```\n\n\u003cbr /\u003e\n\nAnother frequent pattern is we need to synchronize animation values with values\ncoming from touch events, such as drag. In the example below, we see \"swipe to\ndismiss\" implemented as a `Modifier` (rather than using the\n[`SwipeToDismiss`](/reference/kotlin/androidx/compose/material/package-summary#SwipeToDismiss(androidx.compose.material.DismissState,%20androidx.compose.ui.Modifier,%20kotlin.collections.Set,%20kotlin.Function1,%20kotlin.Function1,%20kotlin.Function1))\ncomposable). The horizontal offset of the element is represented as an\n`Animatable`. This API has a characteristic useful in gesture animation. Its\nvalue can be changed by touch events as well as the animation. When we receive a\ntouch down event, we stop the `Animatable` by the `stop` method so that any\nongoing animation is intercepted.\n\nDuring a drag event, we use `snapTo` to update the `Animatable` value with the\nvalue calculated from touch events. For fling, Compose provides\n`VelocityTracker` to record drag events and calculate velocity. The velocity can\nbe fed directly to `animateDecay` for the fling animation. When we want to slide\nthe offset value back to the original position, we specify the target offset\nvalue of `0f` with the `animateTo` method.\n\n\n```kotlin\nfun Modifier.swipeToDismiss(\n onDismissed: () -\u003e Unit\n): Modifier = composed {\n val offsetX = remember { Animatable(0f) }\n pointerInput(Unit) {\n // Used to calculate fling decay.\n val decay = splineBasedDecay\u003cFloat\u003e(this)\n // Use suspend functions for touch events and the Animatable.\n coroutineScope {\n while (true) {\n val velocityTracker = VelocityTracker()\n // Stop any ongoing animation.\n offsetX.stop()\n awaitPointerEventScope {\n // Detect a touch down event.\n val pointerId = awaitFirstDown().id\n\n horizontalDrag(pointerId) { change -\u003e\n // Update the animation value with touch events.\n launch {\n offsetX.snapTo(\n offsetX.value + change.positionChange().x\n )\n }\n velocityTracker.addPosition(\n change.uptimeMillis,\n change.position\n )\n }\n }\n // No longer receiving touch events. Prepare the animation.\n val velocity = velocityTracker.calculateVelocity().x\n val targetOffsetX = decay.calculateTargetValue(\n offsetX.value,\n velocity\n )\n // The animation stops when it reaches the bounds.\n offsetX.updateBounds(\n lowerBound = -size.width.toFloat(),\n upperBound = size.width.toFloat()\n )\n launch {\n if (targetOffsetX.absoluteValue \u003c= size.width) {\n // Not enough velocity; Slide back.\n offsetX.animateTo(\n targetValue = 0f,\n initialVelocity = velocity\n )\n } else {\n // The element was swiped away.\n offsetX.animateDecay(velocity, decay)\n onDismissed()\n }\n }\n }\n }\n }\n .offset { IntOffset(offsetX.value.roundToInt(), 0) }\n}https://github.com/android/snippets/blob/5673ffc60b614daf028ee936227128eb8c4f9781/compose/snippets/src/main/java/com/example/compose/snippets/animations/AdvancedAnimationSnippets.kt#L94-L152\n```\n\n\u003cbr /\u003e\n\nRecommended for you\n\n- Note: link text is displayed when JavaScript is off\n- [Value-based animations](/develop/ui/compose/animation/value-based)\n- [Drag, swipe, and fling](/develop/ui/compose/touch-input/pointer-input/drag-swipe-fling)\n- [Understand gestures](/develop/ui/compose/touch-input/pointer-input/understand-gestures)"]]