إضافة مؤثرات حركية للتطبيق Animation

إضافة مؤثرات حركية للتطبيق تعطيه جمال ورونق ويجذب الأنتباه إلى تطبيقك قد تكون هذه المؤثرات من خلال ملف xml أو من خلال java اليوم سنستعرض من خلال xml مجموعة من المؤثرات fade in, fade out, scale, rotate, slide up, slide down etc.,

كما بالفيديو

يبدأ التطبيق بالأكتفيتي الأساسية وهي عبارة عن ملف الجافا  وفيه أضافنا المكتبات المختلفة وربطنها بملف التصميم

وعرفنا مجموعة من الأزارا وحصلنا على Id الخاص بيهم ووضعنا إيفنت على كل زرار منهم لينتقل إلى أكتفتي جديدة من خلال Intent

حيث أننا أنشأ لكل مؤثر حركي أكتفتي خاص بيه (ملف جافا وملف تصميم و ملف للمؤثر نفسه ) داخل كل زارا أضافنا إيفنت للأنتقال لكل أكتفيتي على حدة

ملف الجافا

MainActivity

ملف التصميم

activity_main

في البداية هننشئ مجلد anim  وداخل المجلد هننشئ مجموعة من ملفات xml الخاصة بالمؤثرات الحركية

res ⇒ anim ⇒ animation.xml

2015-02-22_16-02-07

هنا مثال عن أحد المؤثرات الحركية

 ملف التأثير حركي fade in

fade_in.xml

ملف التصميم

activity_fadein

 داخل ملف الجافا

هنضيف المكتبات المختلفة

لأضافة إيفنت معين على المؤثر الحركي نفسه لابد وأن implements AnimationListener

من خلالها override methods.

onAnimationStart – وهستخدم في بداية المؤثر
onAnimationEnd – عند أنتهاء المؤثر
onAnimationRepeat – في حالة تكرار المؤثر

داخلهم بتكتب الكود الذي تريده

هنعرف المتغيرات المختلفة كالتالي

داخل

هنربط ملف التصميم بملف الجافا

نحصل على Id للزرار والنص

لأستخدام وتحميل ملف المؤثر هنستخد ملف xml الذي تم وضع المؤثر به

لأضافة إيفنت للمؤثر

لأضافة إيفنت علي الزرار وربط النص بالمؤثر

لبدء المؤثر

الكود الكامل

داخل الميثود هنظهر رسالة بأن المؤثر توقف

يمكننا كتابة اكواد داخل الميثود

أو

 FadeInActivity .java

خصائص مهمة بداخل ملف المؤثر من المفيد التعرف عليها

android:duration – المدة الزمنية للمؤثر

android:startOffset – الوقت الذي يسبق بداية المؤثر

android:interpolator – معدل التغير بالمؤثر

android:fillAfter – حالة المؤثر بعد أكتماله هل سيعود لحالته الأصلية قبل البدء ولابد وان يستخدم مع <set>وياخذ True – False

android:repeatMode – هل سيتكرار المؤثر ام لا

android:repeatCount – عدد مرات تكرار المؤثر

واذا تم وضعها infinite هيتكرار عدد لا نهائي

هنستخدم  عدة مؤثرات

1. Fade In
2. Fade Out
3. Cross Fading
4. Blink
5. Zoom In
6.  Rotate
7. Move
8. Slide Up
9. Slide Down
10. Bounce
11. Sequential Animation
12. Together Animation

 

Fade In

بتعتمد على تعريف تاج  <alpha>

ويتم زيادة القيمة من صفر إلى 1

 

Fade Out

العكس بيحصل هنا نقلل قيميتها من 1 إلى 0

 

Cross Fading

مزيج من المؤثرين السابقين

بيتم تحميل الملفين واستخدام بشكل تتابعي

 

هو عبارة عن استخدام fade out or fade in بطريقة تكرارية

هنستخدم الخصائص التالية

android:repeatCount

android:repeatMode=”reverse”

 

Zoom In

هنستخدم <scale>تاج وإعطاء القيم لكل من

pivotX=”50%” and pivotY=”50%” وذلك لعمل الزوم من الوسط

هنستخدم للتدرج  fromXScale, fromYScale ولابد أن تكون القيم الخاصة بهم أقل من قيم toXScale, toYScale

 

Zoom Out

مثلZoom in هنضع قيم toXScale, toYScale أقل من قيم fromXScale, fromYScale

 

Rotate

هنستخدم تاج <rotate>والخصائص التالية

android:fromDegrees and android:toDegrees

 

Move

هنستخدم تاج <translate>والخصائص التالية  fromXDelta, fromYDelta للتحرك من اتجاه x ونستخدم toXDelta, toYDelta للتحرك من الاتجاه y

 

Slide Up

نستخدم التاج <scale>يتحقق عند استخدام القيم الآتية android:fromYScale=”1.0″ and android:toYScale=”0.0″

 

Slide Down

هو عكس Slide Up هنبدل القيم

android:fromYScale and android:toYScale

 

Sequential Animation

عبارة عن تتابع للحركات هنستخدم android:startOffset الخاصية لأعطاء وقت قبل البدء

 

Together Animation

لتنفيذ كل الحركات مع بعض مش بشكل تتابعي هيتم كتابتهم بدون أستخدام الخاصية  android:startOffset

لكل مؤثر حركي أنشأنا ملف جافا وملف تصميم وملف للمؤثر ذاته

لابد من إضافة كل الأكتفتي في ملف manifest

لتنفيذ الفيديو لابد من تحميل المشروع وتشغيله

لتحميل المشروع من هنا

 

 

يرجي تقييم الموضوع

Facebooktwittergoogle_plusredditpinterestlinkedinmailby feather
The following two tabs change content below.

عهود على

Comments

comments

الوسوم

2 تعليقات علي “إضافة مؤثرات حركية للتطبيق Animation

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *