Jak utworzyć animowany program ładujący Favicon z JavaScript

Favicons są kluczową częścią marki online dać wizualną wskazówkę użytkownikom i pomagaj im wyróżnij swoją witrynę od innych. Chociaż większość faviconów jest statyczna, można to zrobić tworzyć animowane favicony także.

Ciągle poruszająca się ikona favicon jest z pewnością denerwująca dla większości użytkowników, a także szkodzi dostępności, jednak gdy jest animowana tylko przez krótki czas w odpowiedzi na akcję użytkownika lub zdarzenie w tle, np. ładowanie strony zapewnić dodatkowe informacje wizualne-dlatego polepszam wrażenia użytkownika.

W tym poście pokażę, jak utworzyć animowany ładowacz kołowy w kanwie HTML, i jak możesz go używać jako favicon. Na animowana ładowarka ulubionych jest doskonałym narzędziem do wizualizuj postęp każdego działania wykonywane na stronie, takie jak przesyłanie plików lub przetwarzanie obrazu. Możesz rzucić okiem na demo należące do tego samouczka na Github także.

1. Utwórz element

Po pierwsze, musimy stwórz animację na płótnie że rysuje pełne koło, w sumie 100 procent (będzie to ważne, gdy musimy zwiększyć łuk).

 Obciążenie  

Używam standardowego rozmiaru ikony, 16 * 16 pikseli, dla płótna. Jeśli chcesz, możesz użyć rozmiaru większego niż ten, ale pamiętaj, że obraz płótna będzie zmniejszone do 16² obszar piksela gdy jest stosowany jako favicon.

2. Sprawdź, czy jest wspierany

W środku onload () obsługa zdarzeń, my pobierz referencję dla elementu canvas [cv] używając querySelector () metoda i odnieść się jego obiekt kontekstu rysowania 2D [ctx] z pomocą getContext () metoda.

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

Musimy również sprawdzić jeśli obszar roboczy jest obsługiwany przez UA upewniając się, że obiekt kontekstowy rysunku [ctx] istnieje i nie jest niezdefiniowany. Umieścimy cały kod należący do zdarzenia obciążenia zaangażowany w to Jeśli stan.

3. Utwórz początkowe zmienne

Stwórzmy trzy dodatkowe zmienne globalne, s dla kąt początkowy łuku, tc dla id dla setInterval () regulator czasowy, i pct dla wartość procentowa tego samego zegara. Kod tc = pct = 0 przypisuje 0 jako wartość początkowa dla tc i pct zmienne.

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

Aby pokazać, jak wartość s został obliczony, pozwól mi szybko wyjaśnić, jak kąty łuku praca.

Kąty łuku

The kąt nachylenia (kąt złożony z dwóch promieni definiujących łuk) obwodu koła jest 2π rad, gdzie rad jest symbolem jednostki radiowej. To sprawia, że kąt na ćwierć łuku równy 0,5π rad.

Gdy wizualizacja postępu ładowania, chcemy, aby okrąg na płótnie był rysowany z najwyższej pozycji zamiast domyślnego prawa.

Idzie zgodnie z ruchem wskazówek zegara (domyślny łuk kierunku jest rysowany na płótnie) z właściwej pozycji, najważniejszym punktem jest osiągnięty po trzech kwartałach, tj. pod kątem 1.5π rad. Dlatego stworzyłem zmienną s = 1,5 * Math.PI do później oznaczają kąt początkowy łuków do narysowania na płótnie.

4. Styl koła

Dla obiektu kontekstu rysunku definiujemy szerokość linii i strokeStyle właściwości okręgu będziemy rysować w następnym kroku. The strokeStyle właściwość oznacza jego kolor.

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

5. Narysuj okrąg

My dodaj obsługę zdarzeń kliknięcia do przycisku Load [#lbtn] który wyzwala zegar setInterval wynoszący 60 milisekund, który wykonuje funkcję odpowiedzialną za rysowanie okręgu [updateLoader ()] co 60ms, aż koło zostanie w pełni narysowane.

The setInterval () metoda zwraca identyfikator zegara aby zidentyfikować swój timer, który jest przypisany do tc zmienna.

 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 = 'fuksja'; btn.addEventListener ('click', function () tc = setInterval (updateLoader, 60);); ; 

6. Utwórz updateLoader () funkcja niestandardowa

Nadszedł czas, aby stworzyć zwyczaj updateLoader () funkcja, która ma być zwany przez setInterval () metoda po kliknięciu przycisku (zdarzenie jest uruchamiane). Pozwólcie, że pokażę wam najpierw kod, potem będziemy mogli pójść za wyjaśnieniem.

 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); powrót;  pct ++;  

The clearRect () metoda czyści prostokątny obszar płótna zdefiniowane przez jego parametry: współrzędne (x, y) lewego górnego rogu. The clearRect (0, 0, 16, 16) linia wymazuje wszystko na płótnie 16 * 16 pikseli, które stworzyliśmy.

The beginPath () metoda tworzy nową ścieżkę dla rysunku i uderzenie() metoda maluje na nowo utworzonej ścieżce.

Na końcu updateLoader () funkcja, liczba procentowa [pct] zwiększa się o 1, a przed przyrostem my sprawdź, czy wynosi 100. Kiedy jest w 100 procentach, setInterval () regulator czasowy (identyfikowane przez identyfikator timera, tc) jest wyczyszczony z pomocą clearInterval () metoda.

Pierwsze trzy parametry łuk() metoda to (x, y) współrzędne środka łuku i jego promień. Czwarty i piąty parametr reprezentują kąty początkowe i końcowe przy którym rysunek łuku zaczyna się i kończy.

Zdecydowaliśmy już o punkcie początkowym koła ładowarki, który znajduje się pod kątem s, i będzie tak samo we wszystkich iteracjach.

Kąt końcowy będzie jednak przyrost z liczbą procentową, możemy obliczyć wielkość przyrostu w następujący sposób. Powiedzmy, że 1% (wartość 1 ze 100) to odpowiednik kąta α z 2π w kole (2π = kąt całego obwodu), to samo można zapisać jako następujące równanie:

1/100 = α/ 2π

Po zmianie układu równania:

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

Zatem 1% odpowiada kątowi 2π/ 100 w okręgu. Zatem kąt końcowy podczas każdego przyrostu procentowego wynosi obliczony przez pomnożenie 2π/ 100 o wartość procentową. Wtedy wynik jest dodano do s (kąt początkowy), więc łuki są rysowane z tej samej pozycji początkowej każdego razu. Dlatego użyliśmy pct * 2 * Math.PI / 100 + s wzór do obliczenia kąta końcowego we fragmencie kodu powyżej.

7. Dodaj ikonę ulubionych

Załóżmy element favicon link w HTML sekcja, bezpośrednio lub przez JavaScript.

w updateLoader () funkcja, najpierw my pobierz favicon używając querySelector () metoda i przypisz ją do lnk zmienna. Wtedy musimy wyeksportuj obraz kanwy za każdym razem, gdy rysowany jest łuk w zakodowany obraz za pomocą toDataURL () metoda i przypisz zawartość URI danych jako obraz favikony. Tworzy to animowaną ikonę ulubionych tak samo jak ładowarka płótna.

 onload = function () cv = document.querySelector ('# cvl'), ctx = cv.getContext ('2d'); if (!! ctx) s = 1.5 * Math.PI, tc = pct = 0, btn = document.querySelector ('# lbtn'), lnk = document.querySelector ('link [rel = "icon"]') ; ctx.lineWidth = 2; ctx.strokeStyle = 'fuksja'; 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); powrót;  pct ++;  

Możesz zajrzeć do pełnego kodu na Github.

Bonus: użyj programu ładującego do asynchronicznych zdarzeń

Kiedy musisz użyć tej animacji kanwy w połączeniu z akcją ładowania na stronie internetowej przypisz updateLoader () funkcjonować jako program obsługi zdarzeń dla postęp() wydarzenie akcji.

Na przykład nasz JavaScript zmieni się w ten sposób w AJAX:

 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 = 'fuksja';  var xhr = new XMLHttpRequest (); xhr.addEventListener ('progress', updateLoader); 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 („image / png”);  

w łuk() metoda, zastąp wartość procentową [pct] z załadowany właściwość wydarzenia-oznacza, ile pliku zostało załadowane i zamiast 100 Użyj całkowity właściwość ProgressEvent, oznacza całkowitą ilość do załadowania.

Jest nie ma potrzeby setInterval () w takich przypadkach, jak postęp() zdarzenie jest automatycznie zwolniony w miarę postępu ładowania.