أساسيات الـ Animation الجزء 2

 

تعلمنا في الجزء الاول من اساسيات الـ Animation عن نوعين من الـ Function

احداهم مسؤول عن عمل الـ Animation مباشرةً والأخر في حالت اردت تنفيذ شرط عند اكتمال الـ Animation

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

لكن هناك أنواع أخرى وهذا ما سوف نتعلمه في هذا الدرس

عند كتابة UiView.animate

سوف تلاحظ وجود 4 أنواع

نوعين تحدثنا عنهم سابقا ، ونوعين لم نتحدث عنهم

في هذه الفقرة اختار هذا النوع

شاهد الصورة ولاحظ النص المكتوب في الأسفل :

الشكل النهائي سوف يكون بالشكل التالي :

 

 

معاني الـ Parameter :

withDuration : تحدثنا عنها في الدرس الماضي ومعناها كم الفترة المرادة لعمل الـ Animation
بالثانية الواحده ، ربما لاحظت بأني اضعها دائما “ثانية واحده” ولكن غالبا راح تحتاج أن تضعها من 0.5 الى 0.3 ، لانها تعتبر افضل مدة لأغلب الـ Animation

delay : هذا الخيار جديد ، ومعناه التأخير ، كم الفترة التي تريد فيها الانتظار قبل ان يبدا الـ Animation ؟
اجعله على 0.0 في حال اردت ان يبدا مباشرةً بدون تأخير

options : هذا أيضا من ضمن الخيارات الجديدة وسيكون اغلب شرحنا يتركز عليه ، لذا سيتم شرحه في الفقرة التالية

في الوقت الراهن ، الذي يفترض معرفته هو عند وضع علامة مربع الاريه [] تعني استخدم النوع الافتراضي
وأيضا باستطاعتك وضع عدة options وذلك بكتابة علامة الاريه [] ووضع عدة أنواع والفصل فيما بينهم بعلامة الفاصلة ,

completion : تم ذكره سابقا ومعناه عند اكتمال الـ Animation ماذا تريد ان تفعل ؟ ، وضعنا هنا nil لأننا لا نريد تنفيذ امرا بعد انتهاء الـ Animation .

 

أنواع الـ Options :

هناك عدة أنواع للـ Animation سوف نتطرق الى اهمها

هناك ٤ انواع رئيسية مسؤوله عن سرعة الـ Animation ، وهيا :

curveLinear : ويعني يبدا الـ Animation بنفس السرعة وينتهي بنفس السرعة (لا يحدث اختلاف في السرعة)

curveEaseIn : ويعني يبدا الـ Animation بسرعة بطيئة ومن ثم يزداد سرعته (يبدا بطئي وينتهي بسرعة)

curveEaseOut : ويعني يبدا الـ Animation بسرعة وينتهي ببطئ (يبدا بسرعة وينتهي ببطئ)

curveEaseInOut : هذا النوع هو الافتراضي،  ويعني يبدا الـ Animation ببطئ ومن ثم يسرع وينتهي ببطئ (يبدا وينتهي ببطئ)

كيف يتم كتابة الـ Options ؟

قم بكتابة علامة الـ . ومن ثم اكتب حرف c لتقوم بفلترة النتائج ولتظهر الانواع الأربعة السابقة ومن ثم اختار النوع الذي تريده

مثال لطريقة الكتابة :

 

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

لذا وجدت أفضل طريقة هي باضافتهم جميعا في صورة متحركة واحده !

سوف تلاحظ الفروقات بوضوح مع هذه الصورة :

الان سوف نتطرق لنوعين اخرين :

autorevers : باختصار هو عملية تكرار “لمره واحده” بحيث يتم عمل الـ Animation وعند الانتهاء اعادته بالعكس “مره واحده” ومن ثم يتوقف

 

لاحظ الصورة المتحركة ، ذهابا ومن ثم عودة ومن ثم التوقف في الأسفل :

repeat: هو التكرار ، يمكن تشبيه بأنه كالصورة المتحركة عندما ينتهي يعيد من البداية وهكذا (سوف تلاحظ بانه تمت عملية قطع فجائية للـ Animation)

 

 

صورة توضيحية :

ماذا اذا ثم دمج النوعين السابقين مع بعض ؟

كما ذكرت سابقا يمكن دمج عدة انواع مع بعض

وهنا لاحظ عندما ندمج الـ autorevers مع الـ repeat

النتيجه سوف تكون عملية تكرار بدون توقف ، بمعنى تكون Perfect loop

 

صورة توضيحية :

اخر خيار هو allowUserInteraction :
كما هو واضح من اسمه ، السماح بتفاعل المستخدم مع الـ view اثناء الـ Animation !

لجعل الامر واضحاً لك ، قمت بإضافة زر في داخل المربع وجعلت ابعداه بكامل المربع

ومن ثم قم بتجربة بدون استخدام خيار الـ allowUserInteraction

بكتابة الكود التالي :

 

 

شاهد الصورة التالية :

ولاحظ باني لم استطع الضغط على الزر اثناء الـ Animation
ولكن استطعت فقط الضغط على الزر قبل بداية الـ Animation وبعد انتهائه

بعد إضافة خيار allowUserInteraction

بكتابة الكود بالشكل التالي :

 

 

شاهد الصورة التالية :

سوف تلاحظ باني استطعت الضغط على الزر اثناء الـ Animation

الفقرة الثانية :

الان سوف نتعلم نوع اخر للـ Uiview.animate

النوع هذا يطلق عليه Spring Animation

معنى الـ Spring هو النابض

بمعنى ارتداد الـ Animation

سوف تتضح فكرة الـ Spring Animation مع هذه الصورة :

كيف يستخدم ؟

بداية نقوم باختيار هذا الـ Function ، كما في الصورة التالية :

الكود النهائي سوف يكون بالشكل التالي :

 

لاحظ هناك خيارين جديدة وهما :

usingSpringWithDamping : ويعني هذا الخيار بالتذبذب (مقدار الاهتزاز) كل ما كان الرقم قريب من الصفر كان مقدار الاهتزاز اعلى ، بما يعني القيمة تكون اقل من 1 واكبر من 0
وضعنا هنا قيمة 0.3 يمكنك التجربة لاستيعاب الفكرة

initialSpringVelocity : هذا الخيار المقصود به هو سرعة الاندفاع في البداية  ، آبل تنصح بجعله بقيمة 0

يمكنك تغير قيمته أيضا من بين قيمة اقل من 1 واكبر من 0

صورة توضيحية للنتيجة :

مثال لأحدى الاستخدامات للـ Spring Animation

لنفترض تريد عمل رسالة تنبيه للمستخدم بإظهارها بشكل الـ popup

باستطاعتك عملها بالطريقة التالية :

بداية سوف نغير لون وحجم المربع الأزرق ونضعه في المنتصف
ونضيف label وزر لجعله كالـ popup

مثل الصورة التالية :

في الـ Viewdidload() نضيف التالي :

 

الذي قمنا بكتابته :

  •  اضفنا حواف ناعمه في اطرف المربع وجعلنا قيمتها 20
  • اضفنا حدود بحجم 1 بكسل
  • جعلنا لون الحدود باللون الرصاصي الفاتح
  •  اخفينا الـ View عند بداية تشغيل البرنامج

في الـ AnimationButton نضيف التالي :

 

 

الذي قمنا بكتابته التالي :

  • اظهرنا الـ View بجعل قيمة الـ alpha تساوي 1
  •  قبنا بتصغير قيمة x ولم نغير قيمة y ، لماذا  في خارج الـ uiview.animate ؟ لأننا نريد أن نجعل الـ View يرجع الى حجمه الطبيعي اثناء الـ animation
  •   اضفنا سطر واحد يقوم بإرجاع الـ View الى حجمه الطبيعية  ، ولأننا استخدمنا الـ Spring Animation .. سيظهر الـ View بشكل جميل

شاهد الصورة التالية :

590272bc26bac_Apr-28-201701-36-37.gif.3e032e11a7f392123d6d738cb0d023a8.gif

 

Add a Comment

لن يتم نشر عنوان بريدك الإلكتروني.