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

অনেক অ্যানিমেশন 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),
    label = "alpha"
)
AnimationSnippets.kt

বিভিন্ন ধরণের অ্যানিমেশন তৈরি করার জন্য বিভিন্ন ধরণের 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
    ),
    label = "spring spec"
)
AnimationSnippets.kt

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
    ),
    label = "tween delay"
)
AnimationSnippets.kt

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

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

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

0 ms এবং সময়কালের সময়ে মানগুলি নির্দিষ্ট করা ঐচ্ছিক৷ আপনি যদি এই মানগুলি নির্দিষ্ট না করেন তবে এগুলি যথাক্রমে অ্যানিমেশনের শুরু এবং শেষ মানগুলিতে ডিফল্ট হয়৷ 

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

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
    ),
    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 ব্যবহার করে। এটি অ্যানিমেটিং মানকে স্থির হারে চলার পরিবর্তে গতি বাড়াতে এবং ধীর করার অনুমতি দেয়। ভগ্নাংশ হল 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
        ),
        label = "custom easing"
    )
    // ……
}
AnimationSnippets.kt

কম্পোজ বেশ কিছু বিল্ট-ইন Easing ফাংশন প্রদান করে যা বেশিরভাগ ব্যবহারের ক্ষেত্রে কভার করে। আপনার দৃশ্যকল্পের উপর নির্ভর করে কী ব্যবহার করতে সহজ সে সম্পর্কে আরও তথ্যের জন্য গতি - উপাদান ডিজাইন দেখুন।

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

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

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

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)
            }
        ),
        label = "size"
    )
}
AnimationSnippets.kt

নিম্নলিখিত তালিকায় কিছু অন্তর্নির্মিত VectorConverter রয়েছে:

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