1. David Wu首页
  2. web前端
  3. CSS

如何制作Favicon动画

当你切换标签时,这是你的眼睛看到的第一件事。 这是解释favicon是什么的一种方式。标签区域是一个比大多数人认为的更珍贵的屏幕空间。如果做得好,除了是带有图标的标签外,它还可以成为表示网页内容或内容发生情况的完美广告牌。 CSS-Tricks Favicon       WP网站建设

当你切换标签时,这是你的眼睛看到的第一件事。

这是解释favicon是什么的一种方式。标签区域是一个比大多数人认为的更珍贵的屏幕空间。如果做得好,除了是带有图标的标签外,它还可以成为表示网页内容或内容发生情况的完美广告牌。

如何制作Favicon动画
CSS-Tricks Favicon

 

 

 

 

 

 

 

 

 

 

 

当你在标签上没有活动时,Favicons实际上是最有用的。这是一个例子:

想象一下,您正在将最近暑假期间的照片备份到云服务中。在他们上传时,您已打开一个新标签,以收集有关您去度假的地方的详细信息,以便稍后注释这些照片。有一件事导致了另一件事,现在你正在第七个标签上看Casey Neistat。但是,如果没有重新检查云服务页面以查看照片是否已上传,您将无法继续进行YouTube马拉松。

正是这种情况我们才能发挥创意!如果我们可以动态更改该图标中的像素并显示上传进度,该怎么办?这正是我们在本文中要做的。

在支持的浏览器中,我们可以借助JavaScript,HTML <canvas>和几个世纪以来的几何体来显示加载/进度动画作为图标。

直接进入,我们将从最简单的部分开始:将图标和画布元素添加到HTML中。

<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>在页面上留下可见的内容,让您看到favicon和canvas图像一起动画。

favicon和canvas都有一个标准的favicon尺寸:32平方像素。

为了演示目的,为了触发加载动画,我在页面上添加一个按钮,点击时将启动动画。这也包含在HTML中:

<button>Load</button>

现在让我们设置JavaScript。首先,检查画布支持:

onload = ()=> {
  canvas = document.querySelector('canvas'),
  context = canvas.getContext('2d');
  if (!!context) {
      /* if canvas is supported */
  }
};

接下来,添加按钮单击事件处理程序,该处理程序将在画布中提示动画。

button = document.querySelector('button');
button.addEventListener('click', function() { 
    /* A variable to track the drawing intervals */
    n = 0, 
    /* Interval speed for the animation */
    loadingInterval = setInterval(drawLoader, 60); 
});

drawLoader将是以每个60毫秒的间隔进行绘图的函数,但在我们编码之前,我想要定义要绘制的正方形线的样式。我们做一个渐变。

/* Style of the lines of the square that'll be drawn */
let gradient = context.createLinearGradient(0, 0, 32, 32);
gradient.addColorStop(0, '#c7f0fe');
gradient.addColorStop(1, '#56d3c9');
context.strokeStyle = gradient;
context.lineWidth = 8;

drawLoader,我们将按百分比绘制线条:在前25个区间内,顶线将逐渐绘制; 在第二季度,将绘制右线; 等等。

动画效果是通过实现擦除<canvas>每个间隔之前重绘从先前区间的路线长一点。

在每个间隔期间,一旦在画布中完成绘制,它就会快速转换为PNG图像以指定为图标。

function drawLoader() {
  with(context) {
    clearRect(0, 0, 32, 32);
    beginPath();
    /* Up to 25% */
    if (n<=25){ 
      /*
        (0,0)-----(32,0)
      */
      // code to draw the top line, incrementally
    }
    /* Between 25 to 50 percent */
    else if(n>25 && n<=50){ 
      /*
        (0,0)-----(32,0)
                  |
                  |
                  (32,32)
      */
      // code to draw the top and right lines.
    }
    /* Between 50 to 75 percent */
    else if(n>50 && n<= 75){ 
      /*
        (0,0)-----(32,0)
                  |
                  |
        (0,32)----(32,32)
      */
      // code to draw the top, right and bottom lines.
    }
      /* Between 75 to 100 percent */
    else if(n>75 && n<=100){
      /*
        (0,0)-----(32,0)
            |      |
            |      |
        (0,32)----(32,32)
      */
      // code to draw all four lines of the square.
    }
    stroke();
  }
  // Convert the Canvas drawing to PNG and assign it to the favicon
  favicon.href = canvas.toDataURL('image/png');
  /* When finished drawing */
  if (n === 100) {
    clearInterval(loadingInterval);
    return;
  }
  // Increment the variable used to keep track of the drawing intervals
  n++;
}

现在到数学和绘制线条的代码。

以下是我们如何在前25个区间内逐渐绘制每个区间的顶线:

n = current interval, 
x = x-coordinate of the line’s end point at a given interval.
(y-coordinate of the end point is 0 and start point of the line is 0,0)

在所有25个间隔完成时,x的值为32(favicon和画布的大小。)

所以…

x/n = 32/25
x = (32/25) * n

应用此数学并绘制线的代码是:

moveTo(0, 0); lineTo((32/25)*n, 0);

对于接下来的25个区间(右线),我们类似地以y坐标为目标。

moveTo(0, 0); lineTo(32, 0);
moveTo(32, 0); lineTo(32, (32/25)*(n-25));

这是使用其余代码绘制所有四行的指令。

function drawLoader() {
  with(context) {
    clearRect(0, 0, 32, 32);
    beginPath();
    /* Up to 25% of the time assigned to draw */
    if (n<=25){ 
      /*
        (0,0)-----(32,0)
      */
      moveTo(0, 0); lineTo((32/25)*n, 0);
    }
    /* Between 25 to 50 percent */
    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));
    }
    /* Between 50 to 75 percent */
    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);
    }
      /* Between 75 to 100 percent */
    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();
  }

  // Convert the Canvas drawing to PNG and assign it to the favicon
  favicon.href = canvas.toDataURL('image/png');
  /* When finished drawing */
  if (n === 100) {
      clearInterval(loadingInterval);
      return;
  }
  // Increment the variable used to keep track of drawing intervals
  n++;
}

 就这样!您可以从此GitHub仓库中查看和下载演示代码。额外奖励:如果您正在寻找圆形装载机,请查看此回购。

您可以使用任何所需的形状,如果fill在画布图形中使用该属性,则会产生不同的效果。

原创文章,作者:网站建设,如若转载,请注明出处:https://www.davidwu.net/archives/10100

服务项目 服务内容 收费标准(元)
开发定制 WordPress主题/插件开发定制 (以最终需求为准)
主题/插件汉化 汉化团队WordPress主题/插件,翻译率95% (以标的主题/插件的句子数量为准)
服务器环境配置 基于您现有服务器,搭建配置网站运行环境,结合我们多年来实战经验,可完美支持WordPress等PHP程序运行,并配置伪静态规则、优化目录权限等问题。服务器我们强烈推荐使用Linux系统。 100元/次
网站托管 若贵站目前尚无技术人员,无法完成服务器环境配置,可选择我们的网站托管服务,直接交付正常运行的WordPress站点,并且无需担心服务器的后续维护工作,一切都由我们来帮您完成。 标配套餐:1000元/年/站点 高配套餐:联系客服获取
网站加速优化 从服务器后端配置优化到WordPress数据库缓存、前端页面缓存、JS和CSS压缩合并,全方位优化网站加载速度,实现秒开。(此服务仅针对(云)服务器/VPS) 500元/次(仅站内优化200元/次)
主题配置 本站所有主题均支持,可快速实现,若有任何问题可以咨询客服解决,若您希望我们提供配置服务,可选购此服务。 英文主题安装 60元/次 汉化主题安装 30元/次
HTTPS配置 HTTPS已经不断普及,并且有着更高的安全性以及SEO上的优待。该服务收取的为服务费,SSL证书产生的费用请自行承担。 100元/次
网站搬家 迁移网站所有文件和数据库信息、网站相关配置的调整、以及迁移中的疑难问题故障排除。 标准收费:500元/次 若网站数据量大,需协商
网站运维 提供整站的运维服务,保证网站正常运行。包含:网站故障定位及排除、网站数据备份和恢复、网站攻击及木马等问题的处理等 标准收费:2000元/年 IP 5000以上需协商

发表评论

邮箱地址不会被公开。 必填项已用*标注