Как создать анимированный загрузчик Favicon с помощью JavaScript

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

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

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

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

Во-первых, нам нужно создать анимацию холста тот рисует полный круг, всего 100 процентов (это будет важно, когда нам нужно увеличить дугу).

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

2. Проверьте, если поддерживается

Внутри в процессе() обработчик событий, мы получить ссылку на элемент canvas [резюме] с использованием querySelector () метод и ссылаться его 2D-объект контекста рисования [CTX] с помощью getContext () метод.

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

Нам также нужно проверить если холст поддерживается UA убедившись, что объект контекста рисования [CTX] существует и не определена. Мы разместим весь код, принадлежащий событию загрузки в это если состояние.

3. Создайте исходные переменные

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

Чтобы показать, как значение s был рассчитан, позвольте мне быстро объяснить, как углы дуги Работа.

Углы дуги

скрытый угол (угол, составленный из двух лучей, которые определяют дугу) окружности круга является 2π радиан, где радиан является радианой единица измерения Это делает угол на четверть дуги равно 0,5π радиан.

ИЗОБРАЖЕНИЕ: Википедия

когда визуализация процесса загрузки, мы хотим нарисовать круг на холсте из верхней позиции а не право по умолчанию.

По часовой стрелке (дуга направления по умолчанию рисуется на холсте) из правильного положения, верхняя точка достиг через три четверти, то есть под углом 1,5π радиан. Следовательно, я создал переменную s = 1,5 * Math.PI позже обозначим начальный угол для дуг быть нарисованным на холсте.

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

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 ('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 ++;

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

beginPath () метод создает новый путь для рисования, а Инсульт() метод рисует на этом недавно созданном пути.

В конце updateLoader () функция, процентное соотношение [процент] увеличивается на 1, и до приращения мы проверьте, равняется ли он 100. Когда это 100 процентов, setInterval () таймер (определяется идентификатором таймера, дц) очищается с помощью clearInterval () метод.

Первые три параметра дуга () Метод является (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. Добавьте значок

Давайте разместим элемент ссылки favicon в HTML раздел, либо напрямую, либо через JavaScript.

в updateLoader () функция, сначала мы принести значок с использованием 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 = 'fuchsia'; 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 = 'fuchsia';  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');

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

Там в нет необходимости setInterval () в таких случаях, как прогресс() событие автоматически уволен по мере загрузки.