更好的信息图表数据表示：实用动画示例

动作和动画如果处理得当，可以使您的网站更具吸引力。使用数据展示和信息图表的网站就是一个很好的例子。使用我们之前创建的动画框架，在本教程中，您将学习如何为三个信息图示例制作动画：数据计数器、进度条和圆形进度条。

在我们开始之前

我强烈建议您在开始之前阅读上一个教程，以便您熟悉主要概念和我们正在使用的 javascript 函数。

更好的信息图表数据表示：实用动画示例第1张动画让您的基本 html 模板更上一层楼 Karen Pogosyan

除了框架之外，我们还需要几个 JavaScript 插件和 fontawesome：

简易饼图
jquery countTo
航点
真棒

在练习文件中，我已经将这些插件包含在 controller.js 文件中。

动画数据和信息图表

信息图表本身不是动画的，它们是数据呈现的静态形式。我们将采用静态信息图表网页并添加一些动画。从上一篇文章中，您将了解到我们的动画是在事件执行时发生的。在我们的示例中，我们将使用网页滚动事件，因此一旦进入窗口视口，我们将在页面滚动上为我们的各种信息图片段设置动画。

动画计数器

首先让我们从数据计数器开始。他们在这里，动画中间：

更好的信息图表数据表示：实用动画示例第2张

向下滚动演示页面以查看它们的实际效果。打开 controller.js 文件并找到该INFOGRAPHICS部分（第 151 行）。你会看到代码：

$('.et-counter').each(function(){

	var $this   = $(this);
	var $thisTo = $this.data('to');

	$(this).waypoint({
        handler: function(direction) {

        	var element = $(this.element);

            element.addClass('active');
    		element.find('.counter').countTo({
			    from: 0,
			    to: $thisTo,
			    speed: 2000,
			    refreshInterval: 30
			});

            this.destroy();
        },
        offset: '75%',
    });

});

使用航点，我们可以检测每个计数器何时进入视口并在那时执行数据计数。打开 index.html 文件并找到具有 class 的元素et-counter。它有一个重要且必需的属性data-to——这是我们应该从 0 开始计数的数字。把你想要的任何整数值放在这里。如果您想为多个计数器设置动画，只需制作副本并将数据更改为值即可；它们将以相同的持续时间进行动画处理。一旦计数器进入视口，我们将添加一个active类并执行插件调用。

使用计数器元素，您可以使用 Fontawesome 图标和数字后缀，例如1000k或 10b。您也可以修改它以使用 $1000 之类的前缀。

为了使动画更具吸引力，我将列动画与计数器动画结合在一起。

动画进度条

下一个元素是我们的进度条。此元素对于基于百分比的数据动画很有用。打开 index.html 文件并找到具有 class 的元素et-progress。它包含一个带有bar类的 div——你会注意到它有一个属性data-percentage。输入 0-100 之间的任意整数值，然后打开 controller.js 文件并找到代码：

$('.et-progress').each(function(){

	var $this 	   = $(this);
	var bar   	   = $this.find('.bar');
	var percentage = bar.data('percentage');
	var percent    = $this.find('.percent');

	$(this).waypoint({
        handler: function(direction) {

            bar.addClass('visible')
			.animate({width: percentage+'%'}, 2000);

			percent.addClass('visible')
			.countTo({
			    from: 0,
			    to: percentage,
			    speed: 2000,
			    refreshInterval: 30
			});

            this.destroy();
        },
        offset: '75%',
    });

});

从代码中可以看出，我们首先使用航点插件确保进度条在视口中。之后，我们将条形 div 的宽度从 0 设置为输入的百分比值，我们还使用您在前面示例中已经熟悉的 countTo 插件为百分比数字设置动画。在这里您还可以修改进度条以具有动态颜色数据属性（我制作了预定义的颜色）。再次为了使演示文稿更具吸引力，我将进度条动画与列动画结合在一起。

动画圆形进度条

我们的最后一个例子是一个圆形进度条。该元素背后的逻辑与常规进度条元素非常相似，但样式不同。

更好的信息图表数据表示：实用动画示例第3张

同样，使用航路点，我们需要确保圆形进度条在视口中。之后，我们将调用两个插件：easyPie图表和第一个示例中的 countTo。

打开 index.html 并找到具有 class 的元素et-circle-progress。你会看到它有data-percentage和data-bar属性。第一个是从 0 到 100 的百分比值。第二个是动画条的颜色。当插件创建一个画布来动画圆圈的进度时，我们需要传递颜色。

$('.et-circle-progress').each(function(){

	var $this 	   = $(this);
	var bar   	   = $this.data('bar');
	var track      = $this.data('track');
	var percentage = $this.data('percent');
	var percent    = $this.find('.percent');
	var size       = 200;

	if ($this.hasClass('size-medium')) {size = 240;}
	if ($this.hasClass('size-large'))  {size = 300;}

	$this.waypoint({
        handler: function(direction) {

            $(this.element).addClass('visible');

			$(this.element).easyPiechart({
				barColor: bar,
				trackColor: (typeof track == "undefined") ? "#eeeeee" : track,
				lineCap:'square',
				lineWidth:16,
				size:size,
				animate:'1500',
				scaleColor: false
			});

			percent.countTo({
			    from: 0,
			    to: percentage,
			    speed: 2000,
			    refreshInterval: 30
			});

            this.destroy();
        },
        offset: 'bottom-in-view',
    });

});