Как анимировать значок?

Question

Как анимировать значок таким образом?

Кажется, это работает только в Firefox.

Answer 1

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

<link rel="icon" href="animated_favicon.gif" type="image/gif" >

Взгляните на AnimatedFavIcon.com за дополнительной помощью и ресурсами.

Answer 2

Почти наверняка это не то, что вы ищете, но некоторые люди зашли так далеко, что программно записывают значок в клиентском JavaScript.Следующий URL-адрес показывает старую видеоигру "Defender", которая воспроизводится в значке:

http://www.p01.org/defender_of_the_favicon/

Это работает в Firefox, Opera и Safari, но не по крайней мере в более старых версиях IE.Я не уверен, на что может быть способна последняя версия IE.

Выполнение "просмотра исходного кода" на этой странице делает чтение довольно интересным.

Answer 3

Firefox

Firefox поддерживает анимированные значки.Просто добавьте ссылку на GIF в <link rel="icon"> тег:

<link rel="icon" href="/favicon.gif">

Вы также можете использовать анимированный файл ICO.В этом случае браузеры, которые не поддерживают анимированные значки, будут отображать только первый кадр.

Другие браузеры

В других браузерах вы можете анимировать значок с помощью JavaScript.Вам просто нужно извлечь отдельные кадры из GIF и изменить <link rel="favicon"> src каждый раз, когда меняется GIF-кадр.Смотрите, например, этот код (Демо-версия JS Fiddle):

var $parent = document.createElement("div")
    $gif = document.createElement("img")
   ,$favicon = document.createElement("link")

// Required for CORS
$gif.crossOrigin = "anonymous"

$gif.src = "https://i.imgur.com/v0oxdQ8.gif"

$favicon.rel = "icon"

// JS Fiddle always displays the result in an <iframe>,
// so we have to add the favicon to the parent window
window.parent.document.head.appendChild($favicon)

// libgif.js requires the GIF <img> tag to have a parent
$parent.appendChild($gif)

var supergif = new SuperGif({gif: $gif})
   ,$canvas

supergif.load(()=> {
  $canvas = supergif.get_canvas()
  updateFavicon()
})

function updateFavicon() {
  $favicon.href = $canvas.toDataURL()
  window.requestAnimationFrame(updateFavicon)
}

_{Я использовал libgif.js для извлечения GIF-кадров.}

К сожалению, анимация в Chrome не очень плавная.В Firefox это отлично работает, но Firefox уже поддерживает GIF-значки.

Проверьте также favico.js библиотека.

Смотрите также

• Как добавить значок вкладки браузера (favicon) для веб-сайта?
• Динамическое изменение значка веб-сайта

Answer 4

Есть репо на ГитХаб демонстрирую, как это сделать.

http://lab.ejci.net/favico.js/example-simple/

По сути, они рисуют на холсте, а затем делают canvas.toDataURL('image/png') и затем установите <link> ссылка на этот URL-адрес данных.

Answer 5

Я создал библиотека для анимации значка, по умолчанию используется анимация загрузчика (она генерируется canvas), но она также поддерживает gif-анимацию для браузеров, которые не поддерживают gif из коробки (начиная с версии 0.3.0).

API очень прост

favloader.init({
    color: 'red'
});

favloader.start();
favloader.stop();

Версия 0.4.0 будет иметь функцию обратного вызова, которая сгенерирует фрейм примерно такого типа:

favloader.init({
   frame: function(ctx /* canvas context 2D */) {
   }
});

и пользователь сможет нарисовать один кадр

ПРИМЕЧАНИЕ: Что следует учитывать, если вы хотите реализовать что-то подобное:

• чтобы анимировать, когда вкладка не активна, используйте web worker,
• не используйте requestAnimationFrame, потому что он перестает выполняться в MacOSX / Chrome даже в web worker.

Answer 6

Чтобы анимировать значок значка практически для ВСЕХ браузеров, у меня сработало следующее:

1. Загрузите изображение каждого кадра в формате gif.

2. Свяжите первое изображение в виде значка с идентификатором:

   <link rel="icon" type="image/png" href="/image1.png" id="icon"/>  
   

3. Создайте функцию для выполнения цикла и используйте setTimeout() для каждого изображения.Время является переменным и может быть установлено на любую скорость анимации, которую вы хотели бы видеть.Вот пример:

   function iconChange() {
   setTimeout(function(){ document.getElementById("icon").href = "/image1.png";}, 333);
   setTimeout(function(){ document.getElementById("icon").href = "/image2.png";}, 667);
   setTimeout(function(){ document.getElementById("icon").href = "/image.png";}, 1000);  
   }
   

4. Создайте цикл при загрузке окна:

   window.onload = function() {
   setInterval(function() {
   iconChange();
   }, 250);
   };
   

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