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

 

في هذا الجزء سوف ننتقل الي نوع اخر مختلف عنما اعتدنا عليه سابقا

سوف ننتقل من Animation الـ View الى Animation الـ Layer

بصيغة أخرى هذا الموضوع هو بداية الدخول  الى الـ Core Animation

هناك فروقات كثيره بينهم !

ابرزها :

  • كل امر فعلته باستخدام الـ UIView Animation تستطيع عمله باستخدام الـ Layer Animation ولا يمكن فعل العكس

لماذا ؟

لانه الـ Layer يكون خلف الـ View
وبتالي عند تحريك الـ View مثلا انت أيضا تحرك الـ Layer

بما يعني أي امر تستطيع عمله بالـ View أيضا تستطيع عمله بالـ Layer
لانه طبقة الـ layer موجودة خلف الـ View

ولكن لا يمكن عمل العكس .

  • ملكيات الـ Layer التي يمكنك عمل لها  Animation  أكثر بكثير من ملكيات الـ UIView ، بمعنى اخر تستطيع فعل الكثير باستخدام Layer Animation
  • الـ Layer Animation ينفذ باستخدام المعالج الرسومي GPU في حين الـ UIView باستخدام المعالج المركزي CPU
  • الـ Layer Animation يمكن عمل Animation بشكل 3D و  2D في حين UIView Animation ، يمكن عمل Animation بشكل 2D فقط
  • الـ UIView Animation اسهل استخداما من الـ Layer Animation
  • يمكن دمج الـ Layer Animation مع الـ UIView Animation

مختصر الكلام الـ UIView Animation هو نسخه مخففه من الـ Layer Animation

بعد معرفة الفروقات لنبدأ الدرس :

لأثبات كلامي السابق

سوف نحاول عمل Animation يقوم بتحويل المربع الى دائرة باستخدام UIView Animation

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

ما فعلته هنا هو غيرت زوايا المربع من 0 الى 61

لماذا 61 ؟

لانه الطول والعرض للمربع هو 122 ، وبالتالي لتحويل المربع الى دائره نجعل زواية المربع تساوي
أضلاع المربع قسمة 2

بما يعني 122 قسمة 2 = 61

الان نرى النتيجة في الصورة التالية :

كما ترى لم يتم حدوث Animation

ولكن فقط تم تحويل المربع الى دائره بشكل فجائي

والسبب كما ذكرنا سابقا

لا يمكنه عملAnimation للـ Layer باستخدام UIView Animationالـ

اذا ماهو الـ Layer Animation الذي سوف نتحدث عنه اليوم ؟

كما الامر في UIView Animation

هناك أنواع مختلفة

أيضا في الـ Layer Animation

هناك أنواع مختلفة

النوع الذي سوف نتحدث عنه اليوم هو CABasicAnimation

سوف نعود الى المربع الأزرق الذي استخدمناه في المواضيع السابقة

لذا قم بإضافة “زر” وقم بربطه بملف الاكواد كـ Action
باسم AnimationButton

وقم بإضافة UIView واعطيه لوناً

وقم بربطه بملف الاكواد باسم squareView

الان سوف نبدأ في شرح الـ  Layer Animation

كيف يتم كتابة كود الـ Layer Animation؟

الطريقة مختلفة عن الـ UIView Animation

فهيا تعتمد أولا على تعريف خصائص الـ Animation

وفي الأخير في سطر واحد يتم تنفيذ الـ Animation

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

 

 


في المثال السابق :

اول سطر قمنا بتعريف متغير cornerRadiusAnimation

من نوع  CABasicAnimation

لاحظ الـ keypath

تقوم بالكتابة فيه نوع الـ Animation الذي تريد عمله

هنا نحن نريد عمل Animation للزوايا او بصيغة أخرى الـ cornerRadius

من ثم قمنا بكتابة الـ duration

الوقت المراد عمل في الـ Animation
بالثانية (مدة الـ Animation)

ومن ثم نحدد القيمة الاولية و القيمة النهائية

بما يعني في اول قيمة fromValue

نحدد القيمة الحالية

قمنا بكتابة 0

لأننا نعلم بأنه القيمة الاولية هيا 0 وبالتالي يظهر الشكل بشكل مربع !

toValue

هيا القيمة التي نريد الوصول اليها

نحن نريد ان تكون قيمة الـ cornerRadius

تساوي 61 وبالتالي يتغير الشكل من مربع الى دائره

الان انتهينا من وضع الخصائص الخاصة بالـ Animation

يبقى التنفيذ

في اخر سطر نفذنا الـ Animation

عن طريق استخدام add

 

الان قم بتشغيل الكود

وسوف تلاحظ الـ Animation

عند تغيره من مربع الى دائره

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

لكن هناك مشكلة !!

عند الانتهاء من الـ Animation تم إعادة الـ View
الى الشكل المربع ولم يبقى على شكل الدائره

لماذا ؟؟

لتوضيح المشكلة بأبسط صورة ممكنه

عند عمل الـ Animation
الـ Core Animation ينفذها عن طريق استخدام الـ layer.add

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

بما يعني لا يحدث تغير في القيمة الفعلية للـ Layer

فيظل الـ View كما كان بدون تغير !

لحل المشكلة

هناك حلين ، وكلاهما صحيحان

الاول :

نقوم بتغير الـ View الى الوضع الذي نريده عندما ينتهي الـ Animation

نحن نريد جعل الحواف بقيمة 61

وذلك لتحويله الى دائرة

لذا نقوم بكتابة السطر التالي

 

 

بعد السطر


وبالتالي تحل المشكلة !

الحل الثاني :

نقوم بإضافة السطرين التالين :

 

ضعهم في أي مكان قبل

وستجده أيضا يعمل !

لكن هذا الحل غير مفضل دائماً !

لماذا ؟

عندما يحدث الـ Animation في الـ Core Animation

انت في الحقيقة لا تشاهد الـ Layer يحدث له الـ Animation

ولكن الذي تشاهده هو نسخه طبق الأصل منه ، بما يعني الـ Cache الخاص بالـ Layer

هو الذي يحدث له Animation

ويطلق عليه اسم Presentation Layer

وعندما تستخدم الاسطر الماضية فالذي تقوم به هو حفظ الـ Presentation Layer

وتمنع ازالته من الشاشة

هذا الامر يسبب مشكلة في الأداء (performance)  !

وأيضا سوف يسبب مشكلة اذا كان العنصر التي تحركه يتطلب التفاعل معاه

كالـ Textfield

لن تستطيع الضغط على الحقل بعد انتهاء الـ Animation

اذا كان الظاهر هو Presentation Layer

وليس الـ Layer الحقيقي الـ Actual Layer

لذا يفضل عدم استخدام الحل ذا قدر الإمكان ، ستحتاجه في بعض الحالات ولكن أغلب الحالات يفضل تغير موقع الـ Actual Layer بعد انتهاء الـ Animation كما تم شرحه في الحل الأول وهو الحل الذي سوف نستمر في استخدامه .

الان

قبل الضغط على الزر سوف يكون على شكل مربع

ومن ثم يحدث الـ Animation

فيتغير من الشكل المربع الى الدائرة

وعندما ينتهي الـ Animation

يظل على الشكل النهائي الذي هو الدائرة !

النتيجة :

حان الوقت لتوضيح معلومة =)

أعتقد بأنك لاحظت امراً

وهو خصائص الـ Aniamtion

في الـ Layer Animation

ليست مرتبطة بـ View  معين

بما يعني يمكنك إعادة عمل الـ Animation

ذاته على كذا View مختلف

لذا يمكنك إضافة مربع اخر

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

قم بتسميته باسم squareView2

ومن ثم قم بربطة بملف الاكواد

واستخدام نفس السطر التالي

 

لاحظ التغير الوحيد squareView غيرناه الى squareView2

وهو يساوي اسم الـ view الجديد

ولا تنسى في النهاية تضيف السطر التالي


قم بتشغيل الكود وشاهد النتيجة :

نعود الى الشرح

الان وقد فهمت فكرة الـ Layer Animation

لنتحدث عن الانواع الأخرى :

التلاشي :

 

بالنسبة للـ Layer

فالملكية المسؤولة عن الشفافية هي Opacity

عوضاً عن Alpha

اخر سطر كما وضحنا سابقا يتوجب علينا تغير القيمة الحقيقية أيضا

لكي يظل مخفي الـView بعد انتهاء الـ Animation

النتيجة :

إضافة ايطار – تغير حجم الايطار :

من خواص الـ Layer

الـ ايطار

يمكن وضع ايطار للـ View

بكتابة التالي في داخل الـ AnimationButton:

 

 

بما سبق قمنا بتغير قيمة borderWidth

من صفر الى 6

النتيجة :

تغير لون الايطار :

الان سوف نضيف ايطار مسبقا في الـ Viewdidload()

ومن ثم نعمل Aniamtion

ونغير لونه عند الضغط على الزر

لذا قم بإضافة السطر التالي في Viewdidload()

الان بداخل قواس AnimationButton

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

 

 

قمنا بتغير لون الحدود (الايطار) من اللون الأسود الى اللون الرصاصي الفاتح

ملاحظة مهمه :

في الـ Layer

في الألوان نستخدم نوع cgColor

وليست UIColor

لذلك نعمل عملية Casting لتحويل اللون الى نوع cgColor

اذا لم تضيف .cgColor

سيظهر خطأ !

النتيجة :

عمل Animation للظل ! :

بالنسبة للظل هناك 4 أمور تؤثر على الظل

shadowOpacity : شفافية الظل ، 0 تعني اختفاء الظل و 1 ظهوره

shadowOffset : موقع الظل

shadowRadius : كثافة الظل ، كل ما زاد الرقم اصبح “عرض” الظل اكبر

shadowColor : لون الظل

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

 

كما ذكرت سابقا قيمة 1 تعني ظهور الظل

لذا وضعنا قيمة 1

النتيجة :

الان لغرض استخدام الخصائص الأخرى

سوف نقوم بكتابة الكود التالي في viewDidLoad

 

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

لتغير موقع الظل :

 

 

النتيجة :

لاحظ بأن shadowOffset يأخد قمتين وهما العرض width والارتفاع height

لتسهيل فهمها لاحظ الصورة التالية :

اذا اردت الظل يظهر من الجهة اليمين

اجعل القيم بالشكل التالي

 


من اليسار


من الأعلى

 


من الأسفل

 

 

بما يعني اعتبر القيمتين x و y

وتذكر الصورة التالية :

لزيادة مساحة الظل :

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

 

 

النتيجة :

لتغير لون الظل :

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

 

 

 

النتيجة :

وبكذا نكون انتهينا من خصائص الظل

الان نعود الى الامثله التي ذكرناها في المواضيع السابقة عندما تحدثنا عن UIView Animation

وكيف نفعلها باستخدام الـ Layer Animation

تغير موقع الـ View :

لتغير الموقع نستخدم ملكية تسمى Position

لاجل تغير قيمة y فقط نقوم بكتابة position.y

 

 

fromValue

هو قيمة y الحالية 126

ونريد تغيرها الى قيمة 400

لجعل المربع ينزل الى الأسفل

النتيجة :

لاجل تغير قيمة x فقط نقوم بكتابة position.x

 

 

كما تلاحظ في formValue

قمنا بكتابة squareView.center.x

والسبب لجلب قيمة x لـ  View الحالية بدلاً من كتابتها بشكل يدوي

النتيجة :

التصغير :

 

 

النتيجة :

التضخيم :

 

 

النتيجة :

معلومة :

اذا اردت فقط تصغير او تضخيم قيمة X دون Y

قم بكتابة

 

الأمر أيضا ينطبق على Y اذا اردت تصغير او تضخيم قيمة Y دون x

قم بكتابة

 

 

Add a Comment

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