Это — первое, что ищут взглядом, когда переключаются между вкладками браузера. Только что мы дали одно из возможных описаний того, что называется «фавиконом». Пространство на экране, которое занимает ярлык вкладки веб-страницы — это гораздо более ценный ресурс, чем многие думают. Если хорошо поработать с ярлыком, то он, помимо того, что будет продолжать играть роль идентификатора страницы, может стать чем-то вроде «доски объявлений», которая сообщает о том, что именно происходит на странице.
Фавикон
Фавиконы, на самом деле, особенно полезны в тех случаях, когда речь идёт о неактивных вкладках браузера. Рассмотрим пример.
Предположим, вы выгружаете фотографии, сделанные на недавнем летнем отдыхе, в облачный сервис, пользуясь его веб-страницей. Пока фотографии выгружаются, вы открываете новую вкладку браузера для того чтобы найти подробности о тех местах, где вы были, и использовать их в подписях к фотографиям. Пока вы всё это ищете, одно цепляется за другое, и вот вы уже смотрите Кейси Нейстата на седьмой вкладке браузера. Но вы не можете спокойно продолжать свой 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 = document.querySelector('canvas'),
context = canvas.getContext('2d');
if (!!context) {
/* если canvas поддерживается*/
}
};
Далее — подключим обработчик событий нажатия на кнопку, который будет использоваться для запуска анимации в элементе <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> и вывода немного удлинённой, в сравнении с предыдущим шагом, линии. На каждом шаге анимации, после того, как вывод изображения в элемент <canvas> окончен, изображение быстро преобразуется в формат PNG и устанавливается в качестве фавикона страницы.
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> — это позволит вам добиться интересных эффектов.
Уважаемые читатели! Есть ли среди ваших проектов такие, в которых пригодились бы анимированные фавиконы?
Автор: ru_vds
