تخصيص الصور المتحركة

تقبل العديد من واجهات برمجة التطبيقات للصور المتحركة مَعلمات لتخصيص سلوكها.

تخصيص الصور المتحركة باستخدام المَعلمة 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

يمكن أن تتعامل spring مع الانقطاعات بسلاسة أكبر من أنواع AnimationSpec المستندة إلى المدة، لأنّها تضمن استمرار السرعة عند تغيُّر القيمة المستهدَفة في منتصف الصور المتحركة. تُستخدَم spring كإعداد `AnimationSpec` تلقائي من قِبل العديد من واجهات برمجة التطبيقات للصور المتحركة، مثل animate*AsState وupdateTransition.

على سبيل المثال، إذا طبّقنا إعداد spring على الصورة المتحركة التالية التي يتم تشغيلها من خلال لمسة المستخدم، وعند مقاطعة الصورة المتحركة أثناء تقدّمها، يمكنك ملاحظة أنّ استخدام tween لا يستجيب بسلاسة استخدام spring.

التحريك بين قيمتَي البداية والنهاية باستخدام منحنى التسهيل مع tween

تحرّك tween بين قيمتَي البداية والنهاية على مدى durationMillis المحدّدة باستخدام منحنى التسهيل. tween هي اختصار للكلمة بين، لأنّها تنتقل بين قيمتَين.

يمكنك أيضًا تحديد delayMillis لتأجيل بدء الصورة المتحركة.

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

يُرجى الاطّلاع على التسهيل لمزيد من المعلومات.

التحريك إلى قيم محدّدة في أوقات معيّنة باستخدام keyframes

تحرّك keyframes استنادًا إلى قيم اللقطات المحدّدة في طوابع زمنية مختلفة خلال مدة الصورة المتحركة. في أي وقت، سيتم إدخال قيمة الصورة المتحركة بين قيمتَي الإطار الرئيسي. بالنسبة إلى كل من هذه الإطارات الرئيسية، يمكن تحديد التسهيل لتحديد منحنى الإدخال.

من الاختياري تحديد القيم عند 0 ملّي ثانية وفي وقت المدة. إذا لم تحدّد هذه القيم، سيتم ضبطها تلقائيًا على قيمتَي البداية والنهاية للصور المتحركة، على التوالي.

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

لإنشاء صورة متحركة تتبع منحنى سلسًا أثناء الانتقال بين القيم، يمكنك استخدام keyframesWithSplines بدلاً من keyframes مواصفات الصور المتحركة.

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

تكون الإطارات الرئيسية المستندة إلى المنحنى المفلطح مفيدة بشكل خاص لحركة العناصر ثنائية الأبعاد على الشاشة.

تعرض الفيديوهات التالية الاختلافات بين 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 (النهاية) تشير إلى النقطة الحالية في الصورة المتحركة.

التسهيل هو في الواقع دالة تأخذ قيمة جزء بين 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

توفّر Compose عدة دوال Easing مضمّنة تغطي معظم حالات الاستخدام. يُرجى الاطّلاع على السرعة - التصميم المتعدد الأبعاد لمزيد من المعلومات حول تغيير السرعة الذي يجب استخدامه استنادًا إلى السيناريو.

• FastOutSlowInEasing
• LinearOutSlowInEasing
• FastOutLinearEasing
• LinearEasing
• CubicBezierEasing
• عرض المزيد

تحريك أنواع البيانات المخصّصة من خلال التحويل من AnimationVector وإليه

تتوافق معظم واجهات برمجة التطبيقات للصور المتحركة في Compose مع Float وColor وDp وأنواع البيانات الأساسية الأخرى كقيم للصور المتحركة تلقائيًا، ولكنّك تحتاج أحيانًا إلى تحريك أنواع بيانات أخرى، بما في ذلك الأنواع المخصّصة. أثناء الصورة المتحركة، يتم تمثيل أي قيمة متحرّكة على أنّها AnimationVector. يتم تحويل القيمة إلى AnimationVector والعكس من خلال TwoWayConverter مطابق، حتى يتمكّن نظام الصور المتحركة الأساسي من التعامل معها بشكل موحّد. على سبيل المثال، يتم تمثيل Int على أنّه AnimationVector1D يحتوي على قيمة عائمة واحدة. يبدو TwoWayConverter لـ Int على النحو التالي:

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 خاص بك وتقديمه إلى واجهة برمجة التطبيقات. على سبيل المثال، يمكنك استخدام 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