Как да създадете Анимиран Favicon Loader с JavaScript

Favicons те са важна част от онлайн брандинга, те дават визуален знак на потребителите и да им помогне разграничите сайта си от други. Въпреки че повечето от тях са статични, е възможно създайте анимирани favicons също.

Постоянно движещият се фавикон със сигурност е досаден за повечето потребители и също така вреди на достъпността, но когато е само анимиран за кратко време в отговор на потребителско действие или фоново събитие, като например зареждане на страница, може предоставят допълнителна визуална информация-следователно подобряването на потребителския опит.

В тази публикация ще ви покажа как да създадете анимиран кръгов товарач в HTML платно, и как можете да го използвате като favicon. Една анимиран товарач е чудесен инструмент за това визуализирате напредъка на всяко действие на страница, като качване на файлове или обработка на изображения. Можете да погледнете демо, което принадлежи към този урок за Github също.

1. Създайте елемент

Първо, трябва създайте анимация за платно че рисува пълен кръг, общо 100 процента (това ще бъде важно, когато трябва да увеличим дъгата).

Използвам стандартния размер на Favicon, 16 * 16 пиксела, за платното. Можете да използвате размер, по-голям от този, ако искате, но имайте предвид, че изображението на платното ще бъде намалена до 16² пикселна област когато се прилага като favicon.

2. Проверете дали се поддържа

Вътре при зареждане () събитие, ние получавате референция за елемента canvas [CV] използвайки querySelector () метод и се позовават неговия 2D обект на контекста на рисуване [CTXс помощта на. \ t getContext () метод.

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

Ние също трябва да проверим ако платното се поддържа от UA като се уверите, че обектът на контекста на чертежа [CTX] съществува и не е неопределен. Ние ще поставим целия код, принадлежащ на събитие за зареждане в това ако състояние.

3. Създайте първоначалните променливи

Нека създадем още три глобални променливи, с за начален ъгъл на дъгата, TC за id за setInterval () часовник, и PCT за процентна стойност на същия таймер. Кодът tc = pct = 0 присвоява 0 като първоначална стойност за TC и PCT променливи.

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

За да покажете каква е стойността на с беше изчислено, нека бързо да обясня как ъглови ъгли работа.

Ъглови ъгли

Най- под ъгъл (ъгълът, съставен от двата лъча, които определят дъга) от окръжността на кръг е 2π рад, където рад е символ на радианска единица. Това прави ъгъл за една четвърт дъга равна на 0.5π рад.

IMAGE: Уикипедия

Кога визуализиране на напредъка на зареждането, искаме кръгът върху платното да бъде нарисуван от горната позиция вместо правото по подразбиране.

Отивате по посока на часовниковата стрелка (дъгата по подразбиране е начертана върху платното) от правилната позиция, горната точка е достигнали след три четвърти, под ъгъл 1.5π рад. Следователно, създадох променливата s = 1.5 * Math.PI за по-късно обозначава началния ъгъл на дъгите да се извлече от платното.

4. Настройте кръга

За обект на контекста на рисуване ние дефинираме ширина на линията и strokeStyle свойства на кръга ще начертаем в следващата стъпка. Най- strokeStyle имотът е за цвят.

 onload = function () cv = document.querySelector ('# cvl'), ctx = cv.getContext ('2d'); ако (!! ctx) s = 1.5 * Math.PI, tc = pct = 0; ctx.lineWidth = 2; ctx.strokeStyle = 'фуксия'; ;

5. Начертайте кръга

ние добавете манипулатор за събития при натискане към бутона Зареждане [#lbtn] който задейства таймер за интервал от 60 милисекунди, който изпълнява функцията, отговорна за изчертаване на кръга [updateLoader ()] на всеки 60 метра, докато кръгът е изцяло изтеглен.

Най- setInterval () метод връща идентификатор на таймера за идентифициране на таймера, който е присвоен на TC променлив.

 onload = function () 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 ('click', функция () 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 (); if (pct === 100) clearInterval (tc); се върне;  pct ++;

Най- clearRect () метод изчиства правоъгълната област на платното дефинирани от нейните параметри: координатите (x, y) на горния ляв ъгъл. Най- clearRect (0, 0, 16, 16) линия изтрива всичко в 16 * 16 пиксела платно, което сме създали.

Най- beginPath () метод създава нов път за чертежа и удар() метод бои по този новосъздаден път.

В края на updateLoader () функция брой на процентите [PCT] се увеличава с 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

Нека сложим a елемент за връзка favicon в HTML или директно или чрез JavaScript.

В updateLoader () функция, първо ние вземи favicon използвайки querySelector () метод и да го присвоите на LNK променлива. Тогава трябва експортирайте изображението от платното всеки път, когато бъде изтеглена дъга в кодирано изображение с помощта на toDataURL () метод, и присвоите съдържанието на URI на данните като изображение на favicon. Това създава анимиран favicon, който е същото като това на товарача.

 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', функция () 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 ('image / png'); if (pct === 100) clearTimeout (tc); се върне;  pct ++;

Можете да разгледате пълния код в Github.

Бонус: Използвайте товарача за асинхронни събития

Когато трябва да използвате тази анимация във връзка с натоварващо действие в уеб страница, задайте updateLoader () функция като манипулатор на събитието за прогрес () събитие.

Например нашият JavaScript ще се промени така в AJAX:

 onload = function () 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 = new XMLHttpRequest (); xhr.addEventListener ('progress', 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');

В дъга() метод, замества процентната стойност [PCT] с зареден собственост на събитието-той обозначава колко от файла е зареден и на мястото му 100 използвай обща сума собственост на ProgressEvent, което означава общата сума, която трябва да се зареди.

Има няма нужда от setInterval () в такива случаи, като. \ t прогрес () събитие автоматично стрелба при натоварване.