更好的信息图表数据展示：实用动画实例_极简慕枫

时间：2019-08-02

编辑:网站制作公司

711

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

动画数据和信息图表

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

动画计数器

郑州网站建设首先让我们从数据计数器开始。他们在这里，动画中期：

向下滚动演示页面以查看它们的运行情况。打开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文件，找到包含该类的元素et-counter。它有一个重要且必需的属性data-to- 这是我们应该从0开始计算的数字。在这里放置你想要的任何整数值。如果你想要动画多个计数器，只需复制并更改数据到值; 他们将以相同的持续时间制作动画。一旦计数器进入视口，我们将添加一个active类并执行插件调用。

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

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

动画进度条

下一个元素是我们的进度条。此元素对基于百分比的数据动画很有用。打开index.html文件，找到包含该类的元素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%',

});

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