برمجة الأندرويد

المؤثرات الحركية فى تطبيقات الأندرويد

يقول أبو القاسم الشلبى فى قصيدة لحن الحياه :

هــو الكــونُ حـيٌّ, يحـبُّ الحيـاة ويحــتقر المَيْــتَ, مهمــا كــبُرْ
فـلا الأفْـق يحـضن ميْـتَ الطيـورِ ولا النحــلُ يلثــم ميْــتَ الزهـرْ

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

 

الإنيمشن فى الأندرويد  

الإنيمشن فى الأندرويد  أو المؤثرات الحركية فى الأندرويد يمكن تقسيمها الى ثلاث فئات :

1- View Animation

وهو نظام Animation  عبارة عن مؤثرات يتم تطبيقها على الـ View نفسه  كتطبيق مؤثر تحرك ImageView من الاعلى للأسفل على سبيل المثال أو ظهور Button من الخفاء أو عمل Scale لـ TextView معين كلها مؤثرات تتسم بأنها تطبق على الـ View مباشرة ككل .

2- Property Animation 

وهو نظام Animation عبارة عن تطبيق مؤثرات الحركة على الـ Property  على سبيل المثال تطبيق مؤثر حركى الـ background وجعلها تتحرك من لون الى اخر أو تطبيق مؤثر حركى على عرض او ارتفاع الـ View نحن هنا نتحدث عن الغوص فى تفاصيل الـ view وتحريك ما تشاء اى شىء تريد تحريكه ويخطر على بالك يمكنك فعله باستخدام الـ Property Animation  على سبيل المثال جعل سيارة تمشى داخل التطبيق أو السحب تتنقل فى السماء والطريق يتحرك تخيل اى شىء !
فالـ Property Animation متقدم أكثر عن الـ View ويمكن أن يغنيك عن الـ View Animation تماما .

3- Drawable Animation 

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

 

سنتطرق لكل نوع بشىء من التفصيل وسنبدأ اليوم بالـ View Animation .

 

الـ View Animation 

كما ذكرنا أن الـ view animation هو نظام يوفر لك عدة مؤثرات حركية يمكن تطبيقها على الـ view بشكل عامل منها الـتدوير والتكبير والتصغير والتحريك والشفافية

فسنلقى نظرة سريعة على كل نوع

تأثير الشفافية : 

يمكن إنشاء مؤثر حركى اعتمادا على الشفافية حيث يتم الانتقال من درجة الفا الى درجة اخرى مثلا من الفا 0 وتعنى ان العنصر مختفى تماما الى درجة الفا ١ وتعنى ان العنصر ظاهر بشكل كامل وبينهم تتم الحركة ابتداء من صفر وحتى الواحد كما فى الصورة التالية :

Alpha animation in android

يمكن تنفيذ التأثير السابق باستخدام xml أو جافا وسنوضح من خلال XML ..

سوف تقوم بإنشاء مجلد anim داخل مجلد res

الإنيمشن فى الأندرويد

بداخل مجلد anim قم بعمل ملف xml جديد واعطه اى اسم تحبه هنا سأسميه hendiwareanimation .

بعد إنشاء الملف ستجد أن محتوى الملف كالتالى :

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">

</set>

نقوم بتنفيذ الـشفافية عن طريق استخدام الـ tag alpha  كالتالى :

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    
    <alpha
        android:duration="1500"
        android:fromAlpha="0"
        android:toAlpha="1"/>
    
</set>

فى الكود
android:duration=”1500″ تشير الى المدة الزمنية لتطبيق التأثير بالميلى ثانية (الثانية = ١٠٠٠ ملى ثانية )
android:fromAlpha=”0″ تشير الى الفا البداية وهنا 0 تعنى ابدأ من العدم او من درجة أن العنصر مختفى تماما .
android:duration=”1500″ تشير الى الفا النهاية وهنا 1 تعنى الظهور تماما بنسبة ١٠٠٪ .

 

حسنا قمنا بصناعة الإنيمشن كيف نقوم بتطبيقه على View كـ Image أو Text ؟
يكون ذلك بتعريف انيمشن جديد فى الجافا وعمل setAnimation على الـ view  كالتالى :

  ImageView image = (ImageView)findViewById(R.id.imageView);
  Animation animation = AnimationUtils.loadAnimation(getApplicationContext(), 
  R.anim.hendiwareanimation);
  image.startAnimation(animation);

هذا كل شىء  يمكنك تشغيل التطبيق وومشاهدة التأثير .

تأثير الدوران 

يمكن تنفيذ تأثير الدوران باستخدام tag الدوران  rotate فى نفس الكود السابق الخاص بالـ animation ادخل ملف hendiwareanimation يمكننا التعديل عليه واستخدام تأثير الدوران بجانب الالفا

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">

    <alpha
        android:duration="1500"
        android:fromAlpha="0"
        android:toAlpha="1" />

    <rotate
        android:duration="3000"
        android:fromDegrees="0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:startOffset="1500"
        android:toDegrees="360" />
</set>
android:fromDegrees=”0″ تشير الى درجة بدء الدوران وهنا 0 تعنى ابدأ الدوران من الموضع الحالى . android:toDegrees=”360″ تشير الى درجة نهاية الدوران و360 معناها هنا دورة كاملة اى سيعود لموضعه الاصلى يمكنك تجربة ارقام اخرى بنفسك ورؤية النتيجة. android:pivotX=”50%” | android:pivotY=”50%” تشير الى محور الارتكاز او نقطة الاصل التى سيتم الدوران حولها قم بحذفهم من الكود وجرب وسترى النتيجة وهنا 50% تعنى المنتصف تماما  . android:startOffset=”1500″ تشير الى وقت البداية وهنا قمت باسناد القيمة 1500 ميلى ثانية اى ثانية ونصف وهى المدة التى ينتهى فيها تأثير الألفا وبالتالى يبدأ التأثير بعد انتهاء الالفا يمكنك حذفها ورؤية النتيجة ان الدوران والالفا يتم تنفيذهم معا .

باقى الموجود فى الـrotate هو نفسه الموجود فى alpha مثل المدة الزمنية  يمكنك تعديلها ورؤية النتائج .

 

 

تأثير الإنتقال من مكان لأخر 

animtion in android

فى نفس الكود السابق سوف ننفذ تأثير الإنتقال  باستخدام tag translate كالاتى :

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">

    <alpha
        android:duration="1500"
        android:fromAlpha="0"
        android:toAlpha="1" />

    <rotate
        android:duration="1500"
        android:fromDegrees="0"
        android:pivotX="50%"
        android:pivotY="50%"
         android:toDegrees="360" />

    <translate
        android:startOffset="1500"
        android:fromXDelta="-80%"
        android:toXDelta="30%"
        android:duration="1000" />
</set>

 

android:fromXDelta=”-80%” تشير الى مكان بدء الإنتقال وهنا XDelta تشير إلى المحور الافقى اى سيتحرك العنصر افقيا بدئا  من -80% اى من اليسار بعيدا عن موضعه الاصلى 80% .
 android:toXDelta=”30%” تشير الى مكان نهاية الانتقال  وهنا XDelta تشير إلى المحور الافقى ايضفا  اى سيتحرك العنصر افقيا حتى يصل مسافة 30٪ يمين موضعه الاصلى .

 

يمكنك التجربة مع YDelta بنفسك .

 

تأثير التكبير والتصغير 

 

animation  scale

يتم التكبير والتصغير باستخدام الـ scale tag

 

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">

    <alpha
        android:duration="1500"
        android:fromAlpha="0"
        android:toAlpha="1" />

    <rotate
        android:duration="1500"
        android:fromDegrees="0"
        android:pivotX="50%"
        android:pivotY="50%"
         android:toDegrees="360" />

    <translate
        android:startOffset="1500"
        android:fromXDelta="-80%"
        android:toXDelta="30%"
        android:duration="1000" />

    <scale
        android:startOffset="3500"
        android:duration="1000"
        android:fromXScale="0.5"
        android:fromYScale="0.5"
        android:toXScale="1.0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toYScale="1.0" />
</set>

 

 

أظن أن الامور بدأت تضح  لكن اريد ان انوه ان هناك خاصية تسمى android:repeatMode=”reverse” وهى تعنى خاصية تكرار التأثير تستخدم مع اى تأثير من السابق يمكنك تكرار التأثير بطريقتين restart وتعنى البدأ من البداية والتكرار أو revers ومعاناها العكس بمعنى لف 360 درجة ابتداء من 0 ثم لف 360 ابتداءا من 360 وارجع الى 0 مرة أخرى  ويلازمها عادة استخدام خاصية اخرى تسمى  android:repeatCount=”infinite” اى عدد مرات التكرار و infinite تعنى لا محدود .

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

 

السابق
كود أسرع باستخدام الـ Live Templates فى أندرويد ستوديو
التالي
إحترف الـ Custom Drawables واصنع تصاميم رائعة

16 تعليق

أضف تعليقا

  1. Ahmed Magdy قال:

    عاش يا هندى <3

    1. Hendiware قال:

      نورت التدوينة يا ابو حميد

  2. Ismail Abozeed قال:

    رائع جدا يا احمد
    ولكن اليك نصيحة من اخ
    سيكون من الاروع اذاكانت هذه التدوينة عبارة عن فديو لن يتعدى الـ 10 دقائق ولكن سيتيح الفرصة للالاف ان تشاهد وسيظل موجود لسنين تتعلم منه الناس انظر الي قناة عبدالله عيد يتم مشاهدة الفديوهات يوميا من مختلف البلاد ولكن التدونية الكتابية نعم هناك من يقراء وهناك الكثير من لا يقرأ.
    ياهندي انت بتقدم معلومات قيمة جدا ومفيدة للمبتدئين والمحترفين رجاء اجعلها بالشكل الذي يليق بما تقدمه.
    اخوك اسماعيل ابوزيد
    مجرد اقتراح.

    1. Hendiware قال:

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

  3. mohamed قال:

    شكرا جدا اخى الكريم وسعيد بتدويناتك الرائعة جزاك الله خيرا

    1. Hendiware قال:

      نورت المدونة يا محمد سعداء لانها اعجبتك ونسعى دائما لاثراء المحتوى العربى .

  4. بجد مجموعة مقالات رائعة

    ربنا يوفقك

    1. Hendiware قال:

      يارب ويوفقك ياعلاء

  5. Emra قال:

    بارك الله فيك أخونا هندي، في ميزان حسناتك إنشاء الله

    1. Hendiware قال:

      وفيك صديقنا Emra شكرا على تعليقك الجميل .

  6. خالد قال:

    راااائع رائع
    أرجو أن تستمر بالدروس الكتابية فهي أحسن بكثير من الفيديو.

    أيضاً لي طلب أن تضع اعلانات أدسنس في مدونتك أو تضع زر Donate عبر البايبال فنتمكن من دعمك وأكيد الشباب لن يمانعو فالدروس رائعة جداً جداً جداً واشكرك عالمجهود الجبار وربي يجازيك كل خير.

  7. احمد سمير قال:

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

  8. mohamed ali قال:

    شكر على الشرح الرائع ياريت حضرتك تشرح ال BroadCast …..GPS ….. Material Design

  9. عبد الغنى على قال:

    مشكور زادك الله علما

  10. Muhammed Amer قال:

    عليا الطلاق انته اجدع من ابويا

  11. يس قال:

    شكرا الله لك هذا الجهد المبارك .
    بارك الله فيك على هذا الشرح السلس.

اترك تعليقاً

هذا الموقع يستخدم Akismet للحدّ من التعليقات المزعجة والغير مرغوبة. تعرّف على كيفية معالجة بيانات تعليقك.