অনেক অ্যানিমেশন API সাধারণত তাদের আচরণ কাস্টমাইজ করার জন্য পরামিতি গ্রহণ করে।
AnimationSpec
প্যারামিটার দিয়ে অ্যানিমেশন কাস্টমাইজ করুন
বেশিরভাগ অ্যানিমেশন API ডেভেলপারদের একটি ঐচ্ছিক AnimationSpec
প্যারামিটার দ্বারা অ্যানিমেশন স্পেসিফিকেশন কাস্টমাইজ করার অনুমতি দেয়।
val alpha: Float by animateFloatAsState( targetValue = if (enabled) 1f else 0.5f, // Configure the animation duration and easing. animationSpec = tween(durationMillis = 300, easing = FastOutSlowInEasing) )
বিভিন্ন ধরণের অ্যানিমেশন তৈরি করার জন্য বিভিন্ন ধরণের AnimationSpec
রয়েছে।
spring
সাথে পদার্থবিদ্যা-ভিত্তিক অ্যানিমেশন তৈরি করুন
spring
শুরু এবং শেষ মানগুলির মধ্যে একটি পদার্থবিদ্যা-ভিত্তিক অ্যানিমেশন তৈরি করে। এটি 2টি পরামিতি নেয়: dampingRatio
এবং stiffness
।
dampingRatio
নির্ধারণ করে বসন্ত কতটা বাউন্সি হওয়া উচিত। ডিফল্ট মান হল Spring.DampingRatioNoBouncy
.
চিত্র 1. বিভিন্ন বসন্ত স্যাঁতসেঁতে অনুপাত সেট করা।
stiffness
নির্ধারণ করে কত দ্রুত স্প্রিং শেষ মানের দিকে যেতে হবে। ডিফল্ট মান হল Spring.StiffnessMedium
।
চিত্র 2. বসন্তের বিভিন্ন দৃঢ়তা সেট করা
val value by animateFloatAsState( targetValue = 1f, animationSpec = spring( dampingRatio = Spring.DampingRatioHighBouncy, stiffness = Spring.StiffnessMedium ) )
spring
সময়কাল-ভিত্তিক AnimationSpec
প্রকারের তুলনায় বাধাগুলিকে আরও সহজভাবে পরিচালনা করতে পারে কারণ এটি অ্যানিমেশনের মধ্যে লক্ষ্য মান পরিবর্তনের সময় বেগের ধারাবাহিকতার গ্যারান্টি দেয়। spring
অনেক অ্যানিমেশন API দ্বারা ডিফল্ট অ্যানিমেশনস্পেক হিসাবে ব্যবহৃত হয়, যেমন animate*AsState
এবং updateTransition
।
উদাহরণ স্বরূপ, আমরা যদি নিচের অ্যানিমেশনে একটি spring
কনফিগার প্রয়োগ করি যা ব্যবহারকারীর স্পর্শ দ্বারা চালিত হয়, যখন অ্যানিমেশনের অগ্রগতিতে বাধা দেয়, আপনি দেখতে পাবেন যে tween
ব্যবহার করা spring
ব্যবহার করার মতো মসৃণভাবে সাড়া দেয় না।
চিত্র 3. অ্যানিমেশনের জন্য tween
বনাম spring
স্পেস সেট করা এবং এটিকে বাধা দেওয়া।
শুরু এবং শেষ মানের মধ্যে অ্যানিমেট করুন tween
দিয়ে বক্ররেখা সহজ করে
একটি সহজ বক্ররেখা ব্যবহার করে নির্দিষ্ট durationMillis
উপর শুরু এবং শেষ মানের মধ্যে tween
অ্যানিমেট করে। tween
শব্দের মধ্যে ছোট - যেহেতু এটি দুটি মানের মধ্যে যায়।
আপনি অ্যানিমেশন শুরু স্থগিত করতে delayMillis
নির্দিষ্ট করতে পারেন।
val value by animateFloatAsState( targetValue = 1f, animationSpec = tween( durationMillis = 300, delayMillis = 50, easing = LinearOutSlowInEasing ) )
আরও তথ্যের জন্য ইজিং দেখুন।
keyframes
সহ নির্দিষ্ট সময়ে নির্দিষ্ট মানগুলিতে অ্যানিমেট করুন
অ্যানিমেশনের সময়কালের বিভিন্ন টাইমস্ট্যাম্পে নির্দিষ্ট স্ন্যাপশট মানগুলির উপর ভিত্তি করে keyframes
অ্যানিমেট করে। যে কোনো সময়ে, অ্যানিমেশন মান দুটি কীফ্রেম মানের মধ্যে প্রত্যক্ষ করা হবে। এই প্রতিটি কীফ্রেমের জন্য, ইন্টারপোলেশন বক্ররেখা নির্ধারণ করতে ইজিং নির্দিষ্ট করা যেতে পারে।
0 ms এবং সময়কালের সময়ে মানগুলি নির্দিষ্ট করা ঐচ্ছিক৷ আপনি যদি এই মানগুলি নির্দিষ্ট না করেন তবে এগুলি যথাক্রমে অ্যানিমেশনের শুরু এবং শেষ মানগুলিতে ডিফল্ট হয়৷
val value by animateFloatAsState( targetValue = 1f, animationSpec = keyframes { durationMillis = 375 0.0f at 0 with LinearOutSlowInEasing // for 0-15 ms 0.2f at 15 with FastOutLinearInEasing // for 15-75 ms 0.4f at 75 // ms 0.4f at 225 // ms } )
repeatable
সঙ্গে একটি অ্যানিমেশন পুনরাবৃত্তি
repeatable
একটি সময়কাল-ভিত্তিক অ্যানিমেশন (যেমন tween
বা keyframes
) বারবার চালায় যতক্ষণ না এটি নির্দিষ্ট পুনরাবৃত্তি গণনায় পৌঁছায়। আপনি repeatMode
প্যারামিটারটি পাস করে নির্দিষ্ট করতে পারেন যে অ্যানিমেশনটি শুরু থেকে শুরু করে ( RepeatMode.Restart
) বা শেষ থেকে ( RepeatMode.Reverse
) রিপিট করা উচিত কিনা।
val value by animateFloatAsState( targetValue = 1f, animationSpec = repeatable( iterations = 3, animation = tween(durationMillis = 300), repeatMode = RepeatMode.Reverse ) )
infiniteRepeatable
দিয়ে অসীমভাবে একটি অ্যানিমেশন পুনরাবৃত্তি করুন
infiniteRepeatable
হল repeatable
, কিন্তু এটি একটি অসীম পরিমাণ পুনরাবৃত্তির জন্য পুনরাবৃত্তি করে।
val value by animateFloatAsState( targetValue = 1f, animationSpec = infiniteRepeatable( animation = tween(durationMillis = 300), repeatMode = RepeatMode.Reverse ) )
ComposeTestRule
ব্যবহার করে পরীক্ষায়, infiniteRepeatable
ব্যবহার করে অ্যানিমেশন চালানো হয় না। প্রতিটি অ্যানিমেটেড মানের প্রাথমিক মান ব্যবহার করে উপাদানটি রেন্ডার করা হবে।
অবিলম্বে snap
সঙ্গে শেষ মান স্ন্যাপ
snap
হল একটি বিশেষ AnimationSpec
যা অবিলম্বে মানটিকে শেষ মানের দিকে স্যুইচ করে। অ্যানিমেশন শুরু করতে বিলম্ব করার জন্য আপনি delayMillis
নির্দিষ্ট করতে পারেন।
val value by animateFloatAsState( targetValue = 1f, animationSpec = snap(delayMillis = 50) )
একটি কাস্টম ইজিং ফাংশন সেট করুন
সময়কাল-ভিত্তিক AnimationSpec
অপারেশন (যেমন tween
বা keyframes
) অ্যানিমেশনের ভগ্নাংশ সামঞ্জস্য করতে Easing
ব্যবহার করে। এটি অ্যানিমেটিং মানকে স্থির হারে চলার পরিবর্তে গতি বাড়াতে এবং ধীর করার অনুমতি দেয়। ভগ্নাংশ হল 0 (শুরু) এবং 1.0 (শেষ) এর মধ্যে একটি মান যা অ্যানিমেশনের বর্তমান বিন্দু নির্দেশ করে।
ইজিং আসলে একটি ফাংশন যা 0 এবং 1.0 এর মধ্যে একটি ভগ্নাংশ মান নেয় এবং একটি ফ্লোট প্রদান করে। প্রত্যাবর্তিত মানটি ওভারশুট বা আন্ডারশুট উপস্থাপন করতে সীমানার বাইরে হতে পারে। নিচের কোডের মত একটি কাস্টম ইজিং তৈরি করা যেতে পারে।
val CustomEasing = Easing { fraction -> fraction * fraction } @Composable fun EasingUsage() { val value by animateFloatAsState( targetValue = 1f, animationSpec = tween( durationMillis = 300, easing = CustomEasing ) ) // …… }
কম্পোজ বেশ কিছু বিল্ট-ইন Easing
ফাংশন প্রদান করে যা বেশিরভাগ ব্যবহারের ক্ষেত্রে কভার করে। আপনার দৃশ্যকল্পের উপর নির্ভর করে কী ব্যবহার করা সহজ সে সম্পর্কে আরও তথ্যের জন্য গতি - উপাদান ডিজাইন দেখুন।
-
FastOutSlowInEasing
-
LinearOutSlowInEasing
-
FastOutLinearEasing
-
LinearEasing
-
CubicBezierEasing
- আরো দেখুন
AnimationVector
এ এবং থেকে রূপান্তর করে কাস্টম ডেটা প্রকারগুলি অ্যানিমেট করুন
বেশিরভাগ কম্পোজ অ্যানিমেশন API ডিফল্টরূপে অ্যানিমেশন মান হিসাবে Float
, Color
, Dp
, এবং অন্যান্য মৌলিক ডেটা প্রকারগুলিকে সমর্থন করে, তবে আপনাকে কখনও কখনও আপনার কাস্টম সহ অন্যান্য ডেটা প্রকারগুলিকে অ্যানিমেট করতে হবে৷ অ্যানিমেশনের সময়, যেকোনো অ্যানিমেটিং মানকে AnimationVector
হিসেবে উপস্থাপন করা হয়। মানটিকে একটি AnimationVector
রূপান্তরিত করা হয় এবং এর বিপরীতে একটি সংশ্লিষ্ট TwoWayConverter
দ্বারা রূপান্তরিত হয় যাতে মূল অ্যানিমেশন সিস্টেম একইভাবে তাদের পরিচালনা করতে পারে। উদাহরণস্বরূপ, একটি Int
একটি AnimationVector1D
হিসাবে উপস্থাপন করা হয় যা একটি একক ফ্লোট মান ধারণ করে। Int
এর জন্য TwoWayConverter
দেখতে এইরকম:
val IntToVector: TwoWayConverter<Int, AnimationVector1D> = TwoWayConverter({ AnimationVector1D(it.toFloat()) }, { it.value.toInt() })
Color
মূলত 4 টি মান, লাল, সবুজ, নীল এবং আলফা এর একটি সেট, তাই Color
একটি AnimationVector4D
তে রূপান্তরিত হয় যা 4 টি ফ্লোট মান ধারণ করে। এই পদ্ধতিতে, অ্যানিমেশনগুলিতে ব্যবহৃত প্রতিটি ডেটা টাইপ এর মাত্রার উপর নির্ভর করে AnimationVector1D
, AnimationVector2D
, AnimationVector3D
, বা AnimationVector4D
তে রূপান্তরিত হয়৷ এটি বস্তুর বিভিন্ন উপাদানকে স্বাধীনভাবে অ্যানিমেটেড করার অনুমতি দেয়, প্রতিটি তাদের নিজস্ব বেগ ট্র্যাকিং সহ। Color.VectorConverter
বা Dp.VectorConverter
এর মতো রূপান্তরকারী ব্যবহার করে মৌলিক ডেটা প্রকারের জন্য অন্তর্নির্মিত রূপান্তরকারীগুলি অ্যাক্সেস করা যেতে পারে।
যখন আপনি একটি অ্যানিমেটিং মান হিসাবে একটি নতুন ডেটা টাইপের জন্য সমর্থন যোগ করতে চান, তখন আপনি নিজের TwoWayConverter
তৈরি করতে পারেন এবং এটি API এ প্রদান করতে পারেন। উদাহরণস্বরূপ, আপনি এইভাবে আপনার কাস্টম ডেটা টাইপ অ্যানিমেট করতে animateValueAsState
ব্যবহার করতে পারেন:
data class MySize(val width: Dp, val height: Dp) @Composable fun MyAnimation(targetSize: MySize) { val animSize: MySize by animateValueAsState( targetSize, TwoWayConverter( convertToVector = { size: MySize -> // Extract a float value from each of the `Dp` fields. AnimationVector2D(size.width.value, size.height.value) }, convertFromVector = { vector: AnimationVector2D -> MySize(vector.v1.dp, vector.v2.dp) } ) ) }
নিম্নলিখিত তালিকায় কিছু অন্তর্নির্মিত VectorConverter
রয়েছে:
-
Color.VectorConverter
-
Dp.VectorConverter
-
Offset.VectorConverter
-
Int.VectorConverter
-
Float.VectorConverter
-
IntSize.VectorConverter
আপনার জন্য প্রস্তাবিত
- দ্রষ্টব্য: জাভাস্ক্রিপ্ট বন্ধ থাকলে লিঙ্ক টেক্সট প্রদর্শিত হয়
- মান-ভিত্তিক অ্যানিমেশন
- পুনরাবৃত্তিমূলক কোড ডেভেলপমেন্ট {:#iterative-code-dev }
- রচনায় অ্যানিমেশন