Як створити анімований навантажувач Favicon з JavaScript

Favicons вони є важливою частиною онлайн-брендингу, вони дають візуальний кий користувачам і допомагати їм виділити свій сайт від інших. Хоча більшість позначок є статичними, це можливо створювати анімовані позначки так само.

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

У цій публікації я покажу вам, як створити анімований кругової навантажувач в полотні HTML, і як ви можете використовувати його як favicon. An анімований навантажувач favicon це відмінний інструмент візуалізувати хід будь-яких дій на сторінці, наприклад, завантаження файлів або обробка зображень. Ви можете подивитися на демо, що належить до цього підручника на Github так само.

1. Створіть елемент

По-перше, нам потрібно створити анімацію на полотні що малює повне коло, загалом 100 відсотків (це буде важливо, коли нам потрібно збільшити дугу).

 Завантаження  

Я використовую стандартний розмір favicon, 16 * 16 пікселів, для полотна. Ви можете використовувати розмір, більший за цей, якщо хочете, але зауважте, що зображення на полотні буде до 16² область пікселів коли він застосовується як позначка.

2. Перевірте, якщо підтримується

Всередині onload () обробник подій ми отримати посилання на елемент canvas [Резюме] за допомогою querySelector () методом і зверніться його 2D об'єкт малювання контексту [ctx] за допомогою getContext () метод.

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

Ми також повинні перевірити якщо полотно підтримується UA переконавшись, що об'єкт контексту малювання [ctx] існує і не визначено. Ми розмістимо весь код, що належить до події завантаження в цьому якщо стан.

3. Створіть початкові змінні

Створимо ще три глобальні змінні, s для початковий кут дуги, 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; ; 

Щоб показати, як значення s розраховано, дозвольте мені швидко пояснити, як кути дуги роботи.

Кути дуги

The підвідний кут (кут складається з двох променів, які визначають дугу) окружності кола є 2π rad, де rad - символ радіанної одиниці. Це робить кут для чверті дуги дорівнює 0,5π rad.

Коли візуалізації прогресу завантаження, ми хочемо намалювати коло на полотні з верхньої позиції замість права за умовчанням.

Перехід за годинниковою стрілкою (дуга напряму за замовчуванням намальована на полотні) з правильної позиції, верхня точка є досягнуто через три чверті, тобто під кутом 1.5π rad. Отже, я створив змінну s = 1,5 * Math.PI пізніше позначимо початковий кут для дуг витягується з полотна.

4. Створіть коло

Для контекстного об'єкта малювання ми визначаємо lineWidth і strokeStyle властивості кола ми плануємо зробити наступний крок. The 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] котрий ініціює таймер setInterval 60 мілісекунд, що виконує функцію, відповідальну за малювання кола [updateLoader ()] кожні 60 мс, доки коло буде повністю намальовано.

The 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', 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 ++;  

The clearRect () метод очищає прямокутну область полотна визначається його параметрами: (x, y) координати верхнього лівого кута. The clearRect (0, 0, 16, 16) лінії стирає все у створеному нами полотні 16 * 16 пікселів.

The beginPath () метод створює новий шлях для малювання, і обведення () метод фарби на новоствореному шляху.

Наприкінці updateLoader () функція відсоток відсотків [pct] збільшується на 1, і до збільшення ми перевірте, чи дорівнює 100. Коли це 100 відсотків, setInterval () таймера (ідентифікується ідентифікатором таймера, tc) очищено за допомогою clearInterval () метод.

Перші три параметри arc () методом є (x, y) координати центру дуги і його радіус. Четвертий і п'ятий параметри являють собою початковий і кінцевий кути при якому малюнок дуги починається і закінчується.

Ми вже вирішили початкову точку круга навантажувача, що знаходиться під кутом s, і це буде те ж саме у всіх ітераціях.

Однак кінцевий кут буде збільшення з відсотком, ми можемо розрахувати розмір приросту наступним чином. Скажімо 1% (значення 1 з 100) еквівалентно куту α з 2π у колі (2π = кут всієї окружності), тоді те ж саме можна записати у вигляді наступного рівняння:

1/100 = α/ 2π

Про переставлення рівняння:

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

Отже, 1% еквівалентно куту 2π/ 100 по колу. Таким чином, кінцевий кут під час кожного відсоткового приросту становить обчислюється шляхом множення 2π/ 100 - відсоткове значення. Тоді результат додано до s (початковий кут), так дуги є витягується з тієї ж початкової позиції кожного разу. Ось чому ми використовували pct * 2 * Math.PI / 100 + s формулу для обчислення кінцевого кута у фрагменті коду вище.

7. Додайте значок

Давайте розмістимо a елемент посилання favicon в HTML або безпосередньо, або через JavaScript.

В updateLoader () функція, спочатку ми вибірка favicon за допомогою querySelector () і призначити його lnk змінної. Тоді нам потрібно експортувати зображення полотна кожен раз, коли натягується дуга в кодованому зображенні за допомогою toDataURL () метод, і призначити вміст даних URI як зображення favicon. Це створює анімований значок, який є так само, як і навантажувач холсту.

 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 = 'фуксія'; 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 ++;  

Ви можете переглянути повний код на Github.

Бонус: Використовуйте завантажувач для асинхронних подій

Коли потрібно використовувати цю полотно анімації у поєднанні з дією навантаження на веб-сторінці, призначте updateLoader () функції як обробник подій для прогрес () події.

Наприклад, наш JavaScript зміниться таким чином в 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 = 'фуксія';  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');  

В arc () метод, замінити відсоткове значення [pct] з завантажено властивість події-він позначає, скільки файлу було завантажено, і замість 100 використовувати всього майно Прогресу, який позначає загальну суму для завантаження.

Є не потрібно setInterval () в таких випадках, як прогрес () подія автоматично по мірі завантаження.