!!!!!! 让你的网页图标（favicon.ico）变成动感加载的饼图动画

网页图标（Favicon），就是页面标题前面的那个小图标，一般命名为 favicon.ico，存放在网站的根目录下面。这个功能最早由微软创设，目前主流的浏览器都支持。今天这篇文章教大家如何使用 Piecon 生成动感的网页图标加载动画，效果如下：

Piecon 基本原理

Piecon 是著名的代码托管平台 Github 上的开源库，能够动态生成饼图（Pie Charts）模式的网页图标，同时可以显示加载的百分比。它的灵感来源于动态控制网页图标的开源库 Tinycon，同样托管在 Github 上面。

Piecon 的基本原理是利用 HTML5 的 Canvas 标签绘制饼图并导出为图片，核心代码如下：

var drawFavicon = function(percentage) {

var canvas = getCanvas();

var context = canvas.getContext("2d");

var percentage = percentage || 0;

var src = currentFavicon;

var faviconImage = new Image();

faviconImage.onload = function() {

if (context) {

context.clearRect(0, 0, 16, 16);

// Draw shadow

context.beginPath();

context.moveTo(canvas.width / 2, canvas.height / 2);

context.arc(canvas.width / 2, canvas.height / 2, Math.min(canvas.width / 2, canvas.height / 2), 0, Math.PI * 2, false);

context.fillStyle = options.shadow;

context.fill();

// Draw background

context.beginPath();

context.moveTo(canvas.width / 2, canvas.height / 2);

context.arc(canvas.width / 2, canvas.height / 2, Math.min(canvas.width / 2, canvas.height / 2) - 2, 0, Math.PI * 2, false);

context.fillStyle = options.background;

context.fill();

// Draw pie

if (percentage > 0) {

context.beginPath();

context.moveTo(canvas.width / 2, canvas.height / 2);

context.arc(canvas.width / 2, canvas.height / 2, Math.min(canvas.width / 2, canvas.height / 2) - 2, (-0.5) * Math.PI, (-0.5 + 2 * percentage / 100) * Math.PI, false);

context.lineTo(canvas.width / 2, canvas.height / 2);

context.fillStyle = options.color;

context.fill();

}

setFaviconTag(canvas.toDataURL());

}

};

// allow cross origin resource requests if the image is not a data:uri

// as detailed here:https://github.com/mrdoob/three.js/issues/1305

if (!src.match(/^data/)) {

faviconImage.crossOrigin = 'anonymous';

}

faviconImage.src = src;

};

生成URL形式的图片然后设置到 Favicon 的URL上并使用 setInterval 函数周期性更新。所以 Piecon 显示的加载进度效果并不是网页上实际内容的加载进度，只是一种模拟效果。例如我们平常配置网页图标的代码如下：

使用 Piecon 生成的饼图模式的网页图标是Base64编码的URL字符串，代码如下：

把 href 中的代码粘贴到浏览器地址栏回车即可看到图片，感兴趣的朋友可以试验一下。点击测试

Piecon 使用方法

相信大家看了前面的介绍之后，对 Piecon 的基本原理都了解了，那么它的使用方法就更简单了。

首页需要引入 piecon.js 文件：

然后设置 piecon 的显示选项，并周期性更新，代码如下：

(function(){

var count = 86;

Piecon.setOptions({

color: '#ff0084', // 饼图颜色

background: '#eee', // 饼图空白部分的颜色

shadow: '#fff', // 饼图外环颜色

fallback: 'force' // true：显示饼图, false：显示百分比, 'force'：同时显示饼图和百分比)

});

var i = setInterval(function(){

if (++count > 100) { Piecon.reset(); clearInterval(i); return false; }

Piecon.setProgress(count);

}, 250);

})();

setProgress 方法用于设置百分比，上面代码中我们初始设置百分比为86，也可以设置为0或者其它值：

Piecon.setProgress(12);

Piecon.setProgress(25);

Piecon.setProgress(50);

浏览器兼容：因为使用了 HTML5 Canvas 标签，所以在 Chrome 中效果最好，Firefox 和 Opera 饼图会闪烁，Safari 和 IE 只能显示百分比。这个效果完整的代码如下：

<!doctype html>

<html>

<head>

<title>Piecon</title>

(function(){

var count = 86;

Piecon.setOptions({

color: '#ff0084',

background: '#eee',

shadow: '#fff',

fallback: false

});

var i = setInterval(function(){

if (++count > 100) { Piecon.reset(); clearInterval(i); return false; }

Piecon.setProgress(count);

}, 250);

})();

</script>

</head>

<body>

</body>

</html>

点击预览效果下载示例代码

本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请点击举报。