كيفية إنشاء محمل فافيكون المتحركة مع جافا سكريبت

ففيكنس هي جزء حاسم من العلامات التجارية عبر الإنترنت ، هم إعطاء جديلة البصرية للمستخدمين ، ومساعدتهم تمييز موقعك من الآخرين. على الرغم من أن معظم favicons ثابتة ، فمن الممكن أن إنشاء favicons المتحركة كذلك.

من المؤكد أن فافيكون تتحرك باستمرار مزعج بالنسبة لمعظم المستخدمين ، ويضر أيضًا بإمكانية الوصول ، ولكن عندما يتم تنشيطه فقط لفترة قصيرة استجابة لإجراء المستخدم أو حدث في الخلفية, مثل تحميل الصفحة ، ما في وسعها توفير معلومات مرئية إضافية-وبالتالي تحسين تجربة المستخدم.

في هذا المنشور ، سأريك كيفية إنشاء ملف محمل دائري متحرك في لوحة قماش HTML, وكيف يمكنك استخدامه بمثابة فافيكون. ل محمل فافيكون المتحركة هي أداة رائعة ل تصور التقدم المحرز في أي عمل يتم تنفيذها على صفحة ، مثل تحميل الملفات أو معالجة الصور. يمكنك إلقاء نظرة على عرض ينتمي إلى هذا البرنامج التعليمي على جيثب كذلك.

1. إنشاء جزء

أولا ، نحن بحاجة إلى إنشاء الرسوم المتحركة قماش أن يرسم دائرة كاملة ، 100 في المئة في المجموع (سيكون هذا الأمر مهمًا عندما نحتاج إلى زيادة القوس).

 حمل  

أنا أستخدم حجم فافيكون القياسي ، 16 * 16 بكسل ، للقماش. يمكنك استخدام حجم أكبر من ذلك إذا كنت تريد ، ولكن لاحظ أن صورة اللوحة ستكون خفضت إلى 16² منطقة بكسل عندما يتم تطبيقه باعتباره فافيكون.

2. تحقق مما إذا مدعوم

داخل ال ONLOAD () معالج الحدث ، ونحن الحصول على مرجع لعنصر قماش [السيرة الذاتية] باستخدام querySelector () الطريقة ، والرجوع كائن سياق الرسم 2D الخاص به [CTX] مع مساعدة من getContext () طريقة.

 onload = function () cv = document.querySelector ('# cvl') ، ctx = cv.getContext ('2d')؛ if (!! ctx) / * ... * /؛ 

نحن بحاجة أيضا إلى التحقق إذا كان قماش تدعمها UA عن طريق التأكد من أن كائن سياق الرسم [CTX] موجود وليس غير محدد. سنضع كل الكود الذي ينتمي إلى حدث التحميل في هذا إذا شرط.

3. إنشاء المتغيرات الأولية

دعنا نخلق ثلاثة متغيرات أكثر عالمية, الصورة ل زاوية الانطلاق للقوس, ح ل معرف لل setInterval () مؤقت, و معاهدة التعاون بشأن البراءات ل قيمة النسبة المئوية لنفس الموقت. الرمز ح = = 0 ٪ يعين 0 كما القيمة البدائية ل ح و معاهدة التعاون بشأن البراءات المتغيرات.

 onload = function () cv = document.querySelector ('# cvl') ، ctx = cv.getContext ('2d')؛ if (!! ctx) s = 1.5 * Math.PI، tc = pct = 0؛  ؛ 

لإظهار كيف قيمة الصورة تم حسابه ، واسمحوا لي أن أشرح بسرعة كيف زوايا القوس عمل.

زوايا القوس

ال زاوية ممدودة (الزاوية المكونة من الأشعة التي تحدد القوس) محيط الدائرة هو 2π راد, أين راد هو رمز وحدة راديان. هذا يجعل زاوية لربع قوس يساوي 0.5π راد.

متى تصور تقدم التحميل, نريد رسم الدائرة على القماش من المنصب الأعلى بدلا من الحق الافتراضي.

الذهاب في اتجاه عقارب الساعة (يتم رسم قوس الاتجاه الافتراضي على القماش) من الموضع الصحيح, النقطة العليا هي وصلت بعد ثلاثة أرباع, أي بزاوية 1.5π راد. وبالتالي ، لقد قمت بإنشاء المتغير s = 1.5 * Math.PI لاحقا تشير إلى زاوية الانطلاق للأقواس ليتم استخلاصها من القماش.

4. نمط الدائرة

بالنسبة لكائن سياق الرسم ، نحدد عرض الخط و strokeStyle خصائص الدائرة نحن نرسم في الخطوة التالية. ال strokeStyle الملكية تقف على لونها.

 onload = function () cv = document.querySelector ('# cvl') ، ctx = cv.getContext ('2d')؛ if (!! ctx) s = 1.5 * Math.PI، tc = pct = 0؛ ctx.lineWidth = 2؛ ctx.strokeStyle = 'الفوشيه' ؛  ؛ 

5. ارسم الدائرة

نحن إضافة معالج أحداث النقر إلى زر التحميل [#lbtn] التي يطلق setInterval الموقت من 60 ميلي ثانية, الذي ينفذ الوظيفة المسؤولة عن رسم الدائرة [updateLoader ()] كل 60ms حتى يتم رسم الدائرة بالكامل.

ال setInterval () طريقة إرجاع معرف الموقت لتحديد الموقت الذي تم تعيينه ل ح متغير.

 onload = function () cv = document.querySelector ('# cvl') ، ctx = cv.getContext ('2d')؛ if (!! ctx) s = 1.5 * Math.PI، tc = pct = 0، btn = document.querySelector ('# lbtn')؛ ctx.lineWidth = 2؛ ctx.strokeStyle = 'الفوشيه' ؛ btn.addEventListener ('click'، function () tc = setInterval (updateLoader، 60)؛)؛  ؛ 

6. إنشاء updateLoader () وظيفة مخصصة

حان الوقت لإنشاء العرف updateLoader () وظيفة هذا هو أن يكون دعا من قبل setInterval () طريقة عند النقر فوق الزر (يتم تشغيل الحدث). اسمح لي أن أريك الكود أولاً ، ثم يمكننا أن نتفق مع الشرح.

 function updateLoader () ctx.clearRect (0، 0، 16، 16)؛ ctx.beginPath ()؛ ctx.arc (8 ، 8 ، 6 ، s ، (pct * 2 * Math.PI / 100 + s)) ؛ ctx.stroke ()؛ if (pct === 100) clearInterval (tc)؛ إرجاع؛  pct ++ ؛  

ال clearRect () طريقة مسح المنطقة المستطيلة من القماش المعرفة بمعلماتها: إحداثيات (س ، ص) في الزاوية العلوية اليسرى. ال clearRect (0 ، 0 ، 16 ، 16) خط يمحو كل شيء في قماش 16 * 16 بكسل أنشأنا.

ال beginPath () طريقة يخلق طريقا جديدا للرسم ، و السكتة الدماغية() طريقة يرسم على هذا المسار الذي تم إنشاؤه حديثا.

عند نهاية ال updateLoader () وظيفة ، و عدد النسبة المئويةمعاهدة التعاون بشأن البراءات] يتزايد بنسبة 1, وقبل الزيادة نحن تحقق مما إذا كان يساوي 100. عندما يكون 100 في المئة ، و setInterval () مؤقت (تم تحديده بواسطة معرف المؤقت, ح) يتم مسح مع مساعدة من clearInterval () طريقة.

المعلمات الثلاثة الأولى لل قوس() الطريقة هي (س ، ص) إحداثيات مركز القوس و نصف قطرها. المعلمات الرابعة والخامسة تمثل بداية ونهاية الزوايا عندها يبدأ رسم القوس وينتهي.

قررنا بالفعل نقطة البداية لدائرة اللودر ، التي هي في الزاوية الصورة, وسوف يكون نفسه في جميع التكرارات.

زاوية النهاية سوف زيادة مع عدد المئة, يمكننا حساب حجم الزيادة بالطريقة الآتية. قل 1٪ (القيمة 1 من 100) هي أي ما يعادل الزاوية α من 2π في دائرة (2π = زاوية محيط كامل) ، ثم يمكن كتابة نفس المعادلة التالية:

1/100 = α/ 2π

عند إعادة ترتيب المعادلة:

 α = 1 * 2π / 100 α = 2π/ 100 

لذلك ، 1 ٪ تعادل الزاوية 2π/ 100 في دائرة. وبالتالي ، فإن زاوية النهاية خلال كل زيادة في المئة هي يحسب بضرب 2π/ 100 من قيمة النسبة المئوية. ثم النتيجة مضاف إلى الصورة (زاوية البدء), لذلك الأقواس هي مستمدة من نفس الموقف البداية كل مرة. هذا هو السبب في أننا استخدمنا pct * 2 * Math.PI / 100 + s صيغة لحساب زاوية النهاية في مقتطف الشفرة أعلاه.

7. أضف الفافيكون

دعنا نضع عنصر ارتباط فافيكون في HTML القسم ، إما مباشرة أو عبر جافا سكريبت.

في ال updateLoader () وظيفة ، أولا نحن جلب favicon باستخدام querySelector () الطريقة ، وتعيينها إلى LNK متغير. ثم نحن بحاجة إلى تصدير صورة قماش في كل مرة يتم رسم قوس في صورة مشفرة باستخدام toDataURL () الطريقة ، و تعيين هذا المحتوى محتوى URI كصورة فافيكون. هذا يخلق فافيكون المتحركة التي هي نفس محمل القماش.

 onload = function () cv = document.querySelector ('# cvl') ، ctx = cv.getContext ('2d')؛ إذا (!! ctx) s = 1.5 * Math.PI ، tc = pct = 0 ، btn = document.querySelector ('# lbtn') ، lnk = document.querySelector ('link [rel = "icon"]') . ctx.lineWidth = 2؛ ctx.strokeStyle = 'الفوشيه' ؛ btn.addEventListener ('click'، function () tc = setInterval (updateLoader، 60)؛)؛  ؛ function updateLoader () ctx.clearRect (0، 0، 16، 16)؛ ctx.beginPath ()؛ ctx.arc (8 ، 8 ، 6 ، s ، (pct * 2 * Math.PI / 100 + s)) ؛ ctx.stroke ()؛ lnk.href = cv.toDataURL ('image / png') ؛ if (pct === 100) clearTimeout (tc)؛ إرجاع؛  pct ++ ؛  

يمكنك إلقاء نظرة على الكود الكامل على جيثب.

المكافأة: استخدم أداة التحميل لأحداث المزامنة

عندما تحتاج إلى استخدام هذه الرسوم المتحركة قماش بالتزامن مع إجراء التحميل في صفحة ويب ، قم بتعيين updateLoader () وظيفة كما معالج الحدث ل تقدم () الحدث من العمل.

على سبيل المثال ، سيتغير JavaScript لدينا مثل هذا في أجاكس:

 onload = function () cv = document.querySelector ('# cvl') ، ctx = cv.getContext ('2d')؛ if (!! ctx) s = 1.5 * Math.PI، lnk = document.querySelector ('link [rel = "icon"]')؛ ctx.lineWidth = 2؛ ctx.strokeStyle = 'الفوشيه' ؛  var xhr = new XMLHttpRequest ()؛ xhr.addEventListener ('التقدم' ، updateLoader) ؛ xhr.open ('GET'، 'https://xyz.com/abc')؛ xhr.send ()؛ ؛ وظيفة updateLoader (evt) ctx.clearRect (0، 0، 16، 16)؛ ctx.beginPath ()؛ ctx.arc (8، 8، 6، s، (evt.loaded * 2 * Math.PI / evt.total + s))؛ ctx.stroke ()؛ lnk.href = cv.toDataURL ('image / png') ؛  

في ال قوس() الطريقة ، استبدل قيمة النسبة المئويةمعاهدة التعاون بشأن البراءات] مع ال محمل خاصية الحدث-يشير إلى مقدار الملف الذي تم تحميله ، بدلاً من 100 استخدم ال مجموع خاصية ProgressEvent, مما يدل على المبلغ الإجمالي ليتم تحميلها.

هناك لا حاجة الى setInterval () في مثل هذه الحالات ، مثل تقدم () الحدث هو أطلقت تلقائيا كما تقدم التحميل.