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