Хабрахабр

[Перевод] Разработка анимированных фавиконов

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

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

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

Что если бы мы могли динамически менять пиксели, из которых состоит фавикон, и выводили бы на ярлык страницы сведения о процессе выгрузки файлов? Это — как раз тот случай, когда можно проявить креативность! Собственно говоря, именно этим мы здесь и займёмся.

В браузерах, которые это поддерживают, можно выводить некую анимацию в качестве фавикона с помощью JavaScript, HTML-элемента <canvas> и древних правил геометрии.

Вот как выглядит анимация загрузки во вкладке браузера.

А именно — добавим в HTML-код страницы элементы <link> и <canvas>: Сразу приступим к делу и начнём с самого простого.

<head> <link rel="icon" type="image/png" href="" width=32px>
</head> <body> <canvas width=32 height=32></canvas>
</body>

При практическом использовании этой методики вам, вероятно, захочется скрыть элемент <canvas>. Один из способов сделать это заключается в использовании HTML-атрибута hidden:

<canvas hidden width=32 height=32></canvas>

Я собираюсь оставить элемент <canvas> видимым для того, чтобы мы могли бы наблюдать за тем, как анимация одновременно выводится и на фавиконе, и на элементе <canvas>. И то и другое имеет размер стандартного фавикона — 32x32 пикселя.

Добавим в HTML-код страницы следующее: Мы, в демонстрационных целях, добавим на страницу кнопку, щелчок по которой запускает анимацию.

<button>Load</button>

Теперь займёмся JavaScript-кодом. Сначала проверим поддержку canvas:

onload = ()=>
};

Далее — подключим обработчик событий нажатия на кнопку, который будет использоваться для запуска анимации в элементе <canvas>:

button = document.querySelector('button');
button.addEventListener('click', function() { /* Переменная, используемая для управления анимацией */ n = 0, /* Длительность интервала анимации */ loadingInterval = setInterval(drawLoader, 60); });

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

/* Стиль линий, которые будут использоваться для рисования квадратного индикатора загрузки */
let gradient = context.createLinearGradient(0, 0, 32, 32);
gradient.addColorStop(0, '#c7f0fe');
gradient.addColorStop(1, '#56d3c9');
context.strokeStyle = gradient;
context.lineWidth = 8;

В функции drawLoader мы будем рисовать линии, основываясь на том, сколько процентов шагов анимации уже выполнено. В нашем случае 1 шаг анимации соответствует 1%. А именно, в течение первых 25% шагов будет постепенно выводиться линия, представляющая собой верхнюю сторону квадрата. Следующие 25% шагов будет выводиться правая сторона квадрата, и так далее — по 25% времени анимации на каждую сторону.

На каждом шаге анимации, после того, как вывод изображения в элемент <canvas> окончен, изображение быстро преобразуется в формат PNG и устанавливается в качестве фавикона страницы. Эффект анимации достигается путём стирания содержимого элемента <canvas> и вывода немного удлинённой, в сравнении с предыдущим шагом, линии.

function drawLoader() { with(context) { clearRect(0, 0, 32, 32); beginPath(); /* До 25% времени, выделенного на рисование*/ if (n<=25){ /* (0,0)-----(32,0) */ // код для инкрементного рисования верхней линии } /* Между 25 и 50 процентами */ else if(n>25 && n<=50){ /* (0,0)-----(32,0) | | (32,32) */ // код для вывода верхней и правой линии. } /* Между 50 и 75 процентами */ else if(n>50 && n<= 75){ /* (0,0)-----(32,0) | | (0,32)----(32,32) */ // код для вывода верхней, правой и нижней линий. } /* Между 75 и 100 процентами */ else if(n>75 && n<=100){ /* (0,0)-----(32,0) | | | | (0,32)----(32,32) */ // код для вывода всех четырёх линий квадрата. } stroke(); } // Преобразуем то, что нарисовано на элементе <canvas>, в формат PNG, и сделаем полученное изображение фавиконом favicon.href = canvas.toDataURL('image/png'); /* После того, как рисование завершено */ if (n === 100) { clearInterval(loadingInterval); return; } // Инкрементируем переменную, которая используется для управления анимацией n++;
}

Теперь займёмся вычислениями, которые помогут нам нарисовать нужные линии.

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

  • Начальная точка — левый верхний угол изображения (0,0).
  • n — номер текущего шага анимации.
  • x — координата x конечной точки линии на текущем шаге анимации.
  • y — координата y конечной точки, которая равна 0.

Нам нужно, чтобы после завершения всех 25 шагов анимации значение x равнялось бы 32 (то есть — размеру фавикона и элемента <canvas>). Поэтому мы будем искать значение x на текущем шаге анимации n по следующей формуле:

x = (32/25) * n

Вот как выглядит код для рисования линии, в котором реализованы эти рассуждения:

moveTo(0, 0); lineTo((32/25)*n, 0);

Следующие 25 шагов анимации (рисование правой стороны квадрата) выполняются похожим образом:

moveTo(0, 0); lineTo(32, 0);
moveTo(32, 0); lineTo(32, (32/25)*(n-25));

А вот — полный код функции drawLoader:

function drawLoader() { with(context) { clearRect(0, 0, 32, 32); beginPath(); /* До 25% времени, выделенного на рисование*/ if (n<=25){ /* (0,0)-----(32,0) */ moveTo(0, 0); lineTo((32/25)*n, 0); } /* Между 25 и 50 процентами */ else if(n>25 && n<=50){ /* (0,0)-----(32,0) | | (32,32) */ moveTo(0, 0); lineTo(32, 0); moveTo(32, 0); lineTo(32, (32/25)*(n-25)); } /* Между 50 и 75 процентами */ else if(n>50 && n<= 75){ /* (0,0)-----(32,0) | | (0,32)----(32,32) */ moveTo(0, 0); lineTo(32, 0); moveTo(32, 0); lineTo(32, 32); moveTo(32, 32); lineTo(-((32/25)*(n-75)), 32); } /* Между 75 и 100 процентами */ else if(n>75 && n<=100){ /* (0,0)-----(32,0) | | | | (0,32)----(32,32) */ moveTo(0, 0); lineTo(32, 0); moveTo(32, 0); lineTo(32, 32); moveTo(32, 32); lineTo(0, 32); moveTo(0, 32); lineTo(0, -((32/25)*(n-100))); } stroke(); } // Преобразуем то, что нарисовано на элементе <canvas>, в формат PNG, и сделаем полученное изображение фавиконом favicon.href = canvas.toDataURL('image/png'); /* После того, как рисование завершено */ if (n === 100) { clearInterval(loadingInterval); return; } // Инкрементируем переменную, которая используется для управления анимацией n++;
}

Итоги

Вот и всё! Код для создания прямоугольного индикатора загрузки, разработкой которого мы тут занимались, можно найти в этом репозитории. А вот — репозиторий с кодом кругового индикатора загрузки. На самом деле, вы, в качестве подобного индикатора, может использовать любую фигуру. А если вы поработаете с атрибутом fill элемента <canvas> — это позволит вам добиться интересных эффектов.

Уважаемые читатели! Есть ли среди ваших проектов такие, в которых пригодились бы анимированные фавиконы?

Теги
Показать больше

Похожие статьи

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Кнопка «Наверх»
Закрыть