اساسيات الـ Animation في Swift 3 – الجزء الثالث

باسل العموديمنذ 3 سنوات

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

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

 

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

 

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

 

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

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

 

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

 

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

 

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

 

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

 

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

 

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

ومن ثم نضيف زر

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

590ef1293a09e_ScreenShot2017-05-06at9_57_43AM.thumb.png.3eba6de429b016aa8c8825f2a0bd236a.png
 

نقوم بإضافتهم الى ملف اكواد التطبيق ونجعل اسم الـ 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 :

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

transitionCurlDown.gif.677acd12c7a1dccce2c901137c3e9df1.gif

 

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

 

transitionFlipFromTop:


transitionFlipFromTop.gif.4d214c4348fd80eedf028baf93913fac.gif

:transitionFlipFromBottom

transitionFlipFromBottom.gif.ce687bf087ad57fcd24eaeaaece6f62d.gif

 

:transitionFlipFromRight

-transitionFlipFromRight.gif.64dc9a65c5f6c66fadc15bb056522a3d.gif

:transitionFlipFromLeft


transitionFlipFromLeft.gif.905760e1216834834594e5d857052db5.gif

transitionCrossDissolve:


transitionCrossDissolve.gif.2d3e89d561e6a52c37e04f2b435bb6b3.gif

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

.showHideTransitionViews

 

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

 

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

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

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

 

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

 

 

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


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


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

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

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


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


590ef2c7db97f_ScreenShot2017-05-07at12_38_25PM.thumb.png.1b53aab38be09d6710cba53c60af1142.png
 

مثال :

590ef34a9e2a3_slowmotion.gif.5ed839b2e4b1503d6383b755550f6e98.gif


نعود للدرس 

 

 

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

 


        UIView.transition(from: , to: , duration: , options: , completion: nil)


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

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

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

 

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

 

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

 نضيف UIView

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

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

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

 

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

 

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

 

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

590ef38769ec6_ScreenShot2017-05-07at11_16_57AM.thumb.png.04d28cc5c6fa2092134366993ff7fcd5.png


 

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

الى الازرق

 

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

590ef3e03a592_ScreenShot2017-05-07at11_17_32AM.thumb.png.332607700b7107a928d7289dd3f39187.png



الان اصبح لدينا ثلاثة من الـ 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

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

590ef42a28331_ScreenShot2017-05-07at11_28_50AM.thumb.png.610b6b679e3ee6a4d5b5d0ce83867c5d.png


ملاحظة ٢ :

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


اذا ما الحل ؟

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

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

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


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

590ef46e33bd2_May-07-201711-30-27.thumb.gif.43d02770a4405770b85b3392fcd81e65.gif


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

 

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

 

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

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

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

 

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

 

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

590ef56b8873d_May-07-201711-40-20.thumb.gif.4a34006f82fc4a6ed3387a5eb85698c6.gif


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


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

 

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

590ef5d1d47cb_May-07-201712-18-04.gif.06577acbd0d537048386b86bef4b5b84.gif


لماذا لم يعود الى الـ 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)

        

    }


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


590ef5fba0819_May-07-201712-18-46.gif.788b442cee29de5c304761b12ec66913.gif

 

كلمات دليلية:
0
إعجاب
1110
مشاهدات
0
مشاركة
0
متابع
متميز
محتوى رهيب

التعليقات (0)

لايوجد لديك حساب في عالم البرمجة؟

تحب تنضم لعالم البرمجة؟ وتنشئ عالمك الخاص، تنشر المقالات، الدورات، تشارك المبرمجين وتساعد الآخرين، اشترك الآن بخطوات يسيرة !