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

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

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

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

нагрузка

Я использую стандартный размер значка 16 * 16 пикселей для холста. Вы можете использовать размер больше этого, если хотите, но обратите внимание, что изображение холста будет уменьшено до области 162 пикселя, когда оно будет использовано в качестве значка.
2. Проверьте, если поддерживается
Внутри в процессе() обработчик события, мы получаем ссылку на элемент canvas [cv] с использованием querySelector () метод и ссылаться на его объект контекста 2D-рисования [ctx] с помощью метод getContext (),

onload = function () {
    cv = document.querySelector (‘# cvl’),
    ctx = cv.getContext (‘2d’);

    if (!! ctx) {
        / * … * /
    }
};

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

1. Создайте исходные переменные
   Давайте создадим еще три глобальные переменные, s для начального угла дуги, tc для идентификатора для setInterval () timer, и pct для процентного значения того же таймера. Код tc = pct = 0 назначает 0 в качестве начального значения для переменных tc и pct.

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’;
    }
};

1. Нарисуй круг
   Добавляем обработчик события click к кнопке Load [#lbtn] который вызывает setInterval таймер 60 миллисекунд, который выполняет функцию, отвечающую за рисование круга [updateLoader()] каждые 60 мс, пока круг не будет полностью нарисован.

Метод setInterval () возвращает идентификатор таймера, чтобы идентифицировать его таймер, который назначен переменной tc.

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);
        });
    }
};

1. Создайте пользовательскую функцию 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 (дц);
        возвращение;
    }

    РСТ ++;
}

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

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

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

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 (‘ссылка[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 (дц);
        возвращение;
    }

    РСТ ++;
}

Вы можете посмотреть полный код на Github,
Бонус: используйте загрузчик для асинхронных событий
Когда вам нужно использовать эту анимацию холста в сочетании с действием загрузки на веб-странице, назначьте функцию updateLoader () в качестве обработчика события для прогресс() Событие акции.

Рекомендуемое чтение: Понимание синхронного и асинхронного JavaScript – часть 1

Например, наш JavaScript изменится в AJAX следующим образом:

onload = function () {
    cv = document.querySelector (‘# cvl’),
    ctx = cv.getContext (‘2d’);

    if (!! ctx) {
        s = 1,5 * Math.PI,
        lnk = document.querySelector (‘ссылка[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’);
}

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

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