当前位置： 文江博客话题详情

如何为网站图标制作动画？

发布于 2024-08-13 10:02:03 字数 122 浏览 3 评论 0原文

如何制作这样的图标动画？

animated favicon

它似乎只在 Firefox 中工作。

原文

How to animate a favicon like that?

animated favicon

It seems to work only in Firefox.

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（7）

枯叶蝶 2024-08-20 10:02:04

Firefox

Firefox 支持动画图标。只需在 标签中添加 GIF 链接即可：

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

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

其他浏览器

在其他浏览器中，您可以使用 JavaScript 为网站图标添加动画效果。您只需从 GIF 中提取单个帧，并在每次 GIF 帧发生变化时更改 src 即可。例如，请参阅此代码（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 库。

另请参阅

Firefox

Firefox supports animated favicons. Just add a link to the GIF in <link rel="icon"> tag:

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

You can also use animated ICO file. In this case browsers that doesn't support animated favicons will display only the first frame.

Other browsers

In other browsers you can animate a favicon using JavaScript. You just have to extract single frames from the GIF and change <link rel="favicon"> src every time the GIF frame changes. See this code for example (JS Fiddle demo):

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)
}

I used libgif.js to extract GIF frames.

Unfortunately, the animation isn't very smooth in Chrome. In Firefox it works great, but Firefox already supports GIF favicons.

Check out also favico.js library.

See also

回复 原文
您的好友蓝忘机已上羡 2024-08-20 10:02:04

要为几乎所有浏览器制作图标动画，以下方法对我有用：

  1. 下载 gif 每一帧的图像。

  2. 将第一个图像链接为带有 id 的图标：

  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() {
设置间隔（函数（）{
图标更改（）；
}, 250);
};

此方法只是有助于确保更多浏览器可以看到动画，因为其他方法仅适用于某些浏览器和浏览器版本。

To animate the favicon for pretty much ALL browsers, the following worked for me:

  1. Download an image of each frame of the gif.

  2. Link the first image as an icon with an 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.

回复 原文
话少情深 2024-08-20 10:02:04

GitHub 上有存储库演示了如何执行此操作。

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

本质上，他们在画布上绘制，然后执行 canvas.toDataURL('image/png') 操作，然后将 href 设置为该数据 URL。

There are repos on GitHub demonstrating how to do this.

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

Essentially they draw on the canvas and then do canvas.toDataURL('image/png') and then set the <link> href to that data-url.

回复 原文
舟遥客 2024-08-20 10:02:04

我创建了一个 为 favicon 制作动画的库，默认是加载器动画（它是由画布生成的），但是它还支持不支持开箱即用的 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 中也是如此。

I've created a library to animate favicon, default is loader animation (it's generated by canvas), but it also support gif animation for browser that don't support gif out of the box (from version 0.3.0).

API is simple

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

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

From version 0.4.0 the library allow to create custom animation, using callback function that will generate a frame on canvas:

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

and user will be able to draw single frame

NOTE: Things to consider if you want to implement something like this:

  • to animate when tab is not active use web worker,
  • don't use requestAnimationFrame, because it stop executing in MacOSX/Chrome even in web worker.
回复 原文
归属感 2024-08-20 10:02:04

这只适用于Firefox（据我所知）。

主要浏览器现在支持 SVG 图标。并且，可以使用 SMIL 对 SVG 进行动画处理。

因此，作为 GIF 的替代方案，您可以使用 SVG favicon 并获得其其他好处。
有关如何使用 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>

例如，这 结果：

示例动画 SVG

This only works in Firefox (as far as I know).

Major browsers now support SVG favicons. And, SVGs can be animated using SMIL.

So, as an alternative to GIF, you can use SVG favicon and get its other benefits too.
For a detailed answer about how to use SVG favicons refer to this post.

For example, this is the code for my animated SVG logo (which can be used as a favicon):

<?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>

And this is the result:

Example animated SVG

回复 原文
帥小哥 2024-08-20 10:02:03

虽然目前只有 Firefox 支持它，但其他浏览器将来有望支持它。要实现此效果，您需要将 gif 上传到您的服务器，然后将以下行添加到页面的 head 部分：

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

看看 AnimatedFavIcon.com 获取更多帮助和资源。

While it's currently only supported by Firefox other browsers will hopefully support it in the future. To achieve the effect, you need to upload the gif to your server and then add the line below to head section of your page:

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

Take a look at AnimatedFavIcon.com for additional help and resources.

回复 原文
感受沵的脚步 2024-08-20 10:02:03

几乎肯定不是您正在寻找的东西，但有些人甚至在客户端 JavaScript 中以编程方式写入图标。以下网址显示了在图标中播放的旧视频游戏“Defender”：

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

这适用于 Firefox、Opera 和 Safari，但至少不适用于旧版本的 IE。我不确定最新的 IE 能做什么。

在此页面上进行“查看源代码”会带来相当有趣的阅读体验。

Almost certainly not what you're looking for, but some people have gone so far as to programatically write to the favicon in client side JavaScript. The following url shows the old videogame 'Defender' playing in the favicon:

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

This works in Firefox, Opera and Safari, but not in at least older versions of IE. I'm not sure what the latest IE might be capable of.

Doing a 'view source' on this page makes for quite an interesting read.

回复 原文
~没有更多了~

关于作者

三生殊途

暂无简介

0 文章
0 评论
22 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

胡图图

文章 0 评论 0

zt006

文章 0 评论 0

z祗昰~

文章 0 评论 0

冰葑

文章 0 评论 0

野の

文章 0 评论 0

天空

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文