مرحبا بالجميع!
لقد انتهى عيد الميلاد لفترة طويلة ، ولكن بعد ذلك ، لدينا قصة مثيرة للاهتمام حول كيفية استخدام ميزة Core Animation التي نادراً ما تستخدم لإنشاء مزاج احتفالي للمستخدمين. أشارك في ترجمة مقال لزميلي في لندن أليكسيس.
كان عيد الميلاد دائمًا أحد أيامي المفضلة في السنة بالنسبة لي. يجلب الكثير من الحب والضحك والسعادة والسحر لحياتنا.
لقد ولدت وترعرعت في إسبانيا ، على جزيرة تينيريفي - جزيرة مشمسة في وسط المحيط الأطلسي قبالة ساحل أفريقيا. وصدقوني ، يختلف عيد الميلاد في تينيريفي عن عيد الميلاد في لندن ، حيث التقيت به خلال العامين الماضيين (منذ أن بدأت العمل في Badoo).
واحدة من فوائد العيش في لندن بالنسبة لي كانت تفكر في الثلج. هنا رأيتهم للمرة الأولى في حياتي ، كان الأمر ببساطة لا يصدق!
تذكر هذا ، قررت أن أطلعكم على قصة مثيرة للاهتمام حدثت معي في المكتب قبل عيد الميلاد بفترة وجيزة ، قبل ذهابي إلى تينيريفي للاحتفال بالعيد مع عائلتي.
لقد حدث أن تم تكليفي بمهمة واحدة غير عادية مع الوصف التالي:
هم ، مضحك جدا. أردنا إضافة الرسوم المتحركة لعيد الميلاد مع رقاقات الثلج إلى تطبيق iOS الخاص بنا ، وأصبحت محظوظًا لإنشائه. لكنني لم أعرف من أين أبدأ.
كالعادة ، تم إرفاق ملف Sketch بالمهمة مع التصميم اللازم ، والذي بدا مثل هذا:
على الأقل رأيت ما نحتاجه ، لكنني لم أكن متأكدة تمامًا من الطريقة التي ينبغي أن تتصرف بها هذه الثلج. لتوضيح كل التفاصيل ، ذهبت للتحدث مع المصممين.
كما اشتبهت ، كان لديهم بالفعل رسما كبيرا في رسم
After Effects .
أوضح لي المصممون أنهم أرادوا إضافة رقاقات ثلجية تتساقط من أعلى إلى الرسوم المتحركة الموجودة بالفعل لبدء تشغيل التطبيق (بالإضافة إلى قبعة سانتا على شعارنا ، لكنها كانت بديلاً بسيطًا للصورة ، لا يستحق الذكر في هذه المقالة).
كنت أعلم أن الرسوم المتحركة لإطلاق تطبيق على iOS تم تصنيعها باستخدام
Lottie ، لأنه تمت إضافته بعد انضمامي إلى الشركة (يمكن العثور على التفاصيل في المقال من قبل
Radek Cieciwa ). ومع ذلك ، أخبرت المصممين أنني سأحاول إيجاد حلول أبسط لعرض رقاقات الثلج (دون الحاجة إلى استخدام Lottie) - وبدأت في استكشاف الطرق المختلفة.
إليكم رسم متحرك صنعه زميلي Radek من أجل Badoo. الكمال!
وهكذا أضفت سقوط الثلج المتساقط. تريد أن تعرف كيف فعلت ذلك؟ ستجد الجواب أدناه.
نظم الجسيمات
أثناء قراءة الوثائق المختلفة حول الرسوم المتحركة ، تذكرت أنه في الألعاب والأفلام ، تُستخدم أنظمة الجسيمات غالبًا لحل هذه المشكلات.
تصف
ويكيبيديا هذا المفهوم بدقة تامة:
"نظام الجسيمات عبارة عن طريقة تستخدم في رسومات الكمبيوتر لتمثيل الأشياء التي ليس لها حدود هندسية واضحة (السحب المختلفة ، السدم ، الانفجارات ، نفثات البخار ، القطارات من الصواريخ ، الدخان ، الثلج ، المطر ، إلخ). يمكن تنفيذ أنظمة الجسيمات في كل من الرسومات ثنائية الأبعاد وثلاثية الأبعاد. "
تم استخدام هذه التقنية لأول مرة في عام 1982 في ستار تريك 2: غضب خان ، لإنشاء "تأثير التكوين".
يتكون نظام الجسيمات من واحد أو أكثر من الرسومات الأولية ، مثل النقاط أو الخطوط أو الصور ، والتي تسمى الجزيئات. يتم إنشاء هذه الجزيئات وتنبعث من باعث يمثل جزءًا من نظام الجسيمات.
كل جسيم لديه مجموعة من المعلمات التي تؤثر بشكل مباشر أو غير مباشر على سلوكها وتحديد كيفية رسمها. يمكن أن تتحرك الجزيئات في وقت واحد بأعداد كبيرة وفي اتجاهات مختلفة ، على سبيل المثال ، لإنشاء تأثير السائل.
الرسوم المتحركة سارية المفعول عندما تنبعث الجزيئات من قبل النظام. ينبعث النظام الجسيمات في أماكن عشوائية داخل المنطقة المحددة من نظام الجسيمات. يمكن أن يتخذ أشكالًا مختلفة: دائرة ، مستطيل ، كرة ، مربع ، خط ، نقطة ، إلخ.
يحدد النظام أيضًا خصائص الجزيئات التي تؤثر على هندستها وسرعتها ومعلماتها الأخرى. APIs باعث مختلفة لها أسماء مختلفة لخصائص مماثلة.
عندما ينبعث النظام من الجزيئات في نفس الوقت ، فإنها تخلق رسوم متحركة مذهلة يمكن أن تبدو مثل المطر أو النار أو الثلج.
من النظرية إلى الممارسة
اعتقدت أن شركة أبل على الأرجح لديها دعم نظام الجسيمات المدمج في أحد أطرها. وأظهرت نتائج عمليات البحث التي أجريتها أنني على صواب.
نظام الجسيمات هو جزء من إطار Core Animation وهو موصوف جيدًا في
فصول CAEmitterLayer و
CAEmitterCell .
بعد دراسة جميع المعلومات اللازمة حول نظام الجسيمات وواجهة برمجة التطبيقات المدعومة على نظام iOS ، انتقلت إلى الجزء المفضل - تطبيق فكرتنا.
لسوء الحظ ، عيد الميلاد ليس إلى الأبد ، لذلك كنا بحاجة إلى القدرة على إيقاف تشغيل الثلج عن بعد بعد 25 ديسمبر.
كما ذكرت أعلاه ، تم تنفيذ الرسوم المتحركة لإطلاق التطبيق باستخدام Lottie. بمعنى ، كنت بحاجة لإيجاد طريقة لإضافة رقاقات الثلج بطريقة لم تؤثر على الرسوم المتحركة الحالية ورمزها ، لأنه كان يجب حذف حلّي فور الإصدار.
لقد وجدت طريقة بسيطة جدًا للقيام بذلك - لقد أضفت UIView شفافة جديدة لإظهار رقاقات الثلج أمام الرسوم المتحركة والخلفية الحالية وبعد ذلك تتحكم في مظهرها عن بُعد باستخدام علامة.
توضح الصورة أعلاه UIView التي تم استخدامها في الحل النهائي:
- UIView مع نظام الجسيمات التي تنبعث منها الثلج.
- UIViews المستخدمة في الرسوم المتحركة إطلاق تطبيق يحركها لوتي.
بعد حل هذه المشكلة ، اضطررت إلى إنشاء مكون يحتوي على منطق انبعاث الجسيمات لتوليد رقاقات الثلج المتحركة.
بالنسبة للمبتدئين ، كنت بحاجة لصور الثلج التي يمكنني استخدامها كمحتوى للباعث. يجب أن تكون بسيطة جدا ، أليس كذلك؟
كل ندفة الثلج كانت إما دائرة بيضاء عادية أو غير واضحة. أنا خلقت لهم نفسي في رسم.
بعض تفاصيل التنفيذ
CAEmitterLayer هو CALayer خاص يقوم بإنشاء نظام الجسيمات وتنشيطه وإظهاره. إنها تتيح لك التحكم في الهندسة والموقع ووضع الرسم وغير ذلك الكثير.
بدأت في تطوير الرسوم المتحركة عن طريق إنشاء طبقة:
snowEmitterLayer.emitterShape = CAEmitterLayerEmitterShape.line snowEmitterLayer.beginTime = CACurrentMediaTime() snowEmitterLayer.timeOffset = 10.0
كنت بحاجة إلى تغيير ثلاثة خصائص فقط:
- emitterShape : يحدد شكل الطبقة. لقد استخدمت خطًا سمح لظهور الثلج بالظهور على كامل الشاشة ؛
- startTime : هو جزء من بروتوكول CAMediaTiming ويمثل وقت بدء الرسوم المتحركة للطبقة بالنسبة إلى الرسوم المتحركة للطبقة الأصلية ؛
- timeOffset : هو أيضًا جزء من بروتوكول CAMediaTiming ، وهو في جوهره عبارة عن رسوم متحركة سريعة التقدم لوقت معين بالنسبة إلى بدايتها. لقد حددت قيمة 10 ثوان ، الأمر الذي أدى إلى حقيقة أنه في الوقت الحالي بدأت الرسوم المتحركة ، وكانت رقاقات الثلج قد غطت بالفعل الشاشة بأكملها ، وهذا ما أردناه بالضبط (إذا قمت بتعيين القيمة على 0 ثانية ، فستبدأ رقاقات الثلج في الظهور وتغطي الشاشة تماما فقط بعد بعض الوقت).
بعد أن انتهيت من وضع طبقة نهائية ، قمت بإنشاء بواعثين مختلفين: أثقل للثلوج وأسهل للثلوج.
بالنسبة للثلوج الكثيفة ، قمت بإعداد الباعث على النحو التالي:
let flakeEmitterCell = CAEmitterCell() flakeEmitterCell.contents = UIImage(named: "snowflake_dot")!.cgImage flakeEmitterCell.emissionRange = .pi flakeEmitterCell.lifetime = 20.0 flakeEmitterCell.birthRate = 30 flakeEmitterCell.scale = 0.15 flakeEmitterCell.scaleRange = 0.6 flakeEmitterCell.velocity = 30.0 flakeEmitterCell.velocityRange = 20 flakeEmitterCell.spin = -0.5 flakeEmitterCell.spinRange = 1.0 flakeEmitterCell.yAcceleration = 30.0 flakeEmitterCell.xAcceleration = 5.0
كما ترون ، اضطررت إلى تغيير عدد كبير من الخصائص ، كل منها مهم جدًا لتحقيق التأثير المطلوب:
- المحتويات : CGImage تستخدم لعرض ندفة ثلجية واحدة (كما تتذكر ، هذه واحدة من تلك الصور التي خلقتها بنفسي) ؛
- emissionRange : الزاوية بالراديان التي تحدد المخروط الذي ستظهر به الجزيئات (اخترت زاوية PI بحيث تكون الجسيمات مرئية على الشاشة بأكملها) ؛
- العمر : يحدد عمر جسيم واحد ؛
- معدل الميلاد : يحدد عدد الجسيمات المنبعثة في كل ثانية ؛
- scale and scaleRange : يؤثر على حجم الجسيمات ، حيث قيمة 1.0 هي الحد الأقصى للحجم ؛ يحدد الفاصل الزمني الانحرافات في الحجم بين الجزيئات التي تم إنشاؤها ، مما يسمح بانبعاث جزيئات ذات أحجام عشوائية ؛
- السرعة و السرعة : تؤثر على سرعة ظهور الجسيمات ؛ ينحرف بشكل عشوائي ضمن القيمة المحددة في velocityRange ؛
- spin and spinRange : تؤثر على سرعة الدوران ، المقاسة بالراديان في الثانية الواحدة ، والانحراف العشوائي ضمن القيمة المحددة في spinRange ؛
- yAcceleration و xAcceleration : هذان مكونان من مكونات ناقل التسارع المطبق على باعث.
كنت بحاجة أيضًا إلى باعث ثانٍ لإنشاء رقاقات ثلجية خفيفة. ظلت جميع الخصائص دون تغيير ، باستثناء اثنين:
- المحتويات : أنا هنا صور مع دائرة ضبابية.
- السرعة : وهنا اضطررت إلى تقليل سرعة السقوط لجعل الثلج يتساقط.
let blurryFlakeEmitterCell = CAEmitterCell() blurryFlakeEmitterCell.contents = UIImage(named: "snowflake_blurry_dot")?.cgImage blurryFlakeEmitterCell.velocity = 40
استطعت فقط توصيل الطبقة والبواعث ، والتي تبين أنها سهلة للغاية:
snowEmitterLayer.emitterCells = [flakeEmitterCell, blurryFlakeEmitterCell] self.layer.addSublayer(snowEmitterLayer)
استنتاج
لقد صنعت بسرعة نسخة عمل مع تساقط الثلوج ، والتي بدت جيدة للغاية. كان التنفيذ بسيطًا ولم يغير الكود الموجود. أظهرتها للمصممين ، وقد أحبوا ذلك حقًا.
يمكن أن تكون الرسوم المتحركة لنظام الجسيمات مؤثرة جدًا وسهلة التنفيذ نسبيًا إذا كانت لديك الأدوات الصحيحة.
يمكن العثور على مزيد من المعلومات حول أنظمة الجسيمات في المصادر التالية: