الرسوم المتحركة Animations

الإعلانات

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

 

يمكن أن تضيف الرسوم المتحركة تلميحات مرئية، و تُخبر المستخدمين بما يجري في تطبيقك.

وهي مفيدةٍ بشكلٍ خاص، عندما تتغير حالة واجهة المستخدم، مثال، عندما يتم تحميل محتوى

جديد، أو عندما تصبح إجراءات جديدة متاحة.

 

تضيف الرسوم المتحركة أيضاً مظهراً جذاباً لتطبيقك، مما يمنحه مظهراً وجودةً أعلى.

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

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

لفهمٍ أفضل، للوقت الذي يجب فيه إستخدام الرسوم المتحركة، راجع دليل تصميم مواد الحركة.

 

 

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


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

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

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

لمزيد من المعلومات، اقرأ تحريك الرسوم المتحركة.

الشكل 1. رسومية متحركة.

 

 

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


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

لنقل، إظهار، أو إخفاء المعاينات بداخل المخطط الحالي، يمكنك إستخدام خاصية نظام الرسوم المتحركة، التي توفرها حزمة android.animation ، المتوفرة في اندرويد 3.0 (المستوى 11) والإصدارات الأحدث.

تقوم واجهات برمجة التطبيقات هذه، بتحديث خصائص كائنات View “المعاينة” الخاصة بك خلال فترة زمنية، وإعادة رسم المعاينة بإستمرار أثناء تغير الخصائص.

مثال، عندما تقوم بتغيير خصائص الموضع، تتحرك المعاينة عبر الشاشة، أو عندما تقوم بتغيير خاصية ألفا، فإن المعاينة تتلاشى أو تظهر.

لإنشاء هذه الرسوم المتحركة بأقل قدرٍ من الجهد، يمكنك تمكين الرسوم المتحركة على المخطط، حيث أنه عندما تقوم ببساطة،

بتغيير رؤية المعاينة، يتم تطبيق الرسوم المتحركة تلقائياً. لمزيد من المعلومات، راجع تحديثات مخطط يتحرك تلقائياً.

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

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

أو راجع الصفحات التالية لإنشاء الرسوم المتحركة الشائعة:

  • تغيير رؤية المعاينة بإستخدام التباين المتداخل
  • تغيير رؤية المعاينة بإستخدام التكشف الدائري
  • تمرير المعاينات بإستخدام تقليب البطاقات
  • تغيير حجم المعاينة بإستخدام حركة التكبير/التصغير

 

الحركة المستندة إلى الفيزياء

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

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

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

تعتمد على قوانين الفيزياء للتحكم في كيفية حدوث رسومياتك المتحركة.

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

  • حركة الزنبرك
  • حركة القذف

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

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

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

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

بصرياً، هذه العملية تُسبب توقفاً مفاجئاً في الرسوم المتحركة، وبالتالي تفكك الحركة، كما هو موضح في الشكل 3.

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

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

تؤدي هذه العملية إلى رسومية متحركة طبيعية أكثر، كما هو موضح في الشكل 4 أعلاه.

 

 

تغييرات مخطط الحركة


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

كل ما عليك فعله هو تحديد مخططي البداية والنهاية، ونوع الرسوم المتحركة التي تريد إستخدامها. ثم يقوم النظام بتحديد وتنفيذ الرسوم المتحركة بين المخططين.

يمكنك إستخدام هذا للتمرير إلى خارج واجهة المستخدم بالكامل أو لنقل/إستبدال بعض المعاينات فقط.

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

يتم تخزين كلٍ من مخطط البداية والنهاية في مشهد Scene، على الرغم من أن مشهد البداية يتم تحديده تلقائياً عادة من المخطط الحالي.

 

 

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

قم بعدها بإنشاء إنتقال Transition لإخبار النظام بنوع الرسم المتحرك الذي تريده، ثم إستدعي ()TransitionManager.go و

سيقوم النظام بتشغيل الرسم المتحرك لتبديل المخططات.

لمزيد من المعلومات، اقرأ التحرك بين المخططات بإستخدام الإنتقال. وللحصول على نموذج الكود، اطلع على BasicTransition.

 

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


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

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

يمكنك تطبيق رسوم متحركة بسيطة، مثل تحريك النشاط الجديد من الجانب أو تلاشيه، بل و يمكنك أيضاً إنشاء رسوم متحركة

تنتقل بين المعاينات المشتركة في كل نشاط.

مثال، عندما ينقر المستخدم على عنصر لرؤية المزيد من المعلومات، يمكنك الإنتقال إلى نشاطٍ جديد بإستخدام رسم متحرك، يقوم

بزيادة حجم هذا العنصر بسلاسة لكي يملأ الشاشة، مثل الرسوم المتحركة الموضحة في الشكل 5.

كالعادة، يمكنك إستدعاء ()startActivity، لكن بتمرير مجموعة من الخيارات المقدمة من ()ActivityOptions.makeSceneTransitionAnimation .

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

للحصول على جميع التفاصيل، راجع بدء نشاط بإستخدام رسم متحرك. ولعينة الكود، اطلع على ActivitySceneTransitionBasic.


للإطلاع على المقال باللغة الإنجليزية أضغط هنا.

الإعلانات

اترك رد