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