শুধুমাত্র অ্যানিমেশন নিয়ে কাজ করার তুলনায়, টাচ ইভেন্ট এবং অ্যানিমেশন একসাথে নিয়ে কাজ করার সময় আমাদের বেশ কিছু বিষয় বিবেচনা করতে হয়। প্রথমত, টাচ ইভেন্ট শুরু হলে আমাদের চলমান অ্যানিমেশনটি থামানোর প্রয়োজন হতে পারে, কারণ ব্যবহারকারীর মিথস্ক্রিয়ার সর্বোচ্চ অগ্রাধিকার থাকা উচিত।
নীচের উদাহরণে, আমরা একটি বৃত্তাকার কম্পোনেন্টের অফসেট অবস্থান বোঝাতে একটি 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 হিসেবে দেখানো হয়। এই এপিআই-এর একটি বৈশিষ্ট্য আছে যা জেসচার অ্যানিমেশনের জন্য উপযোগী। এর মান টাচ ইভেন্টের পাশাপাশি অ্যানিমেশন দ্বারাও পরিবর্তন করা যায়। যখন আমরা একটি টাচ ডাউন ইভেন্ট পাই, তখন আমরা stop মেথড ব্যবহার করে Animatable থামিয়ে দিই, যাতে যেকোনো চলমান অ্যানিমেশন বাধাগ্রস্ত হয়।
ড্র্যাগ ইভেন্টের সময়, আমরা টাচ ইভেন্ট থেকে গণনা করা মান দিয়ে Animatable মান আপডেট করতে snapTo ব্যবহার করি। ফ্লিং-এর জন্য, Compose ড্র্যাগ ইভেন্ট রেকর্ড করতে এবং বেগ গণনা করতে 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) } }
আপনার জন্য প্রস্তাবিত
- দ্রষ্টব্য: জাভাস্ক্রিপ্ট বন্ধ থাকলেও লিঙ্কের লেখা প্রদর্শিত হয়।
- মান-ভিত্তিক অ্যানিমেশন
- টেনে আনুন, সোয়াইপ করুন এবং ছুড়ে ফেলুন
- ইশারা বুঝুন