هذا هو أول شيء يبحثون عنه عند التبديل بين علامات تبويب المتصفح. لقد قدمنا للتو واحدًا من الأوصاف المحتملة لما يُسمى favicon. تعد مساحة الشاشة التي تشغل علامة تبويب صفحة الويب مورداً أكثر قيمة بكثير مما يعتقد الكثير من الناس. إذا كنت تعمل جيدًا مع التصنيف ، فبالإضافة إلى الاستمرار في لعب دور معرف الصفحة ، فقد يصبح الأمر بمثابة "لوحة رسائل" تخبرك بما يحدث بالضبط على الصفحة.
فافيكونفي الواقع ، تعتبر الأيقونات مفيدة بشكل خاص عندما يتعلق الأمر بعلامات تبويب المتصفح غير النشطة. النظر في مثال.
لنفترض أنك قمت بتحميل الصور التي تم التقاطها في عطلة صيفية حديثة إلى خدمة سحابية باستخدام صفحة الويب الخاصة بها. أثناء تحميل الصور ، يمكنك فتح علامة تبويب متصفح جديدة للعثور على تفاصيل حول الأماكن التي كنت فيها واستخدامها في تسميات توضيحية للصور. أثناء البحث عن كل هذا ، يتمسك أحدهما بالآخر ، والآن تشاهد Casey Neistat في علامة التبويب السابعة من المتصفح. لكن لا يمكنك متابعة ماراثون YouTube بأمان. تنظر دوريًا إلى صفحة الخدمة السحابية لمعرفة ما إذا كان قد تم تحميل صورك بالفعل.
هذا هو الحال عندما تكون مبدعًا! ماذا لو استطعنا تغيير وحدات البكسل التي تشكل فافيكون ديناميكيًا وعرض معلومات حول عملية تحميل الملف في اختصار الصفحة؟ في الحقيقة ، هذا ما سنفعله هنا.
في المتصفحات التي تدعم ذلك ، يمكنك عرض بعض الرسوم المتحركة كتعديل صوتي باستخدام جافا سكريبت ،
<canvas> HTML
<canvas> وقواعد الهندسة القديمة.
إليك الشكل الذي يبدو عليه تحميل الرسوم المتحركة في علامة تبويب المتصفح.
انطلق مباشرة إلى العمل وابدأ بأبسط الطرق. وهي إضافة عناصر
<link> و
<canvas> إلى رمز HTML للصفحة:
<head> <link rel="icon" type="image/png" href="" width=32px> </head> <body> <canvas width=32 height=32></canvas> </body>
عند استخدام هذه التقنية في الممارسة العملية ، ربما تريد إخفاء
<canvas> . طريقة واحدة للقيام بذلك هي استخدام سمة HTML
hidden :
<canvas hidden width=32 height=32></canvas>
سأترك
<canvas> مرئيًا حتى نتمكن من مشاهدة كيفية عرض الرسوم المتحركة في وقت واحد على حد سواء على favicon وعلى
<canvas> . كلاهما بحجم فافيكون قياسي - 32 × 32 بكسل.
لأغراض العرض التوضيحي ، سنضيف زرًا إلى الصفحة ، بالنقر فوق الذي يبدأ في تشغيل الرسوم المتحركة. أضف التالي إلى كود HTML للصفحة:
<button>Load</button>
الآن دعنا ندخل كود JavaScript. دعونا نتحقق من دعم
canvas أولاً:
onload = ()=> { canvas = document.querySelector('canvas'), context = canvas.getContext('2d'); if (!!context) { } };
التالي - قم بتوصيل معالج أحداث النقر بالزر ، والذي سيتم استخدامه لبدء الحركة في
<canvas> :
button = document.querySelector('button'); button.addEventListener('click', function() { n = 0, loadingInterval = setInterval(drawLoader, 60); });
إن الكيان
drawLoader الذي قمنا
drawLoader إلى
setInterval هي وظيفة سيتم استدعاؤها في فواصل زمنية تبلغ 60 مللي ثانية وإخراج شيء إلى
<canvas> . قبل أن نكتب الكود الخاص بهذه الوظيفة ، فلنصف نمط الخط الذي سنستخدمه لرسم مربع تدريجيًا ، وهو مؤشر التحميل.
let gradient = context.createLinearGradient(0, 0, 32, 32); gradient.addColorStop(0, '#c7f0fe'); gradient.addColorStop(1, '#56d3c9'); context.strokeStyle = gradient; context.lineWidth = 8;
في وظيفة
drawLoader خطوطًا استنادًا إلى عدد بالمائة من خطوات الرسوم المتحركة التي تم إكمالها بالفعل. في حالتنا ، 1 خطوة الرسوم المتحركة يتوافق مع 1 ٪. وهي ، خلال الـ 25٪ الأولى من الخطوات ، سيتم عرض خط يمثل الجانب العلوي من المربع تدريجيًا. سيتم عرض الـ 25٪ التالية من الخطوات على الجانب الأيمن من المربع ، وهكذا - 25٪ من وقت الحركة على كل جانب.
يتم تحقيق تأثير الحركة من خلال مسح محتويات
<canvas> وإخراج خط ممدود قليلاً مقارنة بالخطوة السابقة. في كل خطوة من الرسوم المتحركة ، بعد انتهاء إخراج الصورة إلى
<canvas> ، يتم تحويل الصورة بسرعة إلى تنسيق PNG وتعيينها كصفحة فافيكون للصفحة.
function drawLoader() { with(context) { clearRect(0, 0, 32, 32); beginPath(); if (n<=25){
الآن دعونا نفعل الحسابات التي سوف تساعدنا على رسم الخطوط اللازمة.
فيما يلي البيانات المستخدمة لإخراج الجانب العلوي للمربع تدريجيًا خلال أول 25 خطوة من الرسوم المتحركة:
- نقطة البداية هي الزاوية العليا اليسرى من الصورة (0،0).
- n هو رقم خطوة الحركة الحالية.
- x هو إحداثي
x لنقطة نهاية السطر في خطوة الحركة الحالية. - y هو إحداثي
y لنقطة النهاية ، وهو 0.
نحتاج إلى أنه بعد الانتهاء من جميع الخطوات الـ 25 للرسوم المتحركة ، ستكون قيمة
x هي 32 (أي ، حجم favicon
<canvas> ). لذلك ، سوف نبحث عن قيمة
x في الخطوة الحالية للرسوم المتحركة
n وفقًا للصيغة التالية:
x = (32/25) * n
إليك ما يبدو عليه رمز رسم السطر الذي يتم تطبيق هذا المنطق عليه:
moveTo(0, 0); lineTo((32/25)*n, 0);
يتم تنفيذ الخطوات المتحركة الـ 25 التالية (رسم الجانب الأيمن من المربع) بطريقة مماثلة:
moveTo(0, 0); lineTo(32, 0); moveTo(32, 0); lineTo(32, (32/25)*(n-25));
وإليك الرمز الكامل لوظيفة
drawLoader :
function drawLoader() { with(context) { clearRect(0, 0, 32, 32); beginPath(); if (n<=25){ moveTo(0, 0); lineTo((32/25)*n, 0); } else if(n>25 && n<=50){ moveTo(0, 0); lineTo(32, 0); moveTo(32, 0); lineTo(32, (32/25)*(n-25)); } else if(n>50 && n<= 75){ moveTo(0, 0); lineTo(32, 0); moveTo(32, 0); lineTo(32, 32); moveTo(32, 32); lineTo(-((32/25)*(n-75)), 32); } else if(n>75 && n<=100){ moveTo(0, 0); lineTo(32, 0); moveTo(32, 0); lineTo(32, 32); moveTo(32, 32); lineTo(0, 32); moveTo(0, 32); lineTo(0, -((32/25)*(n-100))); } stroke(); }
النتائج
هذا كل شئ! يمكن العثور على رمز إنشاء مؤشر تحميل مستطيل ، والذي نقوم بتطويره هنا ، في
هذا المستودع.
وهنا مستودع مع رمز مؤشر التحميل تحميل. في الواقع ، يمكنك ، كمؤشر مشابه ، استخدام أي شكل. وإذا كنت تعمل مع سمة
fill الخاصة
<canvas> ، فسوف يتيح لك ذلك تحقيق تأثيرات مثيرة للاهتمام.
أعزائي القراء! هل هناك أي مشاريع في منطقتك تستفيد من الرسوم المتحركة المفضلة؟
