Android Academy · درس

لماذا تهم الرسوم المتحركة

حركة ترشد المستخدمين وتمنحهم تجربة ممتعة

لماذا تهم الرسوم المتحركة درس مجاني في Android Academy على CoddyKit. هذا هو الدرس 1 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Android Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Android Academy 4 دروس في المجموع.

حركة ذات هدف

الرسوم المتحركة أكثر من مجرد تحسينات بصرية. ففي تطبيق Android رائع، توجّه الحركة الانتباه، وتشرح ما تغيّر، وتجعل واجهة المستخدم تبدو سريعة الاستجابة وحيوية.

في هذه الدورة ستتعلّم واجهات API الخاصة بالرسوم المتحركة في Jetpack Compose، بدءًا من المساعدات ذات السطر الواحد animate*AsState، وصولًا إلى AnimatedVisibility والانتقالات والنوابض المعتمدة على الفيزياء.

يتناول هذا الدرس الأول سبب استخدام الرسوم المتحركة ووقت استخدامها، حتى تؤدي حركتك دائمًا وظيفة واضحة.

ينفّذ Compose الرسوم المتحركة بطريقة تصريحية

في Compose لا تبدأ الرسوم المتحركة وتوقفها يدويًا إطارًا بعد إطار. بدلًا من ذلك، تصف قيمة مستهدفة، وينفّذ Compose حركة سلسة نحوها كلما تغيّرت تلك القيمة.

هنا يتحكم في لون مربع كائن حالة منطقي واحد. ويؤدي النقر إلى تبديل الحالة، فينساب اللون تلقائيًا.

@Composable
fun ColorBox() {
    var selected by remember { mutableStateOf(false) }
    val color by animateColorAsState(
        targetValue = if (selected) Color.Green else Color.Gray,
        label = "box-color"
    )
    Box(
        Modifier
            .size(120.dp)
            .background(color)
            .clickable { selected = !selected }
    )
}

تقديم ملاحظات حول إجراءات المستخدم

من أهم وظائف الحركة تقديم الملاحظات. فعندما ينقر المستخدم على زر أو يبدّل مفتاحًا، تؤكد حركة صغيرة أن التطبيق تلقّى الإجراء.

تبدو التغييرات الفورية والمفاجئة معطّلة، بينما تبدو الانتقالية السريعة التي تستغرق 150-300ms متقنة. ينكمش الزر هنا قليلًا أثناء الضغط عليه.

@Composable
fun PressableButton(onClick: () -> Unit) {
    var pressed by remember { mutableStateOf(false) }
    val scale by animateFloatAsState(
        targetValue = if (pressed) 0.92f else 1f,
        label = "press-scale"
    )
    Button(
        onClick = onClick,
        modifier = Modifier.graphicsLayer {
            scaleX = scale; scaleY = scale
        }
    ) { Text("Tap me") }
}

شرح تغييرات الحالة

عندما تتغير واجهة المستخدم، تساعد الرسوم المتحركة المستخدم على فهم ما حدث للتو. فالعنصر الذي يتلاشى ويظهر بانزلاق يُفهم على أنه «جديد»، بينما يُفهم العنصر الذي يتلاشى على أنه «أُزيل».

من دون الحركة، قد يظهر المحتوى أو يختفي فجأة، مما يربك المستخدمين بشأن ما إذا كان شيء ما قد ظهر أو اختفى أو تحرك.

@Composable
fun Banner(visible: Boolean) {
    AnimatedVisibility(
        visible = visible,
        enter = fadeIn() + slideInVertically(),
        exit = fadeOut() + slideOutVertically()
    ) {
        Text("Saved successfully!")
    }
}

الاستمرارية والإحساس بالمكان

تحافظ الحركة على الاستمرارية. فعندما تتمدد بطاقة أو ينتقل عنصر إلى موضع جديد، يحافظ تحريك التغيير على إدراك المستخدم لموضعه في المساحة.

يمكن لـ Compose تحريك تغييرات التخطيط تلقائيًا باستخدام Modifier.animateContentSize()، بحيث يكبر المربع أو يصغر بسلاسة عند تغير محتواه.

@Composable
fun ExpandableCard(expanded: Boolean) {
    Column(
        Modifier
            .fillMaxWidth()
            .animateContentSize()
            .padding(16.dp)
    ) {
        Text("Title", style = MaterialTheme.typography.titleMedium)
        if (expanded) {
            Text("Here is the longer body that appears when expanded.")
        }
    }
}

المدة والتوقيت مهمّان

تكون الرسوم المتحركة الجيدة سريعة. ينبغي أن تستغرق معظم انتقالات واجهة المستخدم نحو 150ms إلى 400ms. فإذا كانت بطيئة جدًا بدا التطبيق متثاقلًا، وإذا كانت سريعة جدًا أصبحت الحركة غير مرئية.

يتيح لك Compose ضبط المدة والإيقاع باستخدام tween ومنحنى easing. ويجعل التدرّج الحركة طبيعية عبر تسريعها وإبطائها.

val offset by animateDpAsState(
    targetValue = if (open) 0.dp else 200.dp,
    animationSpec = tween(
        durationMillis = 300,
        easing = FastOutSlowInEasing
    ),
    label = "panel-offset"
)

لا تُفرط في استخدامها

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

قواعد عامة:

حرّك العناصر للتوضيح، لا للزينة.
اجعل الانتقالات قصيرة وهادئة.
تجنب تحريك كل ما يظهر على الشاشة في الوقت نفسه.
لا تمنع المستخدم من التفاعل أثناء تنفيذ الحركة.

احترم إمكانية الوصول

يفعّل بعض المستخدمين خيار إزالة الرسوم المتحركة في إعدادات النظام بسبب حساسيتهم تجاه الحركة. وينبغي للتطبيق الذي يراعي المستخدمين احترام هذا التفضيل.

يمكنك قراءة ما إذا كان قد تم ضبط مقياس الرسوم المتحركة على الصفر، ثم تقليل الحركة غير الأساسية أو تعطيلها وفقًا لذلك.

@Composable
fun rememberReduceMotion(): Boolean {
    val context = LocalContext.current
    val scale = Settings.Global.getFloat(
        context.contentResolver,
        Settings.Global.ANIMATOR_DURATION_SCALE,
        1f
    )
    return scale == 0f
}

صندوق أدوات الرسوم المتحركة في Compose

يقدّم Compose مجموعة متدرجة من واجهات برمجة تطبيقات الرسوم المتحركة. ستتعرّفون إليها خلال هذه الدورة:

animate*AsState - لتحريك قيمة واحدة (مثل اللون أو الحجم أو العدد العشري).
AnimatedVisibility - لتحريك الظهور والاختفاء.
updateTransition - لتنسيق عدة قيم معًا.
AnimatedContent - للانتقال التدريجي بين محتويات مختلفة.
Animatable وspring - للتحكم منخفض المستوى المستند إلى الفيزياء.

ابدؤوا بواجهات المستوى العالي، ولا تنتقلوا إلى المستوى الأدنى إلا عند الحاجة إلى مزيد من التحكم.

الرسوم المتحركة تتبع الحالة

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

وهذا يعني أنكم نادرًا ما تكتبون مخططًا زمنيًا. فأنتم تعلنون أن «هذه الخاصية يجب أن تساوي X»، ويتولى Compose إنشاء الإطارات الوسيطة نيابةً عنكم.

@Composable
fun FadingText(highlighted: Boolean) {
    val alpha by animateFloatAsState(
        targetValue = if (highlighted) 1f else 0.4f,
        label = "text-alpha"
    )
    Text(
        "Status",
        modifier = Modifier.graphicsLayer { this.alpha = alpha }
    )
}

تمهيد سريع باستخدام Kotlin الخالصة

تُجري الرسوم المتحركة استيفاءً بين القيم. وفي جوهرها، لا يتطلب ذلك سوى الرياضيات: إذ تمزج قيمة كسرية t من 0 إلى 1 بين قيمة بداية وقيمة نهاية. وتقوم هذه الفكرة، المسماة الاستيفاء الخطي أو lerp، عليها كل رسوم متحركة ستكتبونها.

يوضح هذا المقطع الصغير من Kotlin الخالصة المفهوم الذي يطبّقه Compose مرات عديدة في الثانية.

fun lerp(start: Float, end: Float, t: Float): Float =
    start + (end - start) * t

fun main() {
    for (i in 0..4) {
        val t = i / 4f
        println("t=$t -> ${lerp(0f, 100f, t)}")
    }
}

تحقق سريع

ما النموذج الذهني الأساسي للرسوم المتحركة في Jetpack Compose؟

مراجعة: الحركة ذات المعنى

أصبحتم تعرفون الآن سبب أهمية الرسوم المتحركة والنموذج الذي تقوم عليه:

توفّر الحركة تغذية راجعة، وتشرح التغييرات، وتحافظ على الاستمرارية.
رسوم Compose المتحركة تصريحية وتتبع الحالة.
اجعلوا الانتقالات قصيرة (≈150-400ms) وهادفة، ولا تفرطوا في استخدامها.
راعوا المستخدمين الذين يقلّلون الحركة لأسباب تتعلق بإمكانية الوصول.
ابدؤوا بواجهات المستوى العالي: animate*AsState وAnimatedVisibility والانتقالات وعمليات spring.

التالي: تحريك القيم المفردة باستخدام عائلة animate*AsState.

الأسئلة الشائعة

هل درس «لماذا تهم الرسوم المتحركة» مجاني؟

نعم — نص درس «لماذا تهم الرسوم المتحركة» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Android Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Android Academy 4 دروس في المجموع.

ماذا ستتعلم في «لماذا تهم الرسوم المتحركة»؟

حركة ترشد المستخدمين وتمنحهم تجربة ممتعة تتمرن على Android Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ Android Academy؟

لا تُشترط خبرة سابقة. Android Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 4.

كم من الوقت يستغرق درس «لماذا تهم الرسوم المتحركة»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس Android Academy هذا؟

نعم. كل درس في Android Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى Android Academy