如何动画一个图标？

如何动画一个图标喜欢这样？

animated favicon

它似乎只能在 Firefox 中工作。

86212 次浏览
小开
最佳答案

虽然目前只有 Firefox 支持，但希望将来其他浏览器也会支持。为了达到这个效果，你需要把 gif 上传到你的服务器上，然后在你页面的 head部分添加下面这行:

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

查看 Animatedfavicon.com以获得更多的帮助和资源。

小开

几乎可以肯定不是您要找的，但是有些人甚至在客户端 JavaScript 中以编程方式编写图标。下面的网址显示了老的视频游戏“捍卫者”在图标中播放:

Http://www.p01.org/defender_of_the_favicon/

这可以在 Firefox，Opera 和 Safari 中使用，但是至少在旧版本的 IE 中不能使用。我不确定最新的 IE 能做什么。

在这个页面上做一个“查看源代码”会是一个非常有趣的阅读。

小开

火狐

Firefox 支持动画图标，只需在 <link rel="icon">标签中添加一个 GIF 链接:

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

您还可以使用动画 ICO 文件。在这种情况下，不支持动画图标的浏览器将只显示第一帧。

其他浏览器

在其他浏览器中，您可以使用 JavaScript 动画图标。您只需要从 GIF 中提取单帧，并在每次 GIF 帧更改时更改 <link rel="favicon"> src。参见下面的代码示例(JS 小提琴演示) :

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 图标。

也可以查看 干杯库。

参见

小开

有 GitHub的回购证明如何做到这一点。

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

本质上，它们在画布上绘制，然后执行 canvas.toDataURL('image/png')，然后将 <link> href 设置为 data-url。

小开

我已经创建了一个 动画图标库，默认是加载程序动画(它是由画布生成的) ，但它也支持浏览器的 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 中也是如此。
小开

为了给几乎所有浏览器的图标添加动画效果，下面的方法对我很有效:

  1. 下载 gif 每帧的图像。

  2. 将第一张图像作为图标链接到一个 id:

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

  3. Create a function to loop, and use setTimeout() for each image. The times are variable and can be set to however fast you would like the animation. Here's an example:

    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. Create a loop when the window loads:

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

This method just helps to ensure that more browsers can see the animation, because other methods only work in certain browsers, and browser versions.

小开

这只适用于 火狐(据我所知)。

现在主流浏览器都支持 SVG 收藏夹，而且 SVG 可以使用 微笑进行动画处理。

因此，作为 GIF 的替代品，您可以使用 SVG 图标，并获得其他好处。
有关如何使用 SVG 图标的详细答案，请参阅 这篇文章。

例如，下面是我的动画 SVG 徽标(可以是 用作图标)的代码:

<?xml version="1.0" encoding="UTF-8"?>
<svg width="280" height="260" version="1.1" viewBox="0 0 280 260" xmlns="http://www.w3.org/2000/svg">
<linearGradient id="grad" x1="140" x2="140" y1="260" gradientUnits="userSpaceOnUse">
<stop stop-color="#ffa00f" offset="0"/>
<stop stop-color="#ffbe0f" offset="1"/>
</linearGradient>
<path d="m15 150c6.3913 2.885 20.753 8.8719 30 25 20 35 25 70-5 70s-25-35-5-70l60-90c20-35 25-70-5-70s-25 35-5 70l60 90c20 35 25 70-5 70s-25-35-5-70l60-90c20-35 25-70-5-70s-25 35-5 70l60 90c20 35 25 70-5 70s-25-35-5-70c9.2467-16.128 23.609-22.115 30-25" fill="none" stroke="#aaa" stroke-linecap="round" stroke-width="30"/>
<path d="m15 150c6.3913 2.885 20.753 8.8719 30 25 20 35 25 70-5 70s-25-35-5-70l60-90c20-35 25-70-5-70s-25 35-5 70l60 90c20 35 25 70-5 70s-25-35-5-70l60-90c20-35 25-70-5-70s-25 35-5 70l60 90c20 35 25 70-5 70s-25-35-5-70c9.2467-16.128 23.609-22.115 30-25" fill="none" stroke="url(#grad)" stroke-linecap="round" stroke-width="30" stroke-dashoffset="1374" stroke-dasharray="1374">
<animate id="anim1" attributeName="stroke-dashoffset" from="1374" to="0" dur="4s" fill="freeze" calcMode="spline" keyTimes="0; 1" keySplines=".42,0,.58,1" begin="0s; anim2.end"/>
<animate id="anim2" attributeName="stroke-dashoffset" from="2748" to="1374" dur="4s" fill="freeze" calcMode="spline" keyTimes="0; 1" keySplines=".42,0,.58,1" begin="anim1.end + 8s"/>
</path>
</svg>

这就是结果:

Example animated SVG


提交答案