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