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

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

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

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

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

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

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

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

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

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

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

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

onload = ()=> {
  canvas = document.querySelector('canvas'),
  context = canvas.getContext('2d');
  if (!!context) {
      /* если canvas поддерживается*/
  }
};

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

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

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

/* Стиль линий, которые будут использоваться для рисования квадратного индикатора загрузки */
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% времени анимации на каждую сторону.

Эффект анимации достигается путём стирания содержимого элемента и вывода немного удлинённой, в сравнении с предыдущим шагом, линии. На каждом шаге анимации, после того, как вывод изображения в элемент окончен, изображение быстро преобразуется в формат 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();
  }
  // Преобразуем то, что нарисовано на элементе

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

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

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

Нам нужно, чтобы после завершения всех 25 шагов анимации значение x равнялось бы 32 (то есть — размеру фавикона и элемента ). Поэтому мы будем искать значение 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();
  }
  // Преобразуем то, что нарисовано на элементе

Итоги

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

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