يمكن أن تضيف الصور المتحركة إشارات مرئية تُعلم المستخدمين بما يحدث في تطبيقك، وهي مفيدة بشكل خاص عند تغيير حالة واجهة المستخدم، مثلاً عند تحميل محتوى جديد أو توفُّر إجراءات جديدة. تضيف الرسوم المتحركة أيضًا مظهرًا أنيقًا إلى تطبيقك، ما يمنحه مظهرًا وملمسًا عالي الجودة.
يتضمّن نظام التشغيل Android واجهات برمجة تطبيقات مختلفة للصور المتحركة، وذلك حسب نوع الصورة المتحركة التي تريدها. تقدّم هذه المستندات نظرة عامة على الطرق المختلفة التي يمكنك من خلالها إضافة الحركة إلى واجهة المستخدم.
لمعرفة المزيد حول الحالات التي يجب فيها استخدام الصور المتحركة، يمكنك أيضًا الاطّلاع على دليل Material Design حول الحركة.
تحريك الصور النقطية
الشكل 1. عنصر قابل للرسم المتحرّك
لتحريك رسم نقطي مثل رمز أو صورة توضيحية، استخدِم واجهات برمجة التطبيقات الخاصة بالرسومات القابلة للرسم. عادةً، يتم تحديد هذه الصور المتحركة بشكل ثابت باستخدام مورد قابل للرسم، ولكن يمكنك أيضًا تحديد سلوك الصورة المتحركة في وقت التشغيل.
على سبيل المثال، إحدى الطرق الجيدة لإعلام المستخدم بأنّ إجراءَين مرتبطَين ببعضهما هي تحريك زر التشغيل ليتحوّل إلى زر الإيقاف المؤقت عند النقر عليه.
لمزيد من المعلومات، يُرجى الاطّلاع على رسومات قابلة للرسم المتحرّك.
تحريك مستوى ظهور واجهة المستخدم وحركتها
الشكل 2. تساهم الصورة المتحركة البسيطة التي تظهر عند ظهور مربّع حوار واختفائه في جعل التغيير في واجهة المستخدم أقل إزعاجًا.
عندما تحتاج إلى تغيير مستوى ظهور طرق العرض أو موضعها في التصميم، من الأفضل تضمين رسوم متحركة بسيطة لمساعدة المستخدم في فهم كيفية تغيُّر واجهة المستخدم.
لنقل طرق العرض أو إظهارها أو إخفائها ضمن التنسيق الحالي، يمكنك استخدام نظام الرسوم المتحركة الخاص بالخصائص الذي توفّره حزمة android.animation، والمتوفّر في الإصدار 3.0 من نظام التشغيل Android (المستوى 11 من واجهة برمجة التطبيقات) والإصدارات الأحدث. تعدّل واجهات برمجة التطبيقات هذه خصائص عناصر View على مدار فترة زمنية، وتعيد رسم العرض بشكل مستمر مع تغيُّر الخصائص. على سبيل المثال، عند تغيير خصائص الموضع، ينتقل العرض على الشاشة. عند تغيير قيمة السمة alpha، يظهر العرض أو يختفي تدريجيًا.
لتسهيل عملية إنشاء هذه الصور المتحركة، فعِّل الصور المتحركة في التصميم، وعند تغيير مستوى ظهور أحد العروض، سيتم تطبيق صورة متحركة تلقائيًا. لمزيد من المعلومات، يُرجى الاطّلاع على التحريك التلقائي لتعديلات التصميم.
للتعرّف على كيفية إنشاء رسوم متحركة باستخدام نظام الرسوم المتحركة للسمات، يمكنك قراءة نظرة عامة على الرسوم المتحركة للسمات. يمكنك أيضًا الاطّلاع على الصفحات التالية لإنشاء رسوم متحركة شائعة:
الحركة المستندة إلى الفيزياء
الشكل 3. صورة متحركة تم إنشاؤها باستخدام ObjectAnimator
الشكل 4 صورة متحركة تم إنشاؤها باستخدام واجهات برمجة تطبيقات مستندة إلى الفيزياء
احرص على تطبيق قوانين الفيزياء على الرسوم المتحركة كلما أمكن ذلك لتبدو طبيعية. على سبيل المثال، يجب أن تحافظ على الزخم عند تغيير هدفها، وأن تجري انتقالات سلسة أثناء أي تغييرات.
لتوفير هذه السلوكيات، تتضمّن مكتبة Android المتوافقة مع الإصدارات القديمة واجهات برمجة تطبيقات للرسوم المتحركة المستندة إلى الفيزياء والتي تعتمد على قوانين الفيزياء للتحكّم في طريقة عرض الرسوم المتحركة.
في ما يلي نوعان شائعان من الصور المتحركة المستنِدة إلى الفيزياء:
الصور المتحركة غير المستنِدة إلى الفيزياء، مثل تلك التي تم إنشاؤها باستخدام واجهات برمجة التطبيقات ObjectAnimator، تكون ثابتة إلى حدّ كبير ولها مدة ثابتة. في حال تغيُّر القيمة المستهدَفة، عليك إلغاء الصورة المتحركة عند تغيُّر القيمة المستهدَفة، وإعادة ضبط الصورة المتحركة باستخدام قيمة جديدة كقيمة بدء جديدة، وإضافة القيمة المستهدَفة الجديدة. من الناحية المرئية، تؤدي هذه العملية إلى توقّف مفاجئ في الصورة المتحركة، وحركة غير متناسقة بعد ذلك، كما هو موضّح في الشكل 3.
تستند الصور المتحركة التي يتم إنشاؤها باستخدام واجهات برمجة التطبيقات للصور المتحركة المستنِدة إلى الفيزياء، مثل
DynamicAnimation، إلى
القوة. يؤدي التغيير في القيمة المستهدَفة إلى تغيير في القوة. يتم تطبيق القوة الجديدة على السرعة الحالية، ما يؤدي إلى انتقال مستمر إلى الهدف الجديد. تؤدي هذه العملية إلى إنشاء رسوم متحركة تبدو أكثر طبيعية، كما هو موضّح في الشكل 4.
تحريك تغييرات التنسيق
الشكل 5. يمكن عرض المزيد من التفاصيل من خلال حركة، وذلك إما بتغيير التصميم أو بدء نشاط جديد.
في الإصدار 4.4 من نظام التشغيل Android (المستوى 19 لواجهة برمجة التطبيقات) والإصدارات الأحدث، يمكنك استخدام إطار عمل الانتقال لإنشاء رسوم متحركة عند تبديل التنسيق ضمن النشاط أو الجزء الحالي. كل ما عليك فعله هو تحديد التنسيقَين الأوّلي والنهائي ونوع الحركة التي تريد استخدامها. بعد ذلك، يحدّد النظام ويُنفّذ رسومًا متحركة بين التصميمَين. يمكنك استخدام هذه الطريقة لتبديل واجهة المستخدم بأكملها أو لنقل بعض طرق العرض أو استبدالها فقط.
على سبيل المثال، عندما ينقر المستخدم على عنصر للاطّلاع على مزيد من المعلومات، يمكنك استبدال التصميم بتفاصيل العنصر، وتطبيق انتقال مثل الانتقال الموضّح في الشكل 5.
يتم تخزين كل من التنسيقين الأوّلي والنهائي في Scene، على الرغم من أنّه يتم عادةً تحديد المشهد الأوّلي تلقائيًا من التنسيق الحالي. يمكنك إنشاء
Transition لإخبار النظام بنوع
الرسوم المتحركة التي تريدها، ثم استدعاء
TransitionManager.go()
وسيشغّل النظام الرسوم المتحركة لتبديل التنسيقات.
لمزيد من المعلومات، راجِع تحريك تغييرات التنسيق باستخدام انتقال. للاطّلاع على نموذج الرمز البرمجي، يمكنك الانتقال إلى BasicTransition .
تحريك العناصر بين الأنشطة
في الإصدار 5.0 من نظام التشغيل Android (المستوى 21 من واجهة برمجة التطبيقات) والإصدارات الأحدث، يمكنك أيضًا إنشاء رسوم متحركة تنتقل بين الأنشطة. ويستند ذلك إلى إطار العمل نفسه الخاص بالانتقال الموصوف في القسم السابق، ولكنّه يتيح لك إنشاء رسوم متحركة بين التصاميم في أنشطة منفصلة.
يمكنك تطبيق تأثيرات متحرّكة بسيطة، مثل تمرير النشاط الجديد من الجانب أو إظهاره تدريجيًا، ولكن يمكنك أيضًا إنشاء تأثيرات متحرّكة تنتقل بين طرق العرض المشتركة في كل نشاط. على سبيل المثال، عندما ينقر المستخدم على عنصر للاطّلاع على مزيد من المعلومات، يمكنك الانتقال إلى نشاط جديد باستخدام رسم متحرك يوسّع هذا العنصر بسلاسة ليملأ الشاشة، مثل الرسم المتحرك الموضّح في الشكل 5.
كالعادة، يمكنك طلب
startActivity()،
ولكن يمكنك تمرير حزمة من الخيارات التي يوفّرها
ActivityOptions.makeSceneTransitionAnimation().
قد تتضمّن حزمة الخيارات هذه طرق عرض مشتركة بين الأنشطة، ما يتيح لإطار عمل الانتقال ربطها أثناء الحركة.
للحصول على مراجع إضافية، يُرجى الاطّلاع على: