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

 

تعلمنا في ما سبق عن  نوع من  الـ Animation وهو الـ UIView.animate

والذي يعتبر الأكثر استخداما

واليوم سوف نتعلم عن نوع مختلف وهو UIView.transition

قبل ان نبدأ في الدرس ، ما الفرق بينهما ؟

باختصار UIView.animate مسؤول عن ملكية الـ UIView من عمل تحريك وتكبير والتفاف وغيرها

في حين UIView.transition مسؤول عن إضافة وحذف الـ View

تستطيع عند إضافة الـ View كـ Subview انك تعمل Animation في لحظة اضافته او حذفه

اعلم الكلام غير مفهوم !

مع التطبيق سوف تتضح الصورة .

لتسهيل الامور لن اتطرق الى موضوع إضافة وحذف الـ SubView عن طريق الاكواد ولكن سوف اشرحها بطريقة اكثر بساطة .

اذا لنبدأ الدرس .

نقوم بإضافة Label ونجعل لون النص باللون الأبيض ولون الخلفية باللون الأسود

ومن ثم نضيف زر

كما في الصورة التالية :

نقوم بإضافتهم الى ملف اكواد التطبيق ونجعل اسم الـ Label

بـ Label واسم الـ Function بـ Transition

 

الان في viewDidLoad

نضيف التالي :

 

لماذا ؟

ذكرنا في السابق بأن الـ UIView.transition

يعمل اثناء إضافة وحذف الـ View

لذا في الكود السابق ما نقوم به هو حذفه من الـ View
بجعله غير ظاهر !

في الدروس السابقة استخدمنا .alpha
فما الفرق ؟

الـ .alpha هي الشفافية

بمعنى 1 يعتبر لا توجد شفافية في حين 0.5 تعني وجود شفافية و 0 يعني انعدام الشفافية

وهي من ملكيات الـ UIView.animate بصورة أخرى من المكيات التي يمكن عمل لها animate

لكن الـ isHidden يزيل الـ View

وليست من الملكيات التي تستطيع عمل لها animate

فاذا استخدمتها بداخل اقواس UIView.animate لن يظهر أي Animation !

بصورة مختصرة : استخدام UIView.transition مع الملكيات التي لا يمكن عمل لها Animation

نعود للدرس

الان نقوم بعمل التالي بداخل اقواس Transition

 

كما تلاحظ بصورة عامة فهو مشابه للـ UIView.animate

الاختلاف with وتعني ماهو الـ view الذي تريد عمل له الـ transition
تكتب نفس اسم الـ View وهنا نحن استخدمنا Label فنقوم بكتابة اسم الـ Label

الـ options هناك أنواع مختلف سوف اذكرها بعد قليل

ما اريد توضيحه هنا الانواع التي ذكرتها في موضوعي السابق .curveEaseIn واخواتها يمكنك دمجها مع الانواع الخاصة بالـ transition بعمل مربع الاريه [] والفصل بينهم بعلامة فاصلة

ماقمنا بفعله داخل الاقواس هو فقط حولنا الحالة من مخفي الى ظاهر بالتغير من true الى false

أنواع الـ options :

transitionCurlDown :

وهو النوع الذي استخدمناه في الكود السابق

transitionCurlUp :
هيا عملية معاكسه للعملية السابقة لم استطيع عمل صورة متحركة توضحها

transitionFlipFromTop:

:transitionFlipFromBottom

:transitionFlipFromRight

:transitionFlipFromLeft

transitionCrossDissolve:

هناك نوع أخير وهو

.showHideTransitionViews

سيتضح فائدته في الـ Function الاخر للـ transition

من الامور التي اتضحت من أنواع الـ Options السابقة

بأنك قد ترغب باستخدام الـ transition لعمل تأثير معين

لن تستطيع عمله باستخدام الـ UIView.animate

ولكن من الامور الأخرى هو عمل تأثير انتقالي وسيكون المثال التالي توضيحا للطريقة

قبل العوده لاستكمال الدرس هنا تلميحه بسيطة وهي

هل تريد مشاهدة التأثير ببطيء ؟

عند تشغيل التطبيق على المحاكي

اذهب الى خانة Debug واختار خيار Slow Animations

ومن ثم اضغط على الزر وسظهر الـ Animation بصورة بطيئة (سلو موشن)

كما في الصورة التالية :

مثال :

نعود للدرس 

الان سوف ننتقل الى نوع أخرى من أنواع الـ UIView.transition

 



كما تلاحظ في الكود السابق بأنه يطلب نوعين من الـ UIView ، وهذا النوع هو نوع انتقالي

بحيث يعمل عملية انتقالية بين الـ View الاول الى الـ View الثاني

بحيث يخفي الاول ويظهر الثاني !

دعونا نبدأ في المثال

أولا :
نذهب الى الـ Storyboard
ونضيف التالي :

نضيف UIView

ونجعله بحجم مستطيل صغير

ومن ثم بداخله نضيف UIView اخر  ونجعله بنفس حجم الـ UIView  السابق

ونغير لونه الى الاخضر

ومن ثم نضيف Label اذا اردت

وأيضا نضيف Button ، نحذف النص الذي بداخله ونجعله بحجم الـ UIView

كما في الصورة التالية :

 

ومن ثم نقوم بنسخ الـ UIView الذي قمنا بعمله في الخطوة السابقة ونغير النص ولون الـ UIView

الى الازرق

كما في الصورة التالية :

الان اصبح لدينا ثلاثة من الـ UIView

اثنين بداخل UIView واحد

وفوق كل UIView زر

بما يعني ٣ من الـ UIView

و ٢ من الـ Button

قد تتسأل لماذا اضفنا UIView وبداخله (فوقه) اضفنا اثنين من الـ UIView
بدلا من إضافة اثنين من الـ UIView مباشرةً الى الـ  ViewController؟

السبب لأنه عند عمل الـ transition
سنقلب الـSuperview
الذي سيكون الـ View الأساسي
بمعنى سوف تنقلب كامل الصفحة !!

لكن عند إضافة UIView وجعلنا اثنين من الـ UIView بداخله
الذي سوف ينقلب هو الـ UIView الي اضفناه

لأنه اصبح هو الـSuperview بالنسبة لهم

بما يعني لن تنقلب الصفحة كامله !
بما يعطي ايحاء بتأثير انقلاب البطاقة !

ملاحظة :
في الـ StoryBoard

من يكون في اخر التسلسل يكون هو الاول (الظاهر)

فالان اصبح الـ View 2
هو الاول والـ View 1 هو الثاني

يمكنك تغيير المسميات او فقط تقوم بسحب الـ View 2 وتجعله فوق View 1

بالشكل التالي :

ملاحظة ٢ :

عندما يكون هناك نوعين مختلفة فوق بعض  (في المثال هذا هناك اثنين من الـ View) ، سوف يكون من الصعب مشاهدة الـ View الذي في الخلف ، اذا طبقت الملاحظة الاولى بعد عمل القيود سوف تواجه مشاكل مع القيود !

اذا ما الحل ؟

كل ما عليك فعله هو الضغط على الـ View الذي في المقدمة (الذي يكون الأخير في الترتيب)

ومن ثم إزالة علامة الصح من Installed
وعندها ستخفي وسيظهر الـ View الذي كان في الخلف وسيسهل عليك تعديله

بعد الانتهاء من التعديلات قم بتفعيل الصح مره أخرى !

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

الان نقوم بإضافتهم الى ملف الاكواد

سنقوم بإضافة فقط الـ UIView
الذي باللون الأزرق والاخضر

وأيضا سوف نضيف Action للزر

ونربط الزرين بهذا الـ Action

بصيغة أخرى سوف يصبح لدينا Function واحد
وزرين مرتبطين به !

لأننا نريد جعل البطاقة تنقلب مرتين عند اللمس
عوضا عن عمل اثنين من الـ Function سوف نعمل على Function واحد فقط

كما في الصورة التالية :

 

وبالتالي ملف الاكواد سوف يصبح بالشكل التالي :

 

 

الان بداخل الـ FlipButton

نقوم بكتابة التالي :

ما قمنا به هو جعلنا الـ View1 ينقلب الى View2

لاحظ اننا استخدمنا الـ showHideTransitionViews

لماذا ؟

لانه بعد عملية الانتقال سوف يتم حذف الـ View1

من الـ Suberview
وبالتالي سوف يسبب بخطأ nil

والخيار هذا بدل من ازالت الـ View1 سوف يقوم بإخفائه فقط

الان عند التشغيل سوف تلاحظ بانه ينقلب من View1 الى View2
ومن ثم لن يعود الى View1
بل سوف يستمر بعرض View2

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

لماذا لم يعود الى الـ View الاول ؟

لأنه الكود الذي كتبناه يقوم على تحويل من View1 الى View2
بما يعني دائما سوف يظهر View2

باستطاعتنا تعديل الخطأ
بإضافة Boolean

اسفل

 

ومن ثم نغير الكود الى هذا الشكل

 

ما الذي قمنا به هنا ؟

قمنا بتغير حالة الـ Boolean
اذا كان false سوف يصبح true

والعكس صحيح

ملاحظة :
علامة التعجب هنا معناها اعكس القيمة!

ومن ثم اضفنا متغير باسم fromView
واضفنا شرط اذا كان true اجعله View1 اذا كان false اجعله View2

واضفنا متغير اخر باسم toView

واضفنا شرط اذا كان true اجعله View2 اذا كان false اجعله View1

ومن ثم اضفنا المتغيرات الجديدة الى  from و to بداخل Function الـ UIView.transitio

اعلم بانه البعض سوف يرى بأن طريقة كتابة الـ IF غريبة وغير منطقية بالنسبة له

لذا لتبسيط الامور يمكن أيضا كتابتها بالطريقة التالية :

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

 

Add a Comment

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