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

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

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

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

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

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

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

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

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

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

إضافة تأثيرات متحركة إلى مستوى ظهور واجهة المستخدم وحركة عناصرها

الشكل 2. تساهم الصورة المتحركة البسيطة عند ظهور مربّع حوار ومغادرته في تخفيف حدة تغيير واجهة المستخدم.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

على سبيل المثال، عندما ينقر المستخدم على عنصر للاطّلاع على مزيد من المعلومات، يمكنك استبدال التنسيق بتفاصيل العنصر، مع تطبيق انتقال مثل الانتقال الموضَّح في الشكل 5.

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

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

الانتقال بين الأنشطة

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

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

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

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