Πώς να δημιουργήσετε έναν φορτωμένο Favicon Loader με JavaScript

Favicons αποτελούν σημαντικό μέρος της online επωνυμίας, αυτοί δώστε ένα οπτικό συμβόλαιο στους χρήστες και να τους βοηθήσετε διακρίνετε τον ιστότοπό σας από άλλους. Αν και οι περισσότεροι φαβορίτες είναι στατικές, είναι δυνατόν δημιουργήστε κινούμενες εικόνες επισης.

Ένα συνεχώς μετακινούμενο favicon είναι σίγουρα ενοχλητικό για τους περισσότερους χρήστες και επίσης βλάπτει την προσβασιμότητα, ωστόσο όταν είναι μόνο κινούμενο για μικρό χρονικό διάστημα σε απόκριση μιας ενέργειας χρήστη ή ενός γεγονότος υποβάθρου, όπως ένα φορτίο σελίδας, μπορεί παρέχουν επιπλέον οπτικές πληροφορίες-βελτιώνοντας έτσι την εμπειρία των χρηστών.

Σε αυτή τη θέση, θα σας δείξω πώς να δημιουργήσετε ένα κινούμενος κυκλικός φορτωτής σε έναν καμβά HTML, και πώς μπορείτε να το χρησιμοποιήσετε ως favicon. Ενα κινούμενο φορτωτή favicon είναι ένα εξαιρετικό εργαλείο να απεικονίσει την πρόοδο οποιασδήποτε ενέργειας που εκτελούνται σε μια σελίδα, όπως φόρτωση αρχείων ή επεξεργασία εικόνας. Μπορείτε να ρίξετε μια ματιά στο demo που ανήκει σε αυτό το σεμινάριο επί Github επισης.

1. Δημιουργήστε το στοιχείο

Πρώτον, πρέπει να το κάνουμε δημιουργήστε ένα κινούμενο σχέδιο καμβά ότι ρίχνει έναν πλήρη κύκλο, 100 τοις εκατό συνολικά (αυτό θα είναι σημαντικό όταν πρέπει να αυξήσουμε το τόξο).

 Φορτώνω  

Χρησιμοποιώ το πρότυπο μέγεθος favicon, 16 * 16 pixels, για τον καμβά. Μπορείτε να χρησιμοποιήσετε ένα μέγεθος μεγαλύτερο από αυτό αν θέλετε, αλλά σημειώστε ότι η εικόνα καμβά θα είναι κλιμακώθηκε στα 16² περιοχή εικονοστοιχείων όταν εφαρμόζεται ως favicon.

2. Ελέγξτε εάν υποστηρίζεται

μεσα στην onload () χειριστής συμβάντων, εμείς λάβετε μια αναφορά για το στοιχείο του καμβά [βιογραφικό] χρησιμοποιώντας το querySelector () και παραπέμψτε το αντικείμενο περιβάλλοντος σχεδίασης 2D [ctx] με τη βοήθεια του getContext () μέθοδος.

 onload = συνάρτηση () cv = document.querySelector ('# cvl'), ctx = cv.getContext ('2d'); αν (!! ctx) / * ... * /; 

Πρέπει επίσης να ελέγξουμε αν ο καμβάς υποστηρίζεται από το UA διασφαλίζοντας ότι το αντικείμενο περιβάλλοντος σχεδίασης [ctx] υπάρχει και δεν είναι απροσδιόριστο. Θα το τοποθετήσουμε όλο τον κώδικα που ανήκει στο συμβάν φορτίου σε αυτό αν κατάσταση.

3. Δημιουργήστε τις αρχικές μεταβλητές

Ας δημιουργήσουμε τρεις άλλες παγκόσμιες μεταβλητές, μικρό για το αρχική γωνία του τόξου, tc για το id για το setInterval () κρατών την ώραν, και κ.ο. για το ποσοστιαία τιμή του ίδιου χρονοδιακόπτη. Ο κώδικας tc = pct = 0 εκχωρεί 0 ως αρχική τιμή για το tc και κ.ο. μεταβλητές.

 onload = συνάρτηση () cv = document.querySelector ('# cvl'), ctx = cv.getContext ('2d'); αν (!! ctx) s = 1.5 * Math.PI, tc = pct = 0; . 

Για να δείξετε πώς η τιμή του μικρό υπολογίστηκε, επιτρέψτε μου να εξηγήσω γρήγορα πώς γωνίες τόξου εργασία.

Γωνίες τόξου

ο υποτεινομένη γωνία (η γωνία που αποτελείται από τις δύο ακτίνες που ορίζουν ένα τόξο) της περιφέρειας ενός κύκλου είναι 2π rad, όπου rad είναι το σύμβολο μονάδας ακτινοβολίας. Αυτό κάνει το γωνία για ένα τέταρτο τόξο ίσο με 0,5π rad.

Πότε οπτικοποίηση της προόδου φόρτωσης, θέλουμε να σχεδιαστεί ο κύκλος στον καμβά από την πρώτη θέση αντί για το προεπιλεγμένο δικαίωμα.

Πηγαίνοντας δεξιόστροφα (το τόξο προεπιλεγμένης κατεύθυνσης σχεδιάζεται στον καμβά) από τη σωστή θέση, το κορυφαίο σημείο είναι μετά από τρία τέταρτα, δηλαδή υπό γωνία 1.5π rad. Ως εκ τούτου, έχω δημιουργήσει τη μεταβλητή s = 1,5 * Math.PI αργότερα υποδηλώνουν τη γωνία εκκίνησης για τα τόξα από το καμβά.

4. Σχεδιάστε τον κύκλο

Για το αντικείμενο περιβάλλοντος σχεδίασης, ορίζουμε το πλάτος γραμμής και strokeStyle ιδιότητες του κύκλου θα κάνουμε το επόμενο βήμα. ο strokeStyle η ιδιοκτησία αντιπροσωπεύει το χρώμα της.

 onload = συνάρτηση () cv = document.querySelector ('# cvl'), ctx = cv.getContext ('2d'); αν (!! ctx) s = 1.5 * Math.PI, tc = pct = 0; ctx.lineWidth = 2; ctx.strokeStyle = 'φούξια'; . 

5. Σχεδιάστε τον κύκλο

Εμείς προσθέστε ένα πρόγραμμα χειρισμού συμβάντος κλικ στο κουμπί φόρτωσης [#lbtn] οι οποίες ενεργοποιεί ένα setInterval χρονόμετρο 60 χιλιοστών του δευτερολέπτου, που εκτελεί τη λειτουργία που είναι υπεύθυνη για την κατάρτιση του κύκλου [updateLoader ()] κάθε 60ms έως ότου ο κύκλος έλκεται πλήρως.

ο setInterval () μέθοδος επιστρέφει ένα αναγνωριστικό χρονοδιακόπτη για να προσδιορίσετε τον χρονοδιακόπτη που έχει αντιστοιχιστεί στο tc μεταβλητός.

 onload = συνάρτηση () cv = document.querySelector ('# cvl'), ctx = cv.getContext ('2d'); εάν (!! ctx) s = 1.5 * Math.PI, tc = pct = 0, btn = document.querySelector ('# lbtn'); ctx.lineWidth = 2; ctx.strokeStyle = 'φούξια'; btn.addEventListener ('κλικ', συνάρτηση () tc = setInterval (updateLoader, 60);); . 

6. Δημιουργήστε το updateLoader () προσαρμοσμένη λειτουργία

Ήρθε η ώρα να δημιουργήσετε το έθιμο updateLoader () λειτουργία που πρόκειται να γίνει που καλείται από το setInterval () μέθοδος όταν πατηθεί το κουμπί (το συμβάν ενεργοποιείται). Επιτρέψτε μου να σας δείξω πρώτα τον κώδικα, τότε μπορούμε να ακολουθήσουμε την εξήγηση.

 Λειτουργία updateLoader () ctx.clearRect (0, 0, 16, 16); ctx.beginPath (); ctx.arc (8, 8, 6, s, (pct * 2 * Math.PI / 100 + s)). ctx.stroke (); αν (pct === 100) clearInterval (tc); ΕΠΙΣΤΡΟΦΗ;  pct ++;  

ο clearRect () μέθοδος καθαρίζει την ορθογώνια περιοχή του καμβά που καθορίζονται από τις παραμέτρους του: τις συντεταγμένες (x, y) της άνω αριστεράς γωνίας. ο clearRect (0, 0, 16, 16) γραμμή σβήνει τα πάντα στο 16 * 16 pixel καμβά που δημιουργήσαμε.

ο beginPath () μέθοδος δημιουργεί μια νέα διαδρομή για το σχέδιο και το κτύπημα() μέθοδος ζωγραφίζει σε αυτή τη νέα διαδρομή.

Στο τέλος του updateLoader () λειτουργία, το ποσοστιαία καταμέτρηση [κ.ο.] αυξάνεται κατά 1, και πριν από την προσαύξηση εμείς ελέγξτε αν είναι ίσο με 100. Όταν είναι 100 τοις εκατό, το setInterval () κρατών την ώραν (αναγνωρίζεται από το αναγνωριστικό χρονοδιακόπτη, tc) εκκαθαρίζεται με τη βοήθεια του clearInterval () μέθοδος.

Οι τρεις πρώτες παράμετροι του τόξο() είναι η μέθοδος (x, y) συντεταγμένες του κέντρου του τόξου και την ακτίνα του. Η τέταρτη και η πέμπτη παράμετροι αντιπροσωπεύουν το γωνίες έναρξης και λήξης στην οποία αρχίζει και τελειώνει το σχέδιο του τόξου.

Αποφασίσαμε ήδη το σημείο εκκίνησης του κύκλου του φορτωτή, ο οποίος είναι υπό γωνία μικρό, και θα είναι το το ίδιο σε όλες τις επαναλήψεις.

Ωστόσο, η τελική γωνία θα είναι με το ποσοστό επί τοις εκατό, μπορούμε να υπολογίσουμε το μέγεθος της προσαύξησης με τον ακόλουθο τρόπο. Πείτε 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. Προσθέστε το favicon

Ας τοποθετήσουμε ένα στοιχείο συνδέσμου favicon στο HTML είτε απευθείας είτε μέσω JavaScript.

Στο updateLoader () λειτουργία, πρώτα εμείς φέρε το favicon χρησιμοποιώντας το querySelector () και να την αντιστοιχίσετε στο lnk μεταβλητός. Τότε πρέπει εξαγωγή της εικόνας καμβά κάθε φορά που σχεδιάζεται ένα τόξο σε μια κωδικοποιημένη εικόνα χρησιμοποιώντας το toDataURL () και ορίστε αυτό το περιεχόμενο URI δεδομένων ως εικόνα favicon. Αυτό δημιουργεί ένα κινούμενο favicon που είναι το ίδιο με τον φορτωτή καμβά.

 onload = συνάρτηση () cv = document.querySelector ('# cvl'), ctx = cv.getContext ('2d'); εάν (!! ctx) s = 1.5 * Math.PI, tc = pct = 0, btn = document.querySelector ('# lbtn'), lnk = document.querySelector . ctx.lineWidth = 2; ctx.strokeStyle = 'φούξια'; btn.addEventListener ('κλικ', συνάρτηση () tc = setInterval (updateLoader, 60);); . Λειτουργία 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 ('εικόνα / png'); αν (pct === 100) clearTimeout (tc); ΕΠΙΣΤΡΟΦΗ;  pct ++;  

Μπορείτε να δείτε τον πλήρη κωδικό στο Github.

Μπόνους: Χρησιμοποιήστε τον φορτωτή για συμβάντα async

Όταν χρειαστεί να χρησιμοποιήσετε αυτό το animation καμβά σε συνδυασμό με μια ενέργεια φόρτωσης σε μια ιστοσελίδα, ορίστε το updateLoader () λειτουργία ως χειριστής συμβάντων για το πρόοδος() περίπτωση της ενέργειας.

Για παράδειγμα, το JavaScript θα αλλάξει έτσι στο AJAX:

 onload = συνάρτηση () cv = document.querySelector ('# cvl'), ctx = cv.getContext ('2d'); εάν (!! ctx) s = 1.5 * Math.PI, lnk = document.querySelector ('link [rel = "εικονίδιο"]'); ctx.lineWidth = 2; ctx.strokeStyle = 'φούξια';  var xhr = νέα 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 ('εικόνα / png');  

Στο τόξο() , αντικαταστήστε την ποσοστιαία τιμή [κ.ο.] με το φορτωμένος ιδιοκτησίας της εκδήλωσης-υποδηλώνει πόσο μέρος του αρχείου έχει φορτωθεί και στη θέση του 100 Χρησιμοποιήστε το σύνολο ιδιοκτησίας του ProgressEvent, που υποδηλώνει το συνολικό ποσό που θα φορτωθεί.

Υπάρχει δεν υπάρχει ανάγκη setInterval () σε τέτοιες περιπτώσεις, όπως η πρόοδος() γεγονός είναι ενεργοποιήθηκε αυτόματα καθώς το φορτίο εξελίσσεται.