जावास्क्रिप्ट के साथ एक एनिमेटेड फ़ेविकॉन लोडर कैसे बनाएं

पसंदीदा आइकन ऑनलाइन ब्रांडिंग का एक महत्वपूर्ण हिस्सा हैं, वे एक दृश्य क्यू दे उपयोगकर्ताओं के लिए, और उनकी मदद करें अपनी साइट को अलग करें दूसरों से। यद्यपि अधिकांश फ़ेविकॉन स्थिर हैं, यह संभव है एनिमेटेड फ़ेविकॉन बनाएँ भी.

एक निरंतर गतिमान फ़ेविकॉन निश्चित रूप से अधिकांश उपयोगकर्ताओं के लिए कष्टप्रद होता है, और एक्सेसिबिलिटी को भी नुकसान पहुँचाता है, हालाँकि जब यह थोड़े समय के लिए ही एनिमेटेड होता है एक उपयोगकर्ता कार्रवाई या एक पृष्ठभूमि घटना के जवाब में, जैसे पृष्ठ लोड, यह कर सकते हैं अतिरिक्त दृश्य जानकारी प्रदान करें-इसलिए उपयोगकर्ता अनुभव में सुधार.

इस पोस्ट में, मैं आपको दिखाऊंगा कि कैसे बनाएं एक HTML कैनवास में एनिमेटेड परिपत्र लोडर, और आप इसे फ़ेविकॉन के रूप में कैसे उपयोग कर सकते हैं। एक एनिमेटेड फ़ेविकॉन लोडर के लिए एक महान उपकरण है किसी भी कार्य की प्रगति की कल्पना करें पृष्ठ पर प्रदर्शन किया जाता है, जैसे फ़ाइल अपलोड करना या छवि प्रसंस्करण। आप पर एक नजर डाल सकते हैं इस ट्यूटोरियल से संबंधित डेमो पर Github भी.

1. बनाएँ तत्त्व

सबसे पहले, हमें करने की आवश्यकता है एक कैनवास एनीमेशन बनाएँ उस एक पूर्ण चक्र खींचता है, कुल में 100 प्रतिशत (यह महत्वपूर्ण होगा जब हमें चाप को बढ़ाना होगा).

 भार  

मैं कैनवास के लिए मानक फ़ेविकॉन आकार, 16 * 16 पिक्सल का उपयोग कर रहा हूं। यदि आप चाहें तो इससे बड़े आकार का उपयोग कर सकते हैं, लेकिन ध्यान दें कि कैनवास की छवि होगी नीचे 16 तक बढ़ाया गया² पिक्सेल क्षेत्र जब इसे फेविकॉन के रूप में लागू किया जाता है.

2. जाँच करें कि क्या समर्थित है

के अंदर गोली भरना() ईवेंट हैंडलर, हम कैनवास तत्व के लिए एक संदर्भ प्राप्त करें [सीवी] का उपयोग करते हुए querySelector () विधि, और देखें इसकी 2 डी ड्राइंग संदर्भ वस्तु [ctx] की सहायता से getContext () तरीका.

 onload = function () cv = document.querySelector ('# cvl'), ctx = cv.getContext ('2d'); अगर (!! ctx) / * ... * /; 

हमें भी जांचने की जरूरत है यदि कैनवस द्वारा समर्थित है यूए यह सुनिश्चित करके कि ड्राइंग संदर्भ वस्तु [ctx] मौजूद है और अपरिभाषित नहीं है. हम जगह देंगे लोड घटना से संबंधित सभी कोड इस मामले में अगर शर्त.

3. प्रारंभिक चर बनाएँ

चलो बनाते हैं तीन और वैश्विक चर, रों के लिए आर्क का कोण शुरू करना, टीसी के लिए के लिए आईडी setInterval () घड़ी, तथा पीसीटी के लिए एक ही टाइमर का प्रतिशत मूल्य. कोड tc = pct = 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 * गणित बाद मे आर्क्स के लिए शुरुआती कोण को निरूपित करें कैनवास पर से खींचा जाना.

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 = 'fuchsia'; ; 

5. सर्कल बनाएं

हम क्लिक ईवेंट हैंडलर जोड़ें लोड बटन के लिए [#lbtn] कौन कौन से 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 = 'fuchsia'; btn.addEventListener ('क्लिक', फंक्शन () 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 () तरीका कैनवास के आयताकार क्षेत्र को साफ करता है इसके मापदंडों द्वारा परिभाषित किया गया है: (x, y) शीर्ष-बाएं कोने का निर्देशांक। ClearRect (0, 0, 16, 16) लाइन सब कुछ मिटा देता है 16 * 16 पिक्सेल के कैनवास में हमने बनाया है.

beginPath () तरीका एक नया रास्ता बनाता है ड्राइंग के लिए, और ए आघात() तरीका उस नव निर्मित पथ पर पेंट.

के अंत में updateLoader () समारोह, प्रतिशत गणना [पीसीटी] 1 से बढ़ा हुआ है, और वेतन वृद्धि से पहले हम जांचें कि क्या यह 100 के बराबर है. जब यह 100 प्रतिशत है, तो setInterval () घड़ी (टाइमर आईडी द्वारा पहचाना गया, टीसी) मंजूरी दे दी है की मदद से clearInterval () तरीका.

के पहले तीन मापदंडों चाप () विधि है (x, y) चाप के केंद्र का समन्वय करता है तथा इसका दायरा. चौथा और पांचवां पैरामीटर प्रतिनिधित्व करते हैं शुरू और अंत कोण जिस पर चाप की शुरुआत और अंत होता है.

हमने पहले से ही लोडर सर्कल का शुरुआती बिंदु तय किया है, जो कोण पर है रों, और यह हो जाएगा सभी पुनरावृत्तियों में समान.

अंत कोण हालांकि होगा प्रतिशत की गणना के साथ वेतन वृद्धि, हम गणना कर सकते हैं वेतन वृद्धि का आकार इस अनुसार। 1% (मान 100 में से 1) कहें कोण के बराबर α 2 से बाहरπ एक चक्र में (2π = पूरे परिधि का कोण), फिर उसी को निम्नलिखित समीकरण के रूप में लिखा जा सकता है:

1/100 = α/ 2π

समीकरण को फिर से व्यवस्थित करने पर:

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

तो, 1% कोण 2 के बराबर हैπ/ 100 एक सर्कल में। इस प्रकार, प्रत्येक प्रतिशत वृद्धि के दौरान अंत कोण है 2 से गुणा करके गणना की गईπ/ 100 प्रतिशत मूल्य से. फिर परिणाम है में जोड़ा रों (प्रारंभ कोण), इसलिए आर्क्स हैं उसी प्रारंभिक स्थिति से तैयार किया गया हर बार। यही कारण है कि हमने इसका इस्तेमाल किया pct * 2 * Math.PI / 100 + s ऊपर कोड स्निपेट में अंतिम कोण की गणना करने का सूत्र.

7. फ़ेविकॉन जोड़ें

चलो जगह ए फ़ेविकॉन लिंक तत्व HTML में अनुभाग, या तो सीधे या जावास्क्रिप्ट के माध्यम से.

में updateLoader () समारोह, पहले हम फेविकॉन ले आओ का उपयोग करते हुए 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 ('लिंक [rel = "आइकन"]) ; ctx.lineWidth = 2; ctx.strokeStyle = 'fuchsia'; btn.addEventListener ('क्लिक', फंक्शन () 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 ('छवि / पीएनजी'); if (pct === 100) clearTimeout (tc); वापसी;  pct ++;  

आप पूर्ण कोड पर एक नजर डाल सकते हैं गितूब पर.

बोनस: Async घटनाओं के लिए लोडर का उपयोग करें

जब आपको इस कैनवास एनीमेशन का उपयोग करने की आवश्यकता होती है एक लोडिंग कार्रवाई के साथ संयोजन के रूप में वेब पेज में, असाइन करें updateLoader () समारोह इवेंट हैंडलर के रूप में प्रगति () कार्रवाई की घटना.

उदाहरण के लिए, हमारे जावास्क्रिप्ट इस तरह बदल जाएगा AJAX में:

 onload = function () cv = document.querySelector ('# cvl'), ctx = cv.getContext ('2d'); अगर (!! ctx) s = 1.5 * Math.PI, lnk = document.querySelector ('लिंक [rel = "आइकन"]'); ctx.lineWidth = 2; ctx.strokeStyle = 'fuchsia';  var xhr = new XMLHttpRequest (); xhr.addEventListener ('प्रगति', अपडेटऑलर); xhr.open ('GET', 'https://xyz.com/abc'); xhr.send (); ; function 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 ('छवि / पीएनजी');  

में चाप () विधि, प्रतिशत मान बदलें [पीसीटी] उसके साथ लदा हुआ घटना की संपत्ति-यह दर्शाता है कि फ़ाइल को कितना लोड किया गया है, और इसके स्थान पर 100 उपयोग संपूर्ण प्रगति की संपत्ति, जो कुल राशि को लोड करने के लिए दर्शाता है.

वहाँ है की कोई ज़रूरत नहीं setInterval () ऐसे मामलों में, के रूप में प्रगति () घटना है स्वचालित रूप से निकाल दिया गया के रूप में लोड हो रहा है प्रगति.