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

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

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

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

ولفهم أفضل لأوقات استخدام الصور المتحركة، يمكنك أيضًا الاطلاع على دليل Material Design حول الحركة.

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

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

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

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

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

تحريك مستوى رؤية واجهة المستخدم وحركتها

الشكل 2. تؤدي الرسوم المتحركة الدقيقة عند ظهور مربع حوار واختفائه إلى جعل تغيير واجهة المستخدم أقل تشويشًا.

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

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

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

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

حركة قائمة على الفيزياء

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

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

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

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

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

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

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

تحريك تغييرات التصميم

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

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

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

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

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

الصور المتحركة بين الأنشطة

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

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

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

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