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

অনেক অ্যানিমেশন 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 শুরু এবং শেষ মানের মধ্যে একটি পদার্থবিদ্যা-ভিত্তিক অ্যানিমেশন তৈরি করে। এটির জন্য দুটি পরামিতি প্রয়োজন: 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

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

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

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

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

অ্যানিমেশনের শুরু স্থগিত করার জন্য আপনি delayMillis ও নির্দিষ্ট করতে পারেন।

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

আরও তথ্যের জন্য Easing দেখুন।

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 অ্যানিমেশন স্পেসিফিকেশনের পরিবর্তে 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

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

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

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

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 (শেষ) এর মধ্যে একটি মান যা অ্যানিমেশনের বর্তমান বিন্দু নির্দেশ করে।

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

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 ফাংশন প্রদান করে যা বেশিরভাগ ব্যবহারের ক্ষেত্রে প্রযোজ্য। আপনার পরিস্থিতির উপর নির্ভর করে ইজিং কী ব্যবহার করবেন সে সম্পর্কে আরও তথ্যের জন্য স্পিড - ম্যাটেরিয়াল ডিজাইন দেখুন।

• FastOutSlowInEasing
• LinearOutSlowInEasing
• FastOutLinearEasing
• LinearEasing
• CubicBezierEasing
• আরও দেখুন

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

বেশিরভাগ Compose অ্যানিমেশন 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 মূলত ৪টি মানের একটি সেট, লাল, সবুজ, নীল এবং আলফা, তাই 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 অন্তর্ভুক্ত রয়েছে:

• Color.VectorConverter
• Dp.VectorConverter
• Offset.VectorConverter
• Int.VectorConverter
• Float.VectorConverter
• IntSize.VectorConverter