অ্যানিমেশন কাস্টমাইজ করুন

অনেক অ্যানিমেশন এপিআই তাদের আচরণ কাস্টমাইজ করার জন্য সাধারণত প্যারামিটার গ্রহণ করে থাকে।

AnimationSpec প্যারামিটার ব্যবহার করে অ্যানিমেশন কাস্টমাইজ করুন।

বেশিরভাগ অ্যানিমেশন এপিআই ডেভেলপারদের একটি ঐচ্ছিক 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),
    label = "alpha"
)
AnimationSnippets.kt

বিভিন্ন ধরনের অ্যানিমেশন তৈরি করার জন্য বিভিন্ন প্রকারের AnimationSpec রয়েছে।

spring ব্যবহার করে পদার্থবিদ্যা-ভিত্তিক অ্যানিমেশন তৈরি করুন

spring শুরু এবং শেষ মানের মধ্যে একটি পদার্থবিদ্যা-ভিত্তিক অ্যানিমেশন তৈরি করে। এটি দুটি প্যারামিটার গ্রহণ করে: dampingRatio এবং stiffness ।

dampingRatio নির্ধারণ করে স্প্রিংটি কতটা নমনীয় হবে। এর ডিফল্ট মান হলো Spring.DampingRatioNoBouncy ।

চিত্র ১। বিভিন্ন স্প্রিং ড্যাম্পিং অনুপাত নির্ধারণ।

stiffness নির্ধারণ করে যে স্প্রিংটি তার শেষ মানের দিকে কত দ্রুত অগ্রসর হবে। এর ডিফল্ট মান হলো Spring.StiffnessMedium ।

চিত্র ২। বিভিন্ন স্প্রিং দৃঢ়তা নির্ধারণ করা। 

val value by animateFloatAsState(
    targetValue = 1f,
    animationSpec = spring(
        dampingRatio = Spring.DampingRatioHighBouncy,
        stiffness = Spring.StiffnessMedium
    ),
    label = "spring spec"
)
AnimationSnippets.kt

ডিউরেশন-ভিত্তিক AnimationSpec টাইপগুলোর তুলনায় spring আরও মসৃণভাবে বাধা সামলাতে পারে, কারণ এটি অ্যানিমেশনের মাঝে টার্গেট ভ্যালু পরিবর্তিত হলেও ভেলোসিটির ধারাবাহিকতা নিশ্চিত করে। animate*AsState এবং updateTransition এর মতো অনেক অ্যানিমেশন API-তে spring ডিফল্ট AnimationSpec হিসেবে ব্যবহার করা হয়।

উদাহরণস্বরূপ, যদি আমরা ব্যবহারকারীর স্পর্শ দ্বারা চালিত নিম্নলিখিত অ্যানিমেশনটিতে একটি spring কনফিগ প্রয়োগ করি, তাহলে অ্যানিমেশনটি চলার সময় বাধা দিলে আপনি দেখতে পাবেন যে tween ব্যবহার করলে spring ব্যবহারের মতো মসৃণভাবে সাড়া দেয় না।

চিত্র ৩। অ্যানিমেশনের জন্য tween ও spring স্পেসিফিকেশন নির্ধারণ করা এবং তা বাধাগ্রস্ত করা।

tween ব্যবহার করে ইজিং কার্ভের সাহায্যে শুরু এবং শেষ মানের মধ্যে অ্যানিমেট করুন।

tween একটি ইজিং কার্ভ ব্যবহার করে নির্দিষ্ট durationMillis ধরে শুরু এবং শেষের মানের মধ্যে অ্যানিমেট করে। tween 'between' শব্দের সংক্ষিপ্ত রূপ, কারণ এটি দুটি মানের মধ্যে চলাচল করে।

অ্যানিমেশনের শুরু বিলম্বিত করতে আপনি delayMillis ও নির্দিষ্ট করতে পারেন। 

val value by animateFloatAsState(
    targetValue = 1f,
    animationSpec = tween(
        durationMillis = 300,
        delayMillis = 50,
        easing = LinearOutSlowInEasing
    ),
    label = "tween delay"
)
AnimationSnippets.kt

আরও তথ্যের জন্য ইজিং দেখুন।

keyframes ব্যবহার করে নির্দিষ্ট সময়ে নির্দিষ্ট মানে অ্যানিমেট করুন

keyframes অ্যানিমেশনের সময়কালে বিভিন্ন টাইমস্ট্যাম্পে নির্দিষ্ট করা স্ন্যাপশট মানগুলোর উপর ভিত্তি করে অ্যানিমেট করে। যেকোনো নির্দিষ্ট সময়ে, অ্যানিমেশনের মান দুটি কীফ্রেম মানের মধ্যে ইন্টারপোলেট করা হবে। এই প্রতিটি কীফ্রেমের জন্য, ইন্টারপোলেশন কার্ভ নির্ধারণ করতে ইজিং (Easing) নির্দিষ্ট করা যেতে পারে।

০ মিলিসেকেন্ডে এবং নির্দিষ্ট সময়কালে মানগুলো উল্লেখ করা ঐচ্ছিক। আপনি যদি এই মানগুলো উল্লেখ না করেন, তবে সেগুলো ডিফল্টভাবে যথাক্রমে অ্যানিমেশনের শুরু এবং শেষের মান হিসেবে গণ্য হবে। 

val value by animateFloatAsState(
    targetValue = 1f,
    animationSpec = keyframes {
        durationMillis = 375
        0.0f at 0 using LinearOutSlowInEasing // for 0-15 ms
        0.2f at 15 using FastOutLinearInEasing // for 15-75 ms
        0.4f at 75 // ms
        0.4f at 225 // ms
    },
    label = "keyframe"
)
AnimationSnippets.kt

keyframesWithSplines ব্যবহার করে কীফ্রেমগুলোর মধ্যে মসৃণভাবে অ্যানিমেট করুন।

এমন একটি অ্যানিমেশন তৈরি করতে যা বিভিন্ন মানের মধ্যে পরিবর্তনের সময় একটি মসৃণ বক্ররেখা অনুসরণ করে, আপনি keyframes animation specs-এর পরিবর্তে keyframesWithSplines ব্যবহার করতে পারেন। 

val offset by animateOffsetAsState(
    targetValue = Offset(300f, 300f),
    animationSpec = keyframesWithSpline {
        durationMillis = 6000
        Offset(0f, 0f) at 0
        Offset(150f, 200f) atFraction 0.5f
        Offset(0f, 100f) atFraction 0.7f
    }
)
AnimationSnippets.kt

স্ক্রিনে থাকা আইটেমগুলোর দ্বিমাত্রিক চলাচলের জন্য স্প্লাইন-ভিত্তিক কীফ্রেম বিশেষভাবে উপযোগী।

একটি বৃত্তের জন্য নির্ধারিত একই x, y স্থানাঙ্কের সেট দেওয়া থাকলে, নিম্নলিখিত ভিডিওগুলিতে keyframes এবং keyframesWithSpline এর মধ্যেকার পার্থক্য তুলে ধরা হয়েছে।

keyframes keyframesWithSplines

যেমনটা দেখতে পাচ্ছেন, স্প্লাইন-ভিত্তিক কীফ্রেমগুলো পয়েন্টগুলোর মধ্যে মসৃণ ট্রানজিশন প্রদান করে, কারণ এগুলো আইটেমগুলোর মধ্যে মসৃণভাবে অ্যানিমেট করার জন্য বেজিয়ার কার্ভ ব্যবহার করে। এই স্পেকটি একটি প্রিসেট অ্যানিমেশনের জন্য উপযোগী। তবে, আপনি যদি ইউজার-ড্রাইভেন পয়েন্ট নিয়ে কাজ করেন, তাহলে পয়েন্টগুলোর মধ্যে একই রকম মসৃণতা অর্জনের জন্য স্প্রিং ব্যবহার করা শ্রেয়, কারণ সেগুলো ইন্টারাপ্ট করা যায়।

repeatable অ্যানিমেশনটি বারবার চালান।

repeatable একটি সময়কাল-ভিত্তিক অ্যানিমেশন (যেমন tween বা keyframes ) নির্দিষ্ট পুনরাবৃত্তির সংখ্যায় না পৌঁছানো পর্যন্ত বারবার চালায়। অ্যানিমেশনটি শুরু থেকে ( RepeatMode.Restart ) নাকি শেষ থেকে ( RepeatMode.Reverse ) পুনরাবৃত্তি হবে, তা নির্দিষ্ট করতে আপনি repeatMode প্যারামিটারটি পাস করতে পারেন। 

val value by animateFloatAsState(
    targetValue = 1f,
    animationSpec = repeatable(
        iterations = 3,
        animation = tween(durationMillis = 300),
        repeatMode = RepeatMode.Reverse
    ),
    label = "repeatable spec"
)
AnimationSnippets.kt

infiniteRepeatable ব্যবহার করে একটি অ্যানিমেশনকে অনির্দিষ্টকালের জন্য পুনরাবৃত্তি করুন।

infiniteRepeatable অনেকটা repeatable মতোই, কিন্তু এটি অসীম সংখ্যক বার পুনরাবৃত্তি করে। 

val value by animateFloatAsState(
    targetValue = 1f,
    animationSpec = infiniteRepeatable(
        animation = tween(durationMillis = 300),
        repeatMode = RepeatMode.Reverse
    ),
    label = "infinite repeatable"
)
AnimationSnippets.kt

ComposeTestRule ব্যবহার করে করা টেস্টে, infiniteRepeatable ব্যবহার করে তৈরি অ্যানিমেশনগুলো রান হয় না। প্রতিটি অ্যানিমেটেড ভ্যালুর প্রাথমিক মান ব্যবহার করে কম্পোনেন্টটি রেন্ডার করা হবে।

snap মাধ্যমে অবিলম্বে শেষ মানে চলে যান।

snap হলো একটি বিশেষ AnimationSpec যা তাৎক্ষণিকভাবে মানটিকে শেষ মানে পরিবর্তন করে দেয়। অ্যানিমেশনের শুরু বিলম্বিত করার জন্য আপনি delayMillis নির্দিষ্ট করতে পারেন। 

val value by animateFloatAsState(
    targetValue = 1f,
    animationSpec = snap(delayMillis = 50),
    label = "snap spec"
)
AnimationSnippets.kt

একটি কাস্টম ইজিং ফাংশন সেট করুন

সময়কাল-ভিত্তিক AnimationSpec অপারেশনগুলো (যেমন tween বা keyframes ) একটি অ্যানিমেশনের ফ্র্যাকশন সামঞ্জস্য করতে Easing ব্যবহার করে। এটি অ্যানিমেটিং মানটিকে একটি ধ্রুবক হারে চলার পরিবর্তে দ্রুত বা ধীর হতে সাহায্য করে। ফ্র্যাকশন হলো ০ (শুরু) এবং ১.০ (শেষ)-এর মধ্যে একটি মান, যা অ্যানিমেশনের বর্তমান বিন্দু নির্দেশ করে।

ইজিং (Easing) আসলে একটি ফাংশন যা ০ এবং ১.০-এর মধ্যে একটি ভগ্নাংশ মান গ্রহণ করে এবং একটি ফ্লোট মান ফেরত দেয়। ফেরত আসা মানটি সীমার বাইরে থাকতে পারে, যা ওভারশুট বা আন্ডারশুট নির্দেশ করে। নিচের কোডের মতো করে একটি কাস্টম ইজিং তৈরি করা যেতে পারে। 

val CustomEasing = Easing { fraction -> fraction * fraction }

@Composable
fun EasingUsage() {
    val value by animateFloatAsState(
        targetValue = 1f,
        animationSpec = tween(
            durationMillis = 300,
            easing = CustomEasing
        ),
        label = "custom easing"
    )
    // ……
}
AnimationSnippets.kt

Compose-এ বেশ কিছু বিল্ট-ইন Easing ফাংশন রয়েছে যা বেশিরভাগ ব্যবহারের ক্ষেত্রেই কার্যকর। আপনার পরিস্থিতি অনুযায়ী কোন Easing ব্যবহার করতে হবে, সে সম্পর্কে আরও তথ্যের জন্য Speed ​​- Material Design দেখুন।

AnimationVector-এ রূপান্তর করে এবং AnimationVector থেকে রূপান্তর করে কাস্টম ডেটা টাইপগুলিকে অ্যানিমেট করুন।

বেশিরভাগ Compose অ্যানিমেশন API ডিফল্টরূপে অ্যানিমেশন ভ্যালু হিসেবে Float , Color , Dp এবং অন্যান্য বেসিক ডেটা টাইপ সমর্থন করে, কিন্তু কখনও কখনও আপনার কাস্টম ডেটা টাইপ সহ অন্যান্য ডেটা টাইপ অ্যানিমেট করার প্রয়োজন হতে পারে। অ্যানিমেশনের সময়, যেকোনো অ্যানিমেটিং ভ্যালুকে একটি AnimationVector হিসেবে উপস্থাপন করা হয়। ভ্যালুটিকে একটি AnimationVector এ এবং এর বিপরীতে একটি সংশ্লিষ্ট TwoWayConverter দ্বারা রূপান্তর করা হয়, যাতে কোর অ্যানিমেশন সিস্টেম সেগুলোকে একইভাবে পরিচালনা করতে পারে। উদাহরণস্বরূপ, একটি Int একটি AnimationVector1D হিসেবে উপস্থাপন করা হয় যা একটি একক float ভ্যালু ধারণ করে। Int এর জন্য TwoWayConverter দেখতে এইরকম: 

val IntToVector: TwoWayConverter<Int, AnimationVector1D> =
    TwoWayConverter({ AnimationVector1D(it.toFloat()) }, { it.value.toInt() })
AnimationSnippets.kt

Color মূলত লাল, সবুজ, নীল এবং আলফা—এই চারটি মানের একটি সেট, তাই Color একটি AnimationVector4D তে রূপান্তর করা হয় যা চারটি ফ্লোট মান ধারণ করে। এইভাবে, অ্যানিমেশনে ব্যবহৃত প্রতিটি ডেটা টাইপ তার ডাইমেনশনালিটির উপর নির্ভর করে 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)
            }
        ),
        label = "size"
    )
}
AnimationSnippets.kt

নিম্নলিখিত তালিকায় কিছু বিল্ট-ইন VectorConverter অন্তর্ভুক্ত রয়েছে:

{% হুবহু %} {% endverbatim %} {% হুবহু %} {% endverbatim %}
পূর্ববর্তী
অ্যানিমেটেড ভেক্টর ছবি
পরবর্তী
পরীক্ষা অ্যানিমেশন