Jetpack Compose Academy · درس

‏updateTransition للحركة المنسقة

حرّك عدة قيم انطلاقًا من حالة واحدة

الدرس 3 من 413 خطوة

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

تحريك عدة قيم معًا

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

البدء من حالة

أنشئوا انتقالًا بتمرير حالتكم الحالية إلى updateTransition. يراقبها Compose ويحرّك كل الرسوم المتحركة التابعة عند تغيّر الحالة.

val transition = updateTransition(targetState = expanded)

اشتقاق القيم المتحركة

اطلبوا من الانتقال كل قيمة باستخدام animateDp وanimateColor وما شابه. ومرّروا lambda تربط كل حالة بهدفها.

val size by transition.animateDp { if (it) 200.dp else 80.dp }

قيم متعددة، ومصدر واحد

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

val corner by transition.animateDp { if (it) 0.dp else 24.dp }

تنسيق مثالي

بما أنها تشترك في انتقال واحد، تبقى القيم متزامنة تمامًا. فلا يوجد خطر من انتهاء تغيير الحجم قبل اللون، كما قد يحدث مع استدعاءات animateAsState المنفصلة.

استخدام القيم في المعدِّلات

اقرؤوا كل قيمة متحركة كما تقرؤون الحالة العادية وطبّقوها. وسيتحول العنصر بأكمله بسلاسة أثناء تشغيل الانتقال في كل إطار.

Box(Modifier.size(size).clip(RoundedCornerShape(corner)))

توقيت مستقل لكل قيمة

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

transition.animateDp(transitionSpec = { tween(600) }) { ... }

أكثر من حالتين

يمكن أن تكون حالتك enum، وليست قيمة منطقية فقط. اربط كل حالة بهدف، وستتحرك الانتقالية بينها جميعًا.

enum class BoxState { Collapsed, Half, Expanded }

فحص الحالة الحالية والهدف

تتيح الانتقالية الوصول إلى currentState وtargetState. ويمكنك التحقق مما إذا كانت الحركة لا تزال جارية أو استقرت عند الهدف.

متى تستخدمها

اختر updateTransition عندما ينبغي لحدث واحد تشغيل مجموعة من التغييرات المنسقة، مثل توسيع بطاقة مع تغيّر لونها وارتفاعها الظاهري معًا. 🎬

أخف من استدعاءات عديدة

يُعد تجميع الرسوم المتحركة ضمن transition أنظف وأسهل في الفهم من إدارة عدة قيم مستقلة من animate*AsState.

اختبار سريع

ما الفائدة الأساسية من updateTransition مقارنةً باستدعاءات animate*AsState المنفصلة؟

أجب عليها في الدرس التفاعلي

مراجعة: حالة واحدة وحركات متعددة

تعلّمت استخدام updateTransition لاشتقاق عدة قيم متحركة من حالة واحدة، بحيث تتحرك بانسجام تام، مع توقيت خاص بكل قيمة. 🎉

البدء مجانًا

تعلم Kotlin مع معلم ذكاء اصطناعي — مجانًا

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

الدورات: 30
الدروس: 120

ابدأ التعلم مجانًا عرض الدورة الكاملة

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

هل درس «‏updateTransition للحركة المنسقة» مجاني؟

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

ماذا ستتعلم في «‏updateTransition للحركة المنسقة»؟

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

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

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

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

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

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

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

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

← العودة إلى Jetpack Compose Academy