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