اساسيات الـ Animation في Swift 3 – الجزء الثاني
تعلمنا في الجزء الاول من اساسيات الـ Animation عن نوعين من الـ Function
احداهم مسؤول عن عمل الـ Animation مباشرةً والأخر في حالت اردت تنفيذ شرط عند اكتمال الـ Animation
واستخدمناه عند تحريك المربع بشكل حرف L
لكن هناك أنواع أخرى وهذا ما سوف نتعلمه في هذا الدرس
عند كتابة UiView.animate
سوف تلاحظ وجود 4 أنواع
نوعين تحدثنا عنهم سابقا ، ونوعين لم نتحدث عنهم
في هذه الفقرة اختار هذا النوع
شاهد الصورة ولاحظ النص المكتوب في الأسفل :
الشكل النهائي سوف يكون بالشكل التالي :
UIView.animate(withDuration: 1.0, delay: 0.0, options:[], animations: {
}, completion: nil)
معاني الـ 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 لتقوم بفلترة النتائج ولتظهر الانواع الأربعة السابقة ومن ثم اختار النوع الذي تريده
مثال لطريقة الكتابة :
UIView.animate(withDuration: 1.0, delay: 0.0, options: .curveEaseIn, animations: {
self.squareView.transform = CGAffineTransform(translationX: 0, y: 400)
}, completion: nil)
حقيقة واجهة صعوبة لتوضيح الفروقات فيما بينهم عند عمل صورة متحركة لكل نوع على حدى !
لذا وجدت أفضل طريقة هي باضافتهم جميعا في صورة متحركة واحده !
سوف تلاحظ الفروقات بوضوح مع هذه الصورة :
الان سوف نتطرق لنوعين اخرين :
autorevers : باختصار هو عملية تكرار "لمره واحده" بحيث يتم عمل الـ Animation وعند الانتهاء اعادته بالعكس "مره واحده" ومن ثم يتوقف
UIView.animate(withDuration: 1.0, delay: 0.0, options: .autoreverse, animations: {
self.squareView.transform = CGAffineTransform(translationX: 0, y: 400)
}, completion: nil)
لاحظ الصورة المتحركة ، ذهابا ومن ثم عودة ومن ثم التوقف في الأسفل :
repeat: هو التكرار ، يمكن تشبيه بأنه كالصورة المتحركة عندما ينتهي يعيد من البداية وهكذا (سوف تلاحظ بانه تمت عملية قطع فجائية للـ Animation)
UIView.animate(withDuration: 1.0, delay: 0.0, options: .repeat, animations: {
self.squareView.transform = CGAffineTransform(translationX: 0, y: 400)
}, completion: nil)
صورة توضيحية :
ماذا اذا ثم دمج النوعين السابقين مع بعض ؟
كما ذكرت سابقا يمكن دمج عدة انواع مع بعض
وهنا لاحظ عندما ندمج الـ autorevers مع الـ repeat
النتيجه سوف تكون عملية تكرار بدون توقف ، بمعنى تكون Perfect loop
UIView.animate(withDuration: 1.0, delay: 0.0, options: [.autoreverse , .repeat], animations: {
self.squareView.transform = CGAffineTransform(translationX: 0, y: 400)
}, completion: nil)
صورة توضيحية :
اخر خيار هو allowUserInteraction :
كما هو واضح من اسمه ، السماح بتفاعل المستخدم مع الـ view اثناء الـ Animation !
لجعل الامر واضحاً لك ، قمت بإضافة زر في داخل المربع وجعلت ابعداه بكامل المربع
ومن ثم قم بتجربة بدون استخدام خيار الـ allowUserInteraction
بكتابة الكود التالي :
UIView.animate(withDuration: 3.0, delay: 0.0, options: [.autoreverse], animations: {
self.squareView.transform = CGAffineTransform(translationX: 0, y: 400)
}, completion: nil)
شاهد الصورة التالية :
ولاحظ باني لم استطع الضغط على الزر اثناء الـ Animation
ولكن استطعت فقط الضغط على الزر قبل بداية الـ Animation وبعد انتهائه
بعد إضافة خيار allowUserInteraction
بكتابة الكود بالشكل التالي :
UIView.animate(withDuration: 3.0, delay: 0.0, options: [.autoreverse , .allowUserInteraction], animations: {
self.squareView.transform = CGAffineTransform(translationX: 0, y: 400)
}, completion: nil)
شاهد الصورة التالية :
سوف تلاحظ باني استطعت الضغط على الزر اثناء الـ Animation
الفقرة الثانية :
الان سوف نتعلم نوع اخر للـ Uiview.animate
النوع هذا يطلق عليه Spring Animation
معنى الـ Spring هو النابض
بمعنى ارتداد الـ Animation
سوف تتضح فكرة الـ Spring Animation مع هذه الصورة :
كيف يستخدم ؟
بداية نقوم باختيار هذا الـ Function ، كما في الصورة التالية :
الكود النهائي سوف يكون بالشكل التالي :
UIView.animate(withDuration: 1.0, delay: 0.0, usingSpringWithDamping: 0.3, initialSpringVelocity: 0.0, options:.curveEaseOut, animations: {
self.squareView.transform = CGAffineTransform(translationX:0, y: 400)
}, completion: nil)
لاحظ هناك خيارين جديدة وهما :
usingSpringWithDamping : ويعني هذا الخيار بالتذبذب (مقدار الاهتزاز) كل ما كان الرقم قريب من الصفر كان مقدار الاهتزاز اعلى ، بما يعني القيمة تكون اقل من 1 واكبر من 0
وضعنا هنا قيمة 0.3 يمكنك التجربة لاستيعاب الفكرة
initialSpringVelocity : هذا الخيار المقصود به هو سرعة الاندفاع في البداية ، آبل تنصح بجعله بقيمة 0
يمكنك تغير قيمته أيضا من بين قيمة اقل من 1 واكبر من 0
صورة توضيحية للنتيجة :
مثال لأحدى الاستخدامات للـ Spring Animation
لنفترض تريد عمل رسالة تنبيه للمستخدم بإظهارها بشكل الـ popup
باستطاعتك عملها بالطريقة التالية :
بداية سوف نغير لون وحجم المربع الأزرق ونضعه في المنتصف
ونضيف label وزر لجعله كالـ popup
مثل الصورة التالية :
في الـ Viewdidload() نضيف التالي :
override func viewDidLoad() {
super.viewDidLoad()
squareView.layer.cornerRadius = 20
squareView.layer.borderWidth = 1
squareView.layer.borderColor = UIColor.lightGray.cgColor
squareView.alpha = 0.0
}
الذي قمنا بكتابته :
- اضفنا حواف ناعمه في اطرف المربع وجعلنا قيمتها 20
- اضفنا حدود بحجم 1 بكسل
- جعلنا لون الحدود باللون الرصاصي الفاتح
- اخفينا الـ View عند بداية تشغيل البرنامج
في الـ AnimationButton نضيف التالي :
@IBAction func AnimationButton(_ sender: Any) {
squareView.alpha = 1.0
self.squareView.transform = CGAffineTransform(scaleX: 0.3, y: 1)
UIView.animate(withDuration: 0.5, delay: 0.0, usingSpringWithDamping: 0.3, initialSpringVelocity: 0.0, options:.curveEaseOut, animations: {
self.squareView.transform = .identity
}, completion: nil)
}
الذي قمنا بكتابته التالي :
- اظهرنا الـ View بجعل قيمة الـ alpha تساوي 1
- قبنا بتصغير قيمة x ولم نغير قيمة y ، لماذا في خارج الـ uiview.animate ؟ لأننا نريد أن نجعل الـ View يرجع الى حجمه الطبيعي اثناء الـ animation
- اضفنا سطر واحد يقوم بإرجاع الـ View الى حجمه الطبيعية ، ولأننا استخدمنا الـ Spring Animation .. سيظهر الـ View بشكل جميل
شاهد الصورة التالية :
عرض المزيد.. جديد مقالاتي
لايوجد لديك حساب في عالم البرمجة؟
تحب تنضم لعالم البرمجة؟ وتنشئ عالمك الخاص، تنشر المقالات، الدورات، تشارك المبرمجين وتساعد الآخرين، اشترك الآن بخطوات يسيرة !