اساسيات الـ Animation في Swift 3 - الجزء الرابع

تحدثنا سابقا عن أنواع مختلفة للـ Animation

 

وفي هذا الموضوع سوف نتحدث أيضا عن نوع اخر

 

النوع هذا مختلف عن الانواع الأخرى فهو يتركز على موضوع التسلسل الزمني

 

ذكرت في موضوع الاول من هذه السلسلة عن كيفية عمل Animation للمربع بحيث يتحرك بشكل حرف L

اذا لاحظت في الكود السابق سوف تلاحظ عدة امور

 

UIView.animate(withDuration: 1.0, animations: {

self.squareView.transform = CGAffineTransform(translationX:0, y: 300)

}) { (true) in

UIView.animate(withDuration: 1.0, animations: {

self.squareView.transform = CGAffineTransform(translationX:-122, y: 300)

})

}

 

الاول : هو كثرة الاقواس وتداخلها ، في حال كان التحرك اكثر تعقيداً سوف يزداد تعقيد الكود وتكثر الاقواس وبالتالي يصعب تعديله

الثاني : اذا اردت جعل الحركة متسلسلة بنفس التوقيت سوف ينبغي عليك تعديل توقيت كل Animation على حدى

هذه هي فوائد النوع الجديد 

• ازلت الاقواس المتداخله
• سهولة تعديل الكود او الوقت الكلي للـ Animation

 

قبل أن نبدأ في الشرح العملي ، يتوجب عليا شرحه بصورة نظرية

 

كيف يعمل ؟

عند استخدام UIView.animate
فنحن نقوم بإضافة وقت زمني واذا استخدمنا Function معين سوف نستطيع اضافة أيضا زمن تأخير

الـ Animation سوف يبدا وينتهي في الزمن المعين بصورة ثابته

واذا اردنا ان نحرك في اتجاه مختلف فإننا نقوم بإضافة UIView.animate
أخر بداخل اقواس الاستكمال التي نضعها أحيانا بقيمة true
بما يعني في كل مره سوف نضع زمن مختلف ونعيد كتابة UIView.animate

 

في هذا النوع الذي سوف نقوم به هو التالي :

 

سوف نعطي زمن كلي محدد ولنقول مدة ثانية واحده

ومن ثم ننفذ الـ Aniamtion بالنسبة المئوية !

ما المقصود بالنسبة المئوية؟

 

افرض بأن مدة الثانية الواحدة كامله منذ بدايتها الى نهاتيها تكون بنسبة 100%

اذا سوف نضع Animation يبدا مباشرة وتكون بنسبة 0% الى نسبة 50%
يتم التحريك بصورة عامودية ومن النسبة 50% الى 100%
يتم التحريك بصورة افقيه

 

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

 

 

هذا هو فكرة النوع هذا باختصار

 

وقت واحد ، يتم تجزئيه بالنسبة وعمل تحريك مختلف

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

فهو يعمل كالخط الزمني !

 

أخيرا يتوجب عليك ان تعلم بأن :

النسبة لن تكون 100%

ولكن سوف تكون 1 ، بمعنى نقوم بالقسمة على 100

اذا اردنا نسبة 25% سوف تكون 0.25
اذا اردنا نسبة 50 سوف تكون 0.5

وهكذا

 

اذا استوعبت وفهمت الكلام السابق ، تكون فهمت فكرة هذا النوع !

 

اسم النوع الجديد هو UIView.animateKeyframes

 

الان لجعلك تلاحظ الفرق الجوهري بين استخدام UIView.animate

وبين استخدام UIView.animateKeyframes

 

سوف اعطيك نفس المثال مرتين

 

الاولى بالطريقة التقليدية باستخدام UIView.animate

 

الثانية باستخدام UIView.animateKeyframes

 

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

 

ما الذي سوف نقوم به ؟

سوف نقوم بتحريك المربع الأزرق بشكل مستطيل

يبدا من الزاوية السفلية اليسرى

ويتحرك الى الزاوية السفلية اليمنى ومن ثم يتحك الى الزاوية العلوية اليمنى

ومن ثم يتحرك الى الزاوية العلوية اليسرى

واخيراً يعود الى الزاوية السفلية اليسرى

 

قبل اذهب الى الـ Storyboard واجعله بالشكل التالي :

 

ومن ثم اضيفهم الى ملف الاكواد

 

الان سوف نبدأ الدرس

 

باستخدام الطريقة القديمة

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

 

 @IBAction func Animation(_ sender: Any) {

 UIView.animate(withDuration: 0.75, animations: {

 self.square.transform = CGAffineTransform(translationX: 225, y: 0)

        }) { (true) in

            UIView.animate(withDuration: 0.75, animations: {

                self.square.transform = CGAffineTransform(translationX: 225, y: -500)            

            }, completion: { (true) in
         

               UIView.animate(withDuration: 0.75, animations: {

                self.square.transform = CGAffineTransform(translationX: -0, y: -500)

               }, completion: { (true) in       

               UIView.animate(withDuration: 0.75, animations: {

                self.square.transform = .identity

               }, completion: { (true) in

               })

               })

            })

        }

    }

 

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

 

 

هل لاحظت المشكلة في الكود ؟

كثرة الاقواس وتداخلها يصعب من عملية تعديل الكود

ماذا اذا اردت حذف احدى الـ Animation ؟

ستواجه صعوبة في إيجاد كود الـ Animation

المراد حذفه

 

ماذا اذا اردت تعديل الوقت الكلي ؟
سوف يتوجب عليك تعديل كود كل Animation على حده

في المثال السابق استخدمنا وقت 0.75

 

لماذا  ؟
لنصل الى توقيت كلي 3.0

فكل Animation سوف يستغرق 0.75 ثانية فقط

 

الان للتنقل الى النوع الجديد

 

    @IBAction func Animation(_ sender: Any) {



        

        UIView.animateKeyframes(withDuration: 3.0, delay: 0.0, options: [], animations: {

            

            UIView.addKeyframe(withRelativeStartTime: 0.0, relativeDuration: 0.25, animations: {

                self.square.transform = CGAffineTransform(translationX: 225, y: 0)

            })

            

            UIView.addKeyframe(withRelativeStartTime: 0.25, relativeDuration: 0.5, animations: {

                self.square.transform = CGAffineTransform(translationX: 225, y: -500)

            })

            

            UIView.addKeyframe(withRelativeStartTime: 0.5, relativeDuration: 0.75, animations: {

                self.square.transform = CGAffineTransform(translationX: -0, y: -500)

            })

            

            UIView.addKeyframe(withRelativeStartTime: 0.75, relativeDuration: 1.0, animations: {

               self.square.transform = .identity

            

            })

            

            

        }, completion: nil)

        

        

        

    }

 

 

النتيجة الذي وصلنا اليها :

 

 

 

ما الجديد ؟

أولا اضفنا animateKeyframes

ومن ثم اضفنا التوقيت الكلي وهو 3 ثواني

ولم نضيف تأخير لأننا نريد ان يبدا فوراُ فجعلنا القيمة 0.0

في الـ options لم نضيف شيء لذا وضعنا اقواس اريه فاضية
مع العلم أنواع الـ options مختلفة تماما عن الانواع السابقة الموجودة في UIView.animate !

(لن نتطرق لها في هذا الموضوع)

والان لاحظ كل Animation ينضاف لحاله بداخل اقواس animateKeyframes

 

ويطلق عليه UIView.addKeyframe

 

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

في اول Animation وضعنا قيمة 0.0
ليبدا في البداية

 

بالنسبة الى relativeDuration
يعتبر وقت انتهاء الـ Animation
في اول Animation وضعنا نسبة 0.25
والتي تساوي نسبة 25%

لجعل الامر اكثر وضوحاً

اذا نظرنا في animateKeyframes
وضعنا وقت كلي هو 3 ثواني

 

فاذا قمنا بعملية حسابية بسيطة

 

3 ضرب 25 قسمة 100 النتيجة سوف تكون 0.75 ثانية

 

اذاً اول Animation سوف يستغرق 0.75 ثانية فقط

 

والامر ينطبق مع البقية

 

في الـ Animation الثاني وضعنا قيمة withRelativeStartTime بـ 0.25
وقيمة الـ relativeDuration بـ 0.50

 

اذا نقصنا القيمتين من بعض سوف تكون النسبة 0.25
وذا اتبعنا نفس الحسبة السابقة سوف تكون النتيجة 0.75 ثانية

 

من الشرح السابق اتضح لنا فائدة الـ UIView.animateKeyframes

 

بما يعني :

• اذا اردنا تغير الوقت الكلي فقط نقوم بتغير القيمة الموجودة في UIView.animateKeyframes
• اذا اردنا تغير مدة Animation معين ، نقوم بتغير نسبة الـ Animation فقط

 

والاهم من ذا كله الكود اصبح نضيف وسهل القراءة والتعديل !

 

 

كلمات دليلية: