أداء رسوم متحركة لنظام iOS على العروض باستخدام UIKit و UIView

لقد كنت مطور iOS لأكثر من عقد حتى الآن ونادراً ما رأيت مقالات تدمج جميع الطرق الممكنة لأداء الرسوم المتحركة في iOS. تهدف هذه المقالة إلى أن تكون كتابًا تمهيديًا عن الرسوم المتحركة لنظام iOS بقصد تغطية الطرق المختلفة لفعل الشيء نفسه بشكل شامل.

نظرًا لاتساع الموضوع ، سنغطي كل جزء بإيجاز على مستوى عالٍ إلى حد ما. الهدف هو تثقيف القارئ بمجموعة من الخيارات لإضافة رسوم متحركة إلى تطبيق iOS الخاص به.

قبل أن نبدأ بالمواضيع المتعلقة بنظام iOS ، دعونا نلقي نظرة سريعة على سرعة الرسوم المتحركة.

الرسوم المتحركة بمعدل 60 إطارًا في الثانية

بشكل عام في مقاطع الفيديو ، يتم تمثيل كل إطار بصورة ويحدد معدل الإطارات عدد الصور المعكوسة في التسلسل. هذا يسمى "الإطارات في الثانية" أو FPS.

تحدد FPS عدد الصور الثابتة المقلوبة في غضون ثانية ، مما يعني حرفيًا أنه كلما زاد عدد الصور / الإطارات ، يتم عرض مزيد من التفاصيل / المعلومات في الفيديو. هذا صحيح بالنسبة للرسوم المتحركة أيضًا.

تُستخدم FPS عادةً لتحديد جودة الرسوم المتحركة. هناك رأي شائع مفاده أن أي رسم متحرك جيد يجب أن يعمل بمعدل 60 إطارًا في الثانية أو أعلى - أي شيء أقل من 60 إطارًا في الثانية سيبدو قليلاً.

هل تريد أن ترى الفرق بين 30 إطارًا في الثانية و 60 إطارًا في الثانية؟ افحص هذا!

هل لاحظت الفرق؟ يمكن للعيون البشرية أن تشعر بالتأكيد بالارتعاش عند انخفاض الإطارات في الثانية. ومن ثم ، فمن الجيد دائمًا التأكد من أن أي رسوم متحركة تقوم بإنشائها تلتزم بالقاعدة الأساسية للتشغيل بمعدل 60 إطارًا في الثانية أو أعلى. هذا يجعلها تبدو أكثر واقعية وحيوية.

بعد إلقاء نظرة على FPS ، دعنا الآن نتعمق في أطر عمل iOS الأساسية المختلفة التي توفر لنا طريقة لأداء الرسوم المتحركة.

الأطر الأساسية

في هذا القسم ، سنتطرق إلى الأطر الموجودة في iOS SDK والتي يمكن استخدامها لإنشاء رسوم متحركة للعرض. سنقوم بجولة سريعة خلال كل منهم ، وشرح مجموعة الميزات الخاصة بهم مع مثال ذي صلة.

الرسوم المتحركة UIKit / UIView

UIView هي الفئة الأساسية لأي طريقة عرض تعرض المحتوى في تطبيقات iOS.

UIKit ، إطار العمل الذي يمنحنا UIView ، يوفر لنا بالفعل بعض وظائف الرسوم المتحركة الأساسية التي تجعله مناسبًا للمطورين لتحقيق المزيد من خلال عمل أقل.

واجهة برمجة التطبيقات ، UIView.animate ، هي أسهل طريقة لتحريك العروض حيث يمكن تحريك خصائص أي طريقة عرض بسهولة من خلال توفير قيم الخاصية في بناء الجملة القائم على الكتلة.

في الرسوم المتحركة لـ UIKit ، يوصى بتعديل الخصائص المتحركة لـ UIVI فقط ، وإلا ستكون هناك تداعيات حيث قد تتسبب الرسوم المتحركة في إنهاء العرض في حالة غير متوقعة.

الرسوم المتحركة (مع المدة: الرسوم المتحركة: الانتهاء)

تستغرق هذه الطريقة مدة الرسوم المتحركة ، وهي مجموعة من تغييرات خصائص العرض المتحركة التي يجب أن تكون متحركة. تعطي كتلة الإكمال رد اتصال عندما يتم العرض مع أداء الرسوم المتحركة.

يمكن تحقيق أي نوع من الرسوم المتحركة تقريبًا مثل الحركة ، والقياس ، والدوران ، والتلاشي ، وما إلى ذلك في طريقة العرض باستخدام واجهة برمجة التطبيقات هذه.

الآن ، ضع في اعتبارك أنك تريد تحريك تغيير حجم الزر أو تريد عرض معين لتكبير الشاشة. هذه هي الطريقة التي يمكننا بها القيام بذلك باستخدام UIView.animate API:

 let newButtonWidth: CGFloat = 60 UIView.animate(withDuration: 2.0) { //1 self.button.frame = CGRect(x: 0, y: 0, width: newButtonWidth, height: newButtonWidth) //2 self.button.center = self.view.center //3 }

هذا ما نقوم به هنا:

1. نحن نطلق على طريقة UIView.animate مع قيمة المدة التي تم تمريرها إليها والتي تمثل المدة التي يجب أن تعمل بها الرسوم المتحركة ، الموصوفة داخل الكتلة.
2. قمنا بتعيين الإطار الجديد للزر الذي يجب أن يمثل الحالة النهائية للرسوم المتحركة.
3. قمنا بتعيين مركز الزر مع center الإشراف الخاص به بحيث يظل في منتصف الشاشة.

يجب أن تؤدي الكتلة أعلاه من رمز الرسوم المتحركة إلى تشغيل الرسوم المتحركة لإطار الزر المتغير من الإطار الحالي:

Width = 0, Height = 0

إلى الإطار النهائي:

Width = Height = newButtonWidth

وإليك ما ستبدو عليه الرسوم المتحركة:

animateWithDuration

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

على سبيل المثال ، إذا كنت ترغب في تحقيق تأثيرات التخميد الربيعي في الرسوم المتحركة التي قمنا بها أعلاه ، فهذه هي الطريقة التي ستبدو بها الشفرة:

 let newButtonWidth: CGFloat = 60 UIView.animate(withDuration: 1.0, //1 delay: 0.0, //2 usingSpringWithDamping: 0.3, //3 initialSpringVelocity: 1, //4 options: UIView.AnimationOptions.curveEaseInOut, //5 animations: ({ //6 self.button.frame = CGRect(x: 0, y: 0, width: newButtonWidth, height: newButtonWidth) self.button.center = self.view.center }), completion: nil)

إليك مجموعة المعلمات التي نستخدمها:

1. duration
   يمثل مدة الرسم المتحرك الذي يحدد المدة التي يجب أن تعمل كتلة الشفرة فيها.
2. delay
   يمثل التأخير الأولي الذي نريده قبل بدء الرسم المتحرك.
3. SpringWithDamping
   يمثل قيمة التأثير الربيعي الذي نريد أن يسلكه العرض. يجب أن تكون القيمة بين 0 إلى 1. فكلما انخفضت القيمة ، زاد اهتزاز الزنبرك.
4. velocity
   يمثل السرعة التي يجب أن تبدأ بها الرسوم المتحركة.
5. options
   نوع منحنى الرسوم المتحركة الذي تريد تطبيقه على عرض الرسوم المتحركة الخاص بك.
6. أخيرًا ، كتلة الكود حيث قمنا بتعيين إطار الزر الذي يجب أن يكون متحركًا. إنه نفس الرسم المتحرك السابق.

وإليك ما ستبدو عليه الرسوم المتحركة مع تكوين الرسوم المتحركة أعلاه:

UIViewPropertyAnimator

لمزيد من التحكم في الرسوم المتحركة ، UIViewPropertyAnimator مفيدًا حيث يوفر لنا طريقة لإيقاف الرسوم المتحركة مؤقتًا واستئنافها. يمكنك الحصول على توقيت مخصص وجعل الرسوم المتحركة تفاعلية وقابلة للمقاطعة. هذا مفيد جدًا عند تنفيذ الرسوم المتحركة التي تتفاعل أيضًا مع إجراءات المستخدم.

تعد إيماءة "Slide to Unlock" الكلاسيكية ورفض / توسيع عرض المشغل للرسوم المتحركة (في تطبيق الموسيقى) أمثلة على الرسوم المتحركة التفاعلية والمتقطعة. يمكنك البدء في تحريك العرض بإصبعك ، ثم تحريره وسيعود العرض إلى موضعه الأصلي. بدلاً من ذلك ، يمكنك التقاط العرض أثناء الرسم المتحرك ومتابعة سحبه بإصبعك.

فيما يلي مثال بسيط لكيفية تحقيق الرسوم المتحركة باستخدام UIViewPropertyAnimator :

 let newButtonWidth: CGFloat = 60 let animator = UIViewPropertyAnimator(duration:0.3, curve: .linear) { //1 self.button.frame = CGRect(x: 0, y: 0, width: newButtonWidth, height: newButtonWidth) self.button.center = self.view.center } animator.startAnimation() //2

هذا ما نقوم به:

1. نحن نطلق على UIViewProperty API بتمرير المدة ومنحنى الرسوم المتحركة.
2. على عكس كل من UIView.animate API أعلاه ، لن تبدأ الرسوم المتحركة إلا إذا حددتها بنفسك ، أي أنك تتحكم بشكل كامل في عملية / تدفق الرسوم المتحركة الكاملة.

الآن ، لنفترض أنك تريد المزيد من التحكم في الرسوم المتحركة. على سبيل المثال ، تريد تصميم كل إطار في الرسم المتحرك والتحكم فيه. هناك واجهة برمجة تطبيقات أخرى لذلك ، animateKeyframes . ولكن قبل الخوض في الأمر ، دعنا نلقي نظرة سريعة على ماهية الإطار في الرسوم المتحركة.

ما هو frame ؟

يتم تعريف مجموعة من التغييرات / الانتقالات في إطار العرض ، من حالة البداية إلى الحالة النهائية ، على أنها animation ويطلق على كل موضع في العرض أثناء الحركة اسم frame .

تحريك الإطارات الرئيسية

توفر واجهة برمجة التطبيقات هذه طريقة لتصميم الرسوم المتحركة بطريقة يمكنك من خلالها تحديد رسوم متحركة متعددة بتوقيتات وانتقالات مختلفة. بعد ذلك ، تدمج API ببساطة جميع الرسوم المتحركة في تجربة واحدة سلسة.

لنفترض أننا نريد تحريك زرنا على الشاشة بطريقة عشوائية. دعونا نرى كيف يمكننا استخدام واجهة برمجة تطبيقات الرسوم المتحركة للإطار الرئيسي للقيام بذلك.

 UIView.animateKeyframes(withDuration: 5, //1 delay: 0, //2 options: .calculationModeLinear, //3 animations: { //4 UIView.addKeyframe( //5 withRelativeStartTime: 0.25, //6 relativeDuration: 0.25) { //7 self.button.center = CGPoint(x: self.view.bounds.midX, y: self.view.bounds.maxY) //8 } UIView.addKeyframe(withRelativeStartTime: 0.5, relativeDuration: 0.25) { self.button.center = CGPoint(x: self.view.bounds.width, y: start.y) } UIView.addKeyframe(withRelativeStartTime: 0.75, relativeDuration: 0.25) { self.button.center = start } })

هذا هو الانهيار:

1. duration
   استدعاء API عن طريق تمرير مدة الرسوم المتحركة.
2. delay
   مدة التأخير الأولي للرسوم المتحركة.
3. options
   نوع منحنى الرسم المتحرك الذي تريد تطبيقه على عرض الرسوم المتحركة الخاص بك.
4. animations
   كتلة تأخذ جميع الرسوم المتحركة للإطارات الرئيسية المصممة من قبل المطور / المستخدم.
5. addKeyFrame
   استدعاء API لتصميم كل الرسوم المتحركة. في حالتنا ، حددنا كل حركة للزر. يمكن أن يكون لدينا العديد من الرسوم المتحركة التي نحتاجها ، مضافة إلى الكتلة.
6. relativeStartTime
   يحدد وقت بدء الرسم المتحرك في مجموعة كتلة الرسوم المتحركة.
7. relativeDuration
   يحدد المدة الإجمالية لهذه الرسوم المتحركة المحددة.
8. center
   في حالتنا ، نقوم ببساطة بتغيير الخاصية المركزية للزر لتحريك الزر حول الشاشة.

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

CoreAnimation

يتم ترجمة أي رسوم متحركة تستند إلى UIKit داخليًا إلى رسوم متحركة أساسية. وبالتالي ، فإن إطار عمل Core Animation يعمل كطبقة دعم أو العمود الفقري لأي رسوم متحركة UIKit. ومن ثم ، فإن جميع واجهات برمجة تطبيقات الرسوم المتحركة UIKit ليست سوى طبقات مغلفة لواجهات برمجة تطبيقات الرسوم المتحركة الأساسية بطريقة سهلة الاستهلاك أو مريحة.

لا توفر واجهات برمجة تطبيقات الرسوم المتحركة UIKit قدرًا كبيرًا من التحكم في الرسوم المتحركة التي تم إجراؤها على طريقة عرض نظرًا لاستخدامها في الغالب للخصائص المتحركة للعرض. ومن ثم في مثل هذه الحالات ، حيث تنوي التحكم في كل إطار من إطارات الرسوم المتحركة ، فمن الأفضل استخدام واجهات برمجة التطبيقات الأساسية للرسوم المتحركة الأساسية مباشرةً. بدلاً من ذلك ، يمكن استخدام كل من الرسوم المتحركة UIView والرسوم المتحركة الأساسية جنبًا إلى جنب أيضًا.

UIView + الرسوم المتحركة الأساسية

دعونا نرى كيف يمكننا إعادة إنشاء نفس الرسوم المتحركة لتغيير الزر مع تحديد منحنى التوقيت باستخدام واجهات برمجة تطبيقات UIView و Core Animation.

يمكننا استخدام وظائف توقيت CATransaction ، والتي تتيح لك تحديد منحنى الرسوم المتحركة والتحكم فيه.

دعنا نلقي نظرة على مثال للرسوم المتحركة لتغيير حجم الزر بنصف قطر الزاوية الخاص به باستخدام وظيفة توقيت CATransaction ومجموعة من الرسوم المتحركة UIView:

 let oldValue = button.frame.width/2 let newButtonWidth: CGFloat = 60 /* Do Animations */ CATransaction.begin() //1 CATransaction.setAnimationDuration(2.0) //2 CATransaction.setAnimationTimingFunction(CAMediaTimingFunction(name: CAMediaTimingFunctionName.easeInEaseOut)) //3 // View animations //4 UIView.animate(withDuration: 1.0) { self.button.frame = CGRect(x: 0, y: 0, width: newButtonWidth, height: newButtonWidth) self.button.center = self.view.center } // Layer animations let cornerAnimation = CABasicAnimation(keyPath: #keyPath(CALayer.cornerRadius)) //5 cornerAnimation.fromValue = oldValue //6 cornerAnimation.toValue = newButtonWidth/2 //7 button.layer.cornerRadius = newButtonWidth/2 //8 button.layer.add(cornerAnimation, forKey: #keyPath(CALayer.cornerRadius)) //9 CATransaction.commit() //10

هذا هو الانهيار:

1. begin
   يمثل بداية كتلة كود الحركة.
2. duration
   المدة الإجمالية للرسوم المتحركة.
3. curve
   يمثل منحنى التوقيت المطلوب تطبيقه على الرسم المتحرك.
4. UIView.animate
   أول رسم متحرك لدينا لتغيير إطار الزر.
5. CABasicAnimation
   نقوم بإنشاء كائن CABasicAnimation من خلال الإشارة إلى cornerRadius للزر باعتباره مسار المفاتيح لأن هذا هو ما نريد تحريكه. وبالمثل ، إذا كنت ترغب في الحصول على تحكم دقيق في مستوى الرسوم المتحركة للإطار الرئيسي ، فيمكنك استخدام فئة CAKeyframeAnimation .
6. fromValue
   يمثل قيمة البداية للرسوم المتحركة ، أي القيمة الأولية cornerRadius للزر من حيث يجب أن تبدأ الرسوم المتحركة.
7. toValue
   يمثل القيمة النهائية للرسوم المتحركة ، أي القيمة النهائية cornerRadius للزر حيث يجب أن تنتهي الحركة.
8. cornerRadius
   يجب أن نضبط خاصية cornerRadius للزر مع القيمة النهائية للرسوم المتحركة وإلا ستتم إعادة قيمة CornerRadius للزر تلقائيًا إلى قيمتها الأولية بعد اكتمال الرسم المتحرك.
9. addAnimation
   نقوم بإرفاق كائن الرسم المتحرك الذي يحتوي على تكوين عملية الرسوم المتحركة بأكملها بالطبقة من خلال تمثيل Keypath الذي يجب تنفيذ الرسوم المتحركة من أجله.
10. commit
    يمثل نهاية كتلة التعليمات البرمجية للرسوم المتحركة ويبدأ تشغيل الحركة.

هكذا ستبدو الرسوم المتحركة النهائية:

تعد هذه المدونة قراءة رائعة للمساعدة في إنشاء رسوم متحركة أكثر تقدمًا لأنها ترشدك بدقة عبر معظم واجهات برمجة تطبيقات Core Animation framework مع الإرشادات التي ترشدك خلال كل خطوة على الطريق.

UIKitDynamics

UIKit Dynamics هو محرك الفيزياء لـ UIKit والذي يمكّنك من إضافة أي سلوكيات فيزيائية مثل الاصطدام والجاذبية والدفع والاندفاع وما إلى ذلك ، إلى عناصر تحكم UIKit.

UIKitDynamicAnimator

هذه هي فئة المسؤول لإطار عمل UIKit Dynamics الذي ينظم جميع الرسوم المتحركة التي يتم تشغيلها بواسطة أي عنصر تحكم محدد في واجهة المستخدم.

سلوك ديناميكي

يمكّنك من إضافة أي سلوك فيزيائي إلى الرسام الذي يمكّنه بعد ذلك من الأداء على العرض المرفق به.

تشمل الأنواع المختلفة من سلوكيات UIKitDynamics ما يلي:

• UIAttachmentBehavior
• UICollisionBehavior
• UIFieldBehavior
• UIGravityBehavior
• UIPushBehavior
• UISnapBehavior

تبدو بنية UIKitDynamics شيئًا كهذا. لاحظ أنه يمكن استبدال العناصر من 1 إلى 5 بطريقة عرض واحدة.

دعونا نطبق بعض السلوكيات الفيزيائية على زرنا. سنرى كيفية تطبيق الجاذبية على الزر بحيث يمنحنا شعورًا بالتعامل مع كائن حقيقي.

 var dynamicAnimator : UIDynamicAnimator! var gravityBehavior : UIGravityBehavior! dynamicAnimator = UIDynamicAnimator(referenceView: self.view) //1 gravityBehavior = UIGravityBehavior(items: [button]) //2 dynamicAnimator.addBehavior(gravityBehavior) //3

هذا هو الانهيار:

1. UIKitDynamicAnimator
   لقد أنشأنا كائن UIKitDynamicAnimator الذي يعمل كمنسق لأداء الرسوم المتحركة. لقد مررنا أيضًا العرض الإشرافي للزر الخاص بنا باعتباره العرض المرجعي.
2. UIGravityBehavior
   لقد أنشأنا كائن UIGravityBehavior بتمرير الزر الخاص بنا إلى عناصر المصفوفة التي يتم إدخال هذا السلوك عليها.
3. addBehavior
   لقد أضفنا كائن الجاذبية إلى الرسوم المتحركة.
   
   يجب أن يؤدي ذلك إلى إنشاء رسم متحرك كما هو موضح أدناه:
   

   

   يجب أن نخبر رسام الرسوم المتحركة أن يعتبر الجزء السفلي من الشاشة هو الأرض. هذا هو المكان الذي يأتي فيه UICollisionBehavior إلى الصورة.
   
   

    var dynamicAnimator : UIDynamicAnimator! var gravityBehavior : UIGravityBehavior! var collisionBehavior : UICollisionBehavior! dynamicAnimator = UIDynamicAnimator(referenceView: self.view) //1 gravityBehavior = UIGravityBehavior(items: [button]) //2 dynamicAnimator.addBehavior(gravityBehavior) //3 collisionBehavior = UICollisionBehavior(items: [button]) //4 collisionBehavior.translatesReferenceBoundsIntoBoundary = true //5 dynamicAnimator.addBehavior(collisionBehavior) //6

4. UICollisionBehavior
   لقد أنشأنا كائن UICollisionBehavior على طول الزر بحيث يتم إضافة السلوك إلى العنصر.
5. translatesReferenceBoundsIntoBoundary
   يؤدي تمكين هذه الخاصية إلى إخبار مصمم الرسوم المتحركة بأخذ حدود طرق العرض المرجعية كنهاية ، وهي الجزء السفلي من الشاشة في حالتنا.
6. addBehavior
   لقد أضفنا سلوك التصادم إلى الرسوم المتحركة هنا.
   
   الآن ، يجب أن يضغط زرنا على الأرض ويقف ثابتًا كما هو موضح أدناه:
   

   

   
   هذا أنيق جدًا ، أليس كذلك؟
   
   الآن ، دعونا نحاول إضافة تأثير الارتداد حتى يشعر الجسم بمزيد من الواقعية. للقيام بذلك ، سوف نستخدم فئة UIDynamicItemBehavior .
   

    var dynamicAnimator : UIDynamicAnimator! var gravityBehavior : UIGravityBehavior! var collisionBehavior : UICollisionBehavior! var bouncingBehavior : UIDynamicItemBehavior! dynamicAnimator = UIDynamicAnimator(referenceView: self.view) //1 gravityBehavior = UIGravityBehavior(items: [button]) //2 dynamicAnimator.addBehavior(gravityBehavior) //3 collisionBehavior = UICollisionBehavior(items: [button]) //4 collisionBehavior.translatesReferenceBoundsIntoBoundary = true //5 dynamicAnimator.addBehavior(collisionBehavior) //6 //Adding the bounce effect bouncingBehavior = UIDynamicItemBehavior(items: [button]) //7 bouncingBehavior.elasticity = 0.75 //8 dynamicAnimator.addBehavior(bouncingBehavior) //9

7. UIDynamicItemBehavior
   لقد أنشأنا كائن UIDynamicItemBehavior بتمرير الزر بحيث يتم إضافة السلوك إلى العنصر.
8. elasticity
   يجب أن تكون القيمة بين 0-1 ، فهي تمثل المرونة ، أي عدد المرات التي يجب أن يرتد فيها الكائن عن الأرض ويصطدم بها. هذا هو المكان الذي يحدث فيه السحر - من خلال تعديل هذه الخاصية ، يمكنك التمييز بين أنواع مختلفة من الكائنات مثل الكرات والزجاجات والأشياء الصلبة وما إلى ذلك.
9. addBehavior
   لقد أضفنا سلوك التصادم إلى الرسوم المتحركة هنا.

الآن ، يجب أن يرتد زرنا عندما يصل إلى الأرض كما هو موضح أدناه:

هذا الريبو مفيد للغاية ويظهر جميع سلوكيات UIKitDynamics أثناء العمل. كما يوفر شفرة المصدر للتلاعب بكل سلوك. هذا ، في رأيي ، يجب أن يكون بمثابة قائمة واسعة من الطرق لأداء الرسوم المتحركة لنظام iOS على المشاهدات!

في القسم التالي ، سوف نلقي نظرة سريعة على الأدوات التي ستساعدنا في قياس أداء الرسوم المتحركة. أوصي أيضًا بإلقاء نظرة على طرق تحسين بناء Xcode الخاص بك لأنه سيوفر قدرًا كبيرًا من وقت التطوير الخاص بك.

ضبط الأداء

في هذا القسم ، سننظر في طرق قياس وضبط أداء الرسوم المتحركة لنظام iOS. بصفتك مطور iOS ، ربما تكون قد استخدمت بالفعل Xcode Instruments مثل Memory Leaks و Allocations لقياس أداء التطبيق العام. وبالمثل ، هناك أدوات يمكن استخدامها لقياس أداء الرسوم المتحركة.

أداة Core Animation

جرب أداة Core Animation وستتمكن من رؤية FPS التي توفرها شاشة تطبيقك. هذه طريقة رائعة لقياس أداء / سرعة أي رسم متحرك يتم عرضه في تطبيق iOS الخاص بك.

رسم

تم تخفيض معدل الإطارات في الثانية إلى حد كبير في التطبيق الذي يعرض محتوى ثقيلًا مثل الصور ذات التأثيرات مثل الظلال. في مثل هذه الحالات ، بدلاً من تخصيص الصورة مباشرةً لخاصية صورة UIImageView ، حاول رسم الصورة بشكل منفصل في سياق باستخدام واجهات برمجة تطبيقات Core Graphics. يؤدي هذا إلى تقليل وقت عرض الصورة بشكل مفرط عن طريق تنفيذ منطق إلغاء ضغط الصورة بشكل غير متزامن عند القيام به في سلسلة منفصلة بدلاً من السلسلة الرئيسية.

تنقيط

التنقيط هي عملية تُستخدم لتخزين معلومات الطبقة المعقدة مؤقتًا بحيث لا يتم إعادة رسم هذه العروض متى تم عرضها. تعد إعادة رسم المشاهدات السبب الرئيسي لتقليل معدل الإطارات في الثانية ، وبالتالي ، فمن الأفضل تطبيق التنقيط على العروض التي سيتم إعادة استخدامها عدة مرات.

تغليف

في الختام ، لقد لخصت أيضًا قائمة بالموارد المفيدة للرسوم المتحركة لنظام iOS. قد تجد هذا مفيدًا جدًا عند العمل على الرسوم المتحركة لنظام iOS. بالإضافة إلى ذلك ، قد تجد أيضًا هذه المجموعة من أدوات التصميم مفيدة كخطوة (تصميم) قبل الخوض في الرسوم المتحركة.

آمل أن أكون قادرًا على تغطية أكبر عدد ممكن من الموضوعات المحيطة برسوم iOS المتحركة. إذا كان هناك أي شيء قد فاتني في هذه المقالة ، فيرجى إبلاغي بذلك في قسم التعليقات أدناه وسأكون سعيدًا لتقديم الإضافة!