让你的网页图标(Favicon)变成动感的饼图动画

 

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

 

让你的网页图标(Favicon)变成动感的饼图动画

 

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 显示的加载进度效果并不是网页上实际内容的加载进度,只是一种模拟效果。例如我们平常配置网页图标的代码如下:

<link type="image/x-icon" rel="icon" href="favicon.ico">

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

<link type="image/x-icon" rel="icon" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABuklEQVQ4T41Tv0vDUBC+1IAojdQq3VVwUSxSdVD8DQ5OWsFNcdTBdhF0UJD6D9j+BS5uom46aLE4WSSYQhFxEmxLl1YaQSUp8e6ZxPYlFh8c7+5e7nvfXb4nALcMwwhiagFtAm3QPFZwv0E7FwSBfHsJtQEWb2J8iObhgc24jPs+giSscxsAi08wuUQHhUIB8vk8qKoKY+E0fHZLUF3tA1+ESLF1iiDsWwaAxRHc4rquQyaTgVKpZBOYmU+DRzNYrA75oeViBcROL4VRYiKYPd9jQpRlua6YvqoFYCAjHSDdrZNL7UwTwC46B0Q7m83aN1sOD0D5t/i41c4eAVxhbtbtdjcGHItrAihiMpBKpUDTtH8x0CURxMo2a6MhgPiuw+SyDII5RAtd9zaBqO6wbhq20K5UILT16GBVM0jWwp9D7DrOQc/RqwOAHyJJN4nm5wc5EHuGwO2vJtgAh/0gpTcYfbQph5AURYFymX4xwOjaA7TmvmwGagiFdMkJyTrlpVx8eoHgXBKqzR746G1DKfeDL2pL+QxVGKZat8cUw7zP0fhPgmjTY4pb53UAlDSlvYiu23Omm+ue8zcnJOKk+8JFaQAAAABJRU5ErkJggg==">

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

   

Piecon 使用方法

  

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

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

<script src="piecon.js" type="text/javascript"></script> 

  然后设置 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>    <link rel="icon" href="favicon.ico" />    <script src="piecon.js"></script>    <script>    (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>

 

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

 

 

本文链接:网页效果实战:使用 Piecon 生成动感的网页图标

编译来源:前端里 ◆ 关注前端开发技术 ◆ 分享网页设计资源

赞 (0) 打赏
分享到: 更多 (0)

相关推荐

热门推荐

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏