اساسيات الـ Animation في Swift 3 – الجزء الثالث
تعلمنا في ما سبق عن نوع من الـ Animation وهو الـ UIView.animate
والذي يعتبر الأكثر استخداما
واليوم سوف نتعلم عن نوع مختلف وهو UIView.transition
قبل ان نبدأ في الدرس ، ما الفرق بينهما ؟
باختصار UIView.animate مسؤول عن ملكية الـ UIView من عمل تحريك وتكبير والتفاف وغيرها
في حين UIView.transition مسؤول عن إضافة وحذف الـ View
تستطيع عند إضافة الـ View كـ Subview انك تعمل Animation في لحظة اضافته او حذفه
اعلم الكلام غير مفهوم !
مع التطبيق سوف تتضح الصورة .
لتسهيل الامور لن اتطرق الى موضوع إضافة وحذف الـ SubView عن طريق الاكواد ولكن سوف اشرحها بطريقة اكثر بساطة .
اذا لنبدأ الدرس .
نقوم بإضافة Label ونجعل لون النص باللون الأبيض ولون الخلفية باللون الأسود
ومن ثم نضيف زر
كما في الصورة التالية :
نقوم بإضافتهم الى ملف اكواد التطبيق ونجعل اسم الـ Label
بـ Label واسم الـ Function بـ Transition
@IBOutlet weak var Label: UILabel!
@IBAction func Transition(_ sender: Any) {
}
الان في viewDidLoad
نضيف التالي :
Label.isHidden = true
لماذا ؟
ذكرنا في السابق بأن الـ UIView.transition
يعمل اثناء إضافة وحذف الـ View
لذا في الكود السابق ما نقوم به هو حذفه من الـ View
بجعله غير ظاهر !
في الدروس السابقة استخدمنا .alpha
فما الفرق ؟
الـ .alpha هي الشفافية
بمعنى 1 يعتبر لا توجد شفافية في حين 0.5 تعني وجود شفافية و 0 يعني انعدام الشفافية
وهي من ملكيات الـ UIView.animate بصورة أخرى من المكيات التي يمكن عمل لها animate
لكن الـ isHidden يزيل الـ View
وليست من الملكيات التي تستطيع عمل لها animate
فاذا استخدمتها بداخل اقواس UIView.animate لن يظهر أي Animation !
بصورة مختصرة : استخدام UIView.transition مع الملكيات التي لا يمكن عمل لها Animation
نعود للدرس
الان نقوم بعمل التالي بداخل اقواس Transition
UIView.transition(with: Label, duration: 0.5, options: .transitionCurlDown, animations: {
self.Label.isHidden = false
}, completion: nil)
كما تلاحظ بصورة عامة فهو مشابه للـ 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.transition(from: , to: , duration: , options: , completion: nil)
كما تلاحظ في الكود السابق بأنه يطلب نوعين من الـ 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 واحد فقط
كما في الصورة التالية :
وبالتالي ملف الاكواد سوف يصبح بالشكل التالي :
import UIKit
class ViewController: UIViewController {
@IBOutlet weak var View1: UIView!
@IBOutlet weak var View2: UIView!
override func viewDidLoad() {
super.viewDidLoad()
}
@IBAction func FlipButton(_ sender: UIButton) {
}
الان بداخل الـ FlipButton
نقوم بكتابة التالي :
@IBAction func FlipButton(_ sender: UIButton) {
UIView.transition(from: self.View1, to: self.View2, duration: 0.5, options: [.transitionFlipFromRight , .showHideTransitionViews], completion: nil)
}
ما قمنا به هو جعلنا الـ View1 ينقلب الى View2
لاحظ اننا استخدمنا الـ showHideTransitionViews
لماذا ؟
لانه بعد عملية الانتقال سوف يتم حذف الـ View1
من الـ Suberview
وبالتالي سوف يسبب بخطأ nil
والخيار هذا بدل من ازالت الـ View1 سوف يقوم بإخفائه فقط
الان عند التشغيل سوف تلاحظ بانه ينقلب من View1 الى View2
ومن ثم لن يعود الى View1
بل سوف يستمر بعرض View2
صورة توضيحية بالنتيجة الحالية :
لماذا لم يعود الى الـ View الاول ؟
لأنه الكود الذي كتبناه يقوم على تحويل من View1 الى View2
بما يعني دائما سوف يظهر View2
باستطاعتنا تعديل الخطأ
بإضافة Boolean
var check = false
اسفل
@IBOutlet weak var View1: UIView!
@IBOutlet weak var View2: UIView!
ومن ثم نغير الكود الى هذا الشكل
@IBAction func FlipButton(_ sender: UIButton) {
check = !check
let fromView = check ? View1 : View2
let toView = check ? View2 : View1
UIView.transition(from: fromView!, to: toView!, duration: 0.5, options: [.transitionFlipFromRight , .showHideTransitionViews], completion: nil)
}
ما الذي قمنا به هنا ؟
قمنا بتغير حالة الـ Boolean
اذا كان false سوف يصبح true
والعكس صحيح
ملاحظة :
علامة التعجب هنا معناها اعكس القيمة!
ومن ثم اضفنا متغير باسم fromView
واضفنا شرط اذا كان true اجعله View1 اذا كان false اجعله View2
واضفنا متغير اخر باسم toView
واضفنا شرط اذا كان true اجعله View2 اذا كان false اجعله View1
ومن ثم اضفنا المتغيرات الجديدة الى from و to بداخل Function الـ UIView.transitio
اعلم بانه البعض سوف يرى بأن طريقة كتابة الـ IF غريبة وغير منطقية بالنسبة له
لذا لتبسيط الامور يمكن أيضا كتابتها بالطريقة التالية :
@IBAction func FlipButton(_ sender: UIButton) {
check = !check
var formView : UIView
if check == true {
formView = View1
}else {
formView = View2
}
var toView : UIView
if check == true {
toView = View2
}else {
toView = View1
}
UIView.transition(from: formView, to: toView, duration: 0.5, options: [.transitionFlipFromRight , .showHideTransitionViews], completion: nil)
}
صورة توضيحية بالنتيجة :
التعليقات (0)
عرض المزيد.. جديد مقالاتي
لايوجد لديك حساب في عالم البرمجة؟
تحب تنضم لعالم البرمجة؟ وتنشئ عالمك الخاص، تنشر المقالات، الدورات، تشارك المبرمجين وتساعد الآخرين، اشترك الآن بخطوات يسيرة !