في أواخر العام الماضي، أنشأت موقع مؤتمر Chrome Dev Summit. ولقد أردتُ أن يكون لها شكل وأسلوب Material Design، لأنّها لغة تصميم رائعة، ورأيت أنّها تناسب نوع الموقع الإلكتروني الذي أريد إنشاءه. ولكن، كما هو الحال مع أي لغة تصميم جديدة، هناك أسئلة وتحديات وقرارات يجب اتخاذها، خاصةً عند التعامل مع اصطلاحات الويب.
من بين جوانب الموقع الإلكتروني التي كان من الصعب إنشاؤها بشكل خاص تأثير "الاستحواذ" عند النقر على إحدى البطاقات.
للحصول على تأثير كهذا بالمعدل 60 لقطة في الثانية، كان يتطلب الأمر بعض التفكير وإنشاء نماذج أولية وبعض الحلول الوسط المثيرة للاهتمام. وفي مؤتمر Chrome Dev Summit، تحدثت عن هذا التأثير وشرحت بتفاصيل دموية كيفية تطويره.
إنشاء صورة متحركة عالية الأداء
الصور المتحركة العالية الأداء، اليوم على الأقل، هي تلك التي تفضّل تركيب المتصفّح. إذا كان بمقدورك الالتزام بتغيير خصائص التحويل والتعتيم، فعادةً ما تحقق أداءً رائعًا. كان الأسلوب العام الذي اتّبعته في استخدام الصورة المتحركة للبطاقة هو التالي:
- يمكنك قياس موضع جميع العناصر في البطاقة عند تصغيرها.
- توسيع فئات البطاقة (بدون تأثيرات حركية) أو التبديل
- أعِد قياس موضع العناصر في البطاقة بعد أن تم توسيعها.
- حساب الاختلافات
- طبِّق التحويلات السالبة لنقل العناصر مرة أخرى إلى مواضع البدء.
- فعِّل الصور المتحركة.
- قم بإزالة التحويلات السالبة وشاهد العناصر وهي تتدفق إلى مواقعها النهائية على الشاشة.
قد يبدو كل هذا مكلفًا، ولكن هناك نافذة مدتها 100 ملي ثانية من اللحظة التي يتفاعل فيها المستخدم قبل بدء الرسوم المتحركة. وإذا زاد هذا العدد، سيلاحظ المستخدم تأخيرًا. يمكنك استخدام هذا الوقت في القيام بأعمال تحضيرية باهظة الثمن بحيث يمكنك تشغيلها بتكلفة أقل أثناء الرسوم المتحركة نفسها. هناك أيضًا نافذة في نهاية حوالي 50-100 مللي ثانية للقيام بعمل تنظيمي، وقد يكون ذلك مفيدًا حسب ما تحاول القيام به.
يتم العمل المكلف على تنفيذ الرسوم المتحركة خلال أول 100 ملي ثانية من أول 100 ملّي ثانية، وعلى جهاز Nexus 5، يستغرق العمل شيئًا في نطاق 70 ملي ثانية، لذلك هناك مساحة كافية لشرائها.
الحصول على الرمز
إذا كنت مهتمًا بالاطّلاع على الموقع الإلكتروني بمزيد من التفاصيل، سيسرّنا معرفة أنّه تم إصدار الرمز البرمجي على GitHub، لذا ننصحك بإلقاء نظرة عليه.