مقدمة حول الرسوم المتحركة

تجربة طريقة ComposeAllowed
Jetpack Compose هي مجموعة أدوات واجهة المستخدم التي ننصح بها لنظام التشغيل Android. تعرَّف على كيفية استخدام "الصور المتحركة" في Compose.

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

يشتمل Android على واجهات برمجة تطبيقات مختلفة للصور المتحركة بناءً على نوع الصور المتحركة الذي تريده. توفر هذه الوثائق نظرة عامة على الطرق المختلفة التي يمكنك من خلالها إضافة حركة إلى واجهة المستخدم لديك.

لمعرفة متى يجب استخدام الصور المتحركة بشكل أفضل، يمكنك أيضًا الاطّلاع على دليل التصميم المتعدد الأبعاد حول الحركة.

تحريك الصور النقطية

الشكل 1. صورة متحركة قابلة للرسم

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

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

لمزيد من المعلومات، يُرجى الاطّلاع على مقالة إضفاء الحركة على الرسومات القابلة للرسم.

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

الشكل 2. الرسوم المتحركة الطفيفة عند ظهور مربع حوار واختفائه تجعل تغيير واجهة المستخدم أقل إرباكًا.

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

لنقل طرق العرض أو إظهارها أو إخفاؤها ضمن التنسيق الحالي، يمكنك استخدام نظام صور الموقع المتحركة الذي توفره حزمة android.animation والمتوفّر في Android 3.0 (المستوى 11 من واجهة برمجة التطبيقات) والإصدارات الأحدث. تعمل واجهات برمجة التطبيقات هذه على تعديل خصائص عناصر View خلال فترة زمنية معيّنة، ما يؤدي إلى إعادة رسم العرض باستمرار مع تغيُّر السمات. على سبيل المثال، عند تغيير خصائص الموضع، تتحرك طريقة العرض عبر الشاشة. عندما تقوم بتغيير خاصية ألفا، يتلاشى العرض للداخل أو الخارج.

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

للتعرّف على كيفية إنشاء صور متحركة باستخدام نظام الصور المتحركة للخصائص، يمكنك الاطّلاع على نظرة عامة على الصور المتحركة للخصائص. يمكنك أيضًا مشاهدة الصفحات التالية لإنشاء رسوم متحركة شائعة:

حركة مستنِدة إلى الفيزياء

الشكل 3. صورة متحركة تم إنشاؤها باستخدام ObjectAnimator.

الشكل 4. وهي رسوم متحركة تم إنشاؤها باستخدام واجهات برمجة التطبيقات التي تستند إلى الفيزياء.

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

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

هناك رسوم متحركة شائعة تستند إلى الفيزياء هما:

إنّ الصور المتحركة التي لا تستند إلى قوانين الفيزياء، مثل تلك التي تم إنشاؤها باستخدام واجهات برمجة تطبيقات ObjectAnimator، تكون ثابتة إلى حدٍ ما ولها مدة ثابتة. وإذا تغيّرت القيمة المستهدَفة، يجب إلغاء الحركة عند تغيير القيمة المستهدَفة، وإعادة ضبط الرسوم المتحركة بقيمة جديدة كقيمة البدء الجديدة، وإضافة القيمة المستهدَفة الجديدة. بصريًا، تنشئ هذه العملية توقفًا مفاجئًا في الرسوم المتحركة، وحركة منفصلة بعد ذلك، كما هو موضح في الشكل 3.

إنّ الصور المتحركة التي يتم إنشاؤها باستخدام واجهات برمجة تطبيقات الصور المتحركة المستندة إلى الفيزياء، مثل DynamicAnimation، يتم تحريكها من خلال القوة. يؤدّي التغيير في القيمة المستهدَفة إلى تغيير في السياسة. تنطبق القوة الجديدة على السرعة الحالية، مما يؤدي إلى انتقال مستمر إلى الهدف الجديد. ينتج عن هذه العملية رسم متحرك يبدو طبيعيًا، كما هو موضح في الشكل 4.

تحريك تغييرات التنسيق

الشكل 5. يمكن تحقيق رسم متحرك لعرض المزيد من التفاصيل إما عن طريق تغيير التخطيط أو بدء نشاط جديد.

في الإصدار Android 4.4 (المستوى 19 من واجهة برمجة التطبيقات) والإصدارات الأحدث، يمكنك استخدام إطار العمل الانتقالي لإنشاء صور متحركة عند تبديل التنسيق ضمن النشاط أو الجزء الحالي. كل ما عليك فعله هو تحديد تخطيط البداية والنهاية ونوع الرسوم المتحركة التي تريد استخدامها. ثم يكتشف النظام الرسوم المتحركة وينفذها بين التخطيطين. يمكنك استخدام هذا لتبديل واجهة المستخدم بالكامل أو لنقل بعض طرق العرض فقط أو استبدالها.

على سبيل المثال، عندما ينقر المستخدم على عنصر لمشاهدة مزيد من المعلومات، يمكنك استبدال التخطيط بتفاصيل العنصر، وتطبيق انتقال مثل الذي يظهر في الشكل 5.

يتم تخزين كل من تنسيق البداية والنهاية في Scene، ولكن يتم عادةً تحديد مشهد البداية تلقائيًا من التنسيق الحالي. يمكنك إنشاء Transition لإخبار النظام بنوع الصورة المتحركة الذي تريده، ثم استدعاء TransitionManager.go() ويشغِّل النظام الصورة المتحركة لتبديل التنسيقات.

للمزيد من المعلومات، يُرجى الاطّلاع على المقالة تحريك تغييرات التنسيق باستخدام تأثير انتقال. للحصول على نموذج للرموز البرمجية، اطّلِع على BasicTransition .

الحركة بين الأنشطة

في الإصدار 5.0 من نظام التشغيل Android (المستوى 21 من واجهة برمجة التطبيقات) والإصدارات الأحدث، يمكنك أيضًا إنشاء صور متحركة تنتقل بين أنشطتك. ويستند هذا إلى نفس إطار العمل الانتقالي الموضح في القسم السابق، ولكنه يتيح لك إنشاء رسوم متحركة بين التخطيطات في أنشطة منفصلة.

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

كالعادة، تتصل بـ startActivity()، ولكنك تُطلعه على مجموعة من الخيارات التي يوفرها ActivityOptions.makeSceneTransitionAnimation(). قد تتضمن حزمة الخيارات هذه طرق العرض التي تتم مشاركتها بين الأنشطة حتى يتمكن إطار العمل الانتقالي من ربطها أثناء الرسوم المتحركة.

للحصول على مراجِع إضافية، يُرجى الاطّلاع على: