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