跳到主要内容

使用CSS和jQuery创建动画信息图表

结合两者CSS3动画和过渡,我们将使用CSS来设置时间线图表的动画。在向下滚动时间轴时展开数据,每个动画都通过inview触发JQuery插件当它进入视野。我们将在时间轴中查看我们每年应用的三个主要动画的组成部分。

每个信息图都讲故事。我选择了如何的故事网页设计日我参加的会议在过去的四年里一直在增长。这是我们将在示例项目中使用的数据。

教程中的代码片段显示了所有CSS3属性的未加前缀的W3C语法,以便于阅读。示例文件中的最终CSS有所有必要的前缀谢谢Autoprefixer。另请注意,演示文件需要在Web服务器上运行(本地通过类似MAMP,或FTP到您的Web主机)才能正确执行。

Ceaser is a great tool for creating custom cubic-bezier functions

Ceaser是创建自定义cubic-bezier函数的绝佳工具

在编写任何动画之前,请考虑最有趣的数据和您想要实现的整体感觉。对于网页设计日,与会者总数以及任何一位与会者前往的最远距离都是值得比较的有趣点。描绘消费热狗数量等条形图的条形图很有趣。故事的主题很轻,因此设计中的色彩明亮而俏皮,始终保持一贯的风格。

当我们滚动到每年时,日期会弹出视图以标记时间轴上的某个点。为了实现这些,我们首先编写一组描述我们想要看到的动画的关键帧。经过一番试验和错误并且在玩耍CodePen,我到了这个:

@keyframes popIn {0%{transform:scale(0);} 70%{transform:scale(1.05);} 100%{transform:scale(1);}}

我们的人口信息网动画以a开头转变将元素缩放到0的大小这实际上使它从入口开始变得不可见。然后,通过动画的70%,我们分配一个规模 1.05,它将显示我们的元素比它分配的大一点110px直径。最后,它确定了它的真实指定大小,一个等级1,在我们动画的最后一个关键帧(100%)。此关键帧声明不会自行制作任何动画。需要使用动画将动画分配给元素才能生效.date-动画式类:

.date-anim-in {animation:popIn .4s cubic-bezier(0.6,-0.28,0.735,0.045); }

我们分配的任何元素.date-动画式上课要承担人口信息网动画,用0.4秒完成动画,使用动画定时功能我们定义的财产立方贝塞尔功能和有一个动画填充模式

http://cubic-bezier.com helps compare common CSS easing keywords

http://cubic-bezier.com有助于比较常见的CSS缓动关键字

请注意,在我们的HTML中,我们只分配了类。日期到我们这一年的标记,而不是.date-动画式我们刚刚创建的课程。我们将分配.date-动画式动态地使用jQuery来控制时间人口信息网动画执行。在不编写任何其他CSS的情况下,我们还可以重复使用它来为其他日期标记设置动画,或者甚至完全根据我们的需要设置其他元素。我们的日期动画已设置好并可以使用!

条形图动画

我们的条形图显示了每年午餐时吃的蔬菜狗,热狗和饺子的数量。该宽度每个条的动画显示其总长度,而每个条的图示标签随着条的展开而逐渐消失。扩展动作是通过CSS过渡和一些聪明的嵌套来实现的。 CSS动画用于淡入淡出。这个动画中有一些东西正在发生!

首先,条形图每个条形图的HTML结构如下:

24
素食狗

每个食品包含一个

这将代表条形图中的条形以及a
用它的标签。还有一个在每个项目的总数周围,所以我们可以轻松地用jQuery将其拉出来,以便稍后为每个栏分配宽度。这有助于保持我们创建的动画可以在每年的条形图中重复使用。每张图表的动作背后的CSS完全相同,即使数据不是这样。该
S与班级.veg.pierogi.meaty将确定图表每个部分的宽度。每个孩子。酒吧
被赋予宽度100%在我们的CSS中:

.bar {宽度:100%;高度:2rem;}

现在,我们可以通过为父元素分配转换来改变图表中每个条形图的增长时间(.veg.pierogi,和.meaty)。为了获得最大效果,条形图按顺序展开并且看起来彼此重叠:首先.veg, 然后.pierogi, 然后.meaty。这是通过为每个转移属性分配并错开相关的延迟量来实现的:

.veg {z-index:100;宽度:0;过渡:宽度.5s缓入;} .pierogi {z-index:50;宽度:0;过渡:宽度.75s缓入.2s;} .meaty {width:0;过渡:宽度1s缓入.2s;}

条形图的所有三个部分的初始宽度均为0开始和aZ-index的设置为保留可视分层顺序。例如,.veg将掩盖发生的过渡.pierogi直到它过渡到比宽度更宽的宽度.veg

在它上面分层。每个部分还有一个宽度的过渡,持续时间略有不同(速记中的第一个数字)和延迟(速记中的第二个数字),以创建交错的扩展效果。当为这些中的每一个分配总宽度时
通过jQuery,触发过渡和孩子。酒吧元素将与每个元素一起成长。

We'll be rotating our coffee cup images around the y-axis. By default, the transform-origin of any element is right in the middle, perfect for the rotation

我们将围绕y轴旋转我们的咖啡杯图像。默认情况下,任何元素的transform-origin都在中间,非常适合旋转

我们的嵌套标签文本和图像以类似的方式获得其动作。我们的

标签类(包含文本和图像)绝对位于其父元素的右侧。当父元素通过其过渡扩展时,标签也随之移动。那是一次艰苦的过渡!

还有一件事我想添加到扩展条形图动画中。当所有三个条纹几乎相同的宽度时,看到标签的图像和文本在动画开始附近笨拙地堆叠在彼此之上真的令人分心。标签重叠并看起来乱码,直到条形展开一点。为了帮助减少视觉重叠,我添加了一个动画,以便在条形展开时淡入每个标签。

FadeUp动画的关键帧以不透明度0开始,以不透明度结束 1。我们还有四个不同的类可以在各种配置中分配这个动画。 (我们将以类似的方式使用这些类.date-动画式以前讨论过的课程。)

@keyframes fadeUp {from {opacity:0;} to {opacity:1;}} .fade-down {animation:fadeUp .15s ease-out reverse both; } .food1 .label {动画:fadeUp 0.5s缓解0.75s; } .food2 .label {animation:fadeUp 0.5s ease-out 1s both; } .food3 .label {动画:fadeUp 0.5s缓出1.25s; }

.fade向下一开始课可能看起来有点滑稽。我们正在分配动画淡入淡出而且还设置了动画方向通过速记反转的财产。这将按照它们列出的相反顺序执行关键帧(不透明度)1不透明的0)。因此,我们可以使用这一组关键帧来淡入或淡出元素,具体取决于动画方向我们设置。那不是全部!我们创建了三个额外的类来用于条形图标签的淡入。我们使用相同的淡入淡出每个关键帧,但有不同的动画延迟每个人的价值。

当我们分配.food1.food2.food3通过jQuery的类,每个中的标签将分配给我们淡入淡出交错量延迟的动画。我们会看到它们一个接一个地消失。通过创建动画属性的不同配置,您可以从单个关键帧声明中获得大量里程。这种可重用性是我最喜欢的CSS动画功能之一。

Using the same animation, the coffee cup images rotate into place

使用相同的动画,咖啡杯图像旋转到位

在会议上喝的咖啡量乞求在这个信息图中显着显示。每个咖啡杯图像代表两杯咖啡消耗,以防止事情变得过于强烈。咖啡杯摆动到位,有一点弹簧,并出现错开的时间。我们通过动画3D变换和少数几个来实现这一目标第n-的型规则。

为了使咖啡杯看起来在3D空间中旋转,我们将围绕y轴旋转它们。 HTML元素缺乏任何深度,因此杯子本质上是空间明信片:它们有正面和背面,但如果我们从侧面看它们,它们基本上是不可见的,因为它们是无限薄的。我们动画的关键帧如下所示:

@keyframes swingIn {0%{transform:rotateY(90deg); animation-timing-function:cubic-bezier(0.895,0.03,0.685,0.22);} 5%{opacity:.5; animation-timing-function:linear;} 60%{transform:rotateY(-20deg); animation-timing-function:cubic-bezier(0.165,0.84,0.44,1);} 100%{opacity:1; transform:rotateY(0deg);}}

我们也设定了透视在我们的父元素上的属性,以确保我们所有的咖啡杯都使用相同的视角旋转:

Ul.cups {perspective:800; ...}

在此动画过程中,咖啡杯的不透明度和旋转都会以不同的速率受到影响。它始于围绕y轴旋转90度,这意味着我们的纸张薄图像旋转而无法看到。它以0度的旋转结束,这意味着它与屏幕平坦。它旋转超过其最终位置,以便将一点点反弹回到原位。

We're using a transition, nesting and animation to fade each label in

我们正在使用转换,嵌套和动画来淡化每个标签

动画定时功能在关键帧之间也有不同的设置,以最大化运动的“快感”。你不能动画动画定时功能属性,但您可以将它设置为关键帧之间的不同值,就像我们在这里一样。该动画定时功能我们的定义0%关键帧将在之间使用0%5%关键帧等等通过我们的关键帧作为每个新的动画定时功能属性在关键帧规则中声明。

类似于淡入淡出条形图标签的动画,咖啡杯的动画被分配给

  • 每个列表中的s,使用多个类。在这种情况下,由于咖啡杯的总数变化很大,所以:第n型-伪类选择器用于分配不同的动画延迟咖啡杯的属性值
  • 分为10组。随着咖啡杯列表的出现,每个
  • 将被分配为.swing式通过jQuery。该:第n型-CSS中的规则将决定分配给每个咖啡杯的动画属性
  • .swing-in:nth-of-type(2n + 1){animation:swingIn 0.9s 0.75s; }

    这些类使用.swing式Class来设置元素的顺序荡秋千动画。元素也有不同的值动画延迟财产(速记中的第二个数字)。它们互相覆盖,导致咖啡杯以10个为一组进行动画制作,使得动画几乎呈条纹状,因为杯子都是通过分配一个类而出现的。我使用Sass循环来创建这些规则的增量动画延迟。现在让我们看一下JavaScript,它正在处理逻辑并在我们的信息图中使用所有CSS动画和过渡。

    There are lots of easing functions to choose from

    有许多缓动功能可供选择

    触发动画

    我们的每个动画都需要在根据我们滚动页面的距离进入视图时触发。有许多库和脚本可以为我们提供这类信息。我选择使用inviewJQuery插件。只要特定元素位于可见视口区域内,此插件就可以触发事件。使用该事件,我可以在有问题的元素可见时分配包含我的动画属性的CSS类,然后在不可用时将其删除。 CSS动画在分配时执行。因此,以这种方式添加和删除具有动画属性的类实际上每次添加时都会重新触发动画。这正是我想在这里做的。记住我们的.date-动画式具有动画属性的类我们想要使用日期标记吗?我们可以将它分配到每年的标记中,如下所示:

    $(“。date”)。bind('inview',function(event,visible,visiblePartX,visiblePartY){if(visible){$(this).addClass('date-anim-in');} else {$ (this).removeClass('date-anim-in');}});

    We'll assign a class via jQuery to have the date marker animate in

    我们将通过jQuery分配一个类来使日期标记具有动画效果

    使用inview插件,我们寻找一个

    与班级。日期并添加.date-动画式当它被标记为可见时的类。添加后,将应用关联的动画属性,并使用日期标记设置动画人口信息网动画。当它不可见时,.date-动画式类被删除。该。日期
    恢复其内在的风格,我们准备重新分配.date-动画式课程重新回到视野中。当我们向下滚动时间线时,我们的年份标记现在正在弹出。虽然咖啡杯的控制方式相同,但条形图动画还有更多功能:

    $(“。nine .food”)。bind('inview',function(event,visible,visiblePartX,visiblePartY){if(visible){$(“。nine .veg”)。removeClass('fade-down') .addClass('food1')。css('width',$(“。nine .veg .label span”)。text()* 2); $(“。nine .pierogi”)。removeClass('fade-down ')。addClass('food2')。css('width',$(“。nine .pierogi .label span”)。text()* 2); $(“。nine .meaty”)。removeClass('fade -down')。addClass('food3')。css('width',$(“。nine .meaty .label span”)。text()* 2);} else {$(“。nine .veg”) .toggleClass('fade-down food1')。css('width','0px'); $(“。nine .pierogi”)。toggleClass('fade-down food2')。css('width','0px '); $(“。nine .meaty”)。toggleClass('fade-down food3')。css('width','0px');}});

    在这种情况下,作为我们的。餐饮每年的部分变得可见,我们对条形图中表示的三种食品中的每一种进行三次更改。首先,我们删除该类.fade向下从它(如果它在那里)。例如,如果我们通过我们的信息图向上滚动,那么.fade向下Class将应用于我们已经滚过的图表。接下来.food1(要么.food2要么 。Food3)类被添加。这是与我们交错延迟相关的课程淡入淡出动画。最后,我们根据包装的总数为食品分配宽度触发我们之前设定的过渡。另一方面,当.food部分不再可见时,我们反转类分配并设置宽度0 如果它重新出现,它就可以再次播放了。有了它,我们的信息图完全动画!

    话:Val Head

    这篇文章最初出现在网络杂志问题246。



  • 翻译字数超限