Bounce.JS：快速创建复杂的CSS动画

照片：icopythat

自1995年以来，Javascript（一种为完成“ 使网页更具动态性 ”的卑微任务而设计的简单脚本语言）已经走了很长一段路。

由Mozilla联合创始人Brendan Eich发明，在过去五年的大部分时间里，它一直稳步取代Adobe的Flash，成为Web上动画，游戏和应用程序的首选工具。

随着JavaScript的兴起，涌现出许多新的库和生成器，以使开发人员可以轻松访问更复杂的功能。 BounceJS是这些新工具之一。

BounceJS由Joel Besada创建，可以让您借助简单的界面生成流畅，优雅的CSS动画，然后进行预览，共享和导出。 非常简单！ 如果您喜欢精美的动画，请尝试一下BounceJS 。

在下文中，我们将了解其功能和动画工作流程，并从头开始设计自定义动画。

这应该很有趣，相信我！

接口

生成器的界面简洁明了，使创建动画成为一项简单的任务。

在组件列表的左侧，我们可以在其中将各种效果添加到动画链中，并在以后进行混合和调整。 它还提供了各种动画预设的列表，您可以检出并重新混合。

Road Runner动画预设非常有趣。 您必须欣赏作者对细节的热爱。

这些预设中有许多可以用作模板，因此您可以重新混合自定义动画并节省添加组件时的时间。

在屏幕中间，您可以找到动画的预览。 正方形是占位符，用于可视化动画的所有运动。

预览屏幕下有3个按钮：播放动画，循环动画和慢动作。

后者对于详细分析运动特别有用。

您创建的每个动画都有一个唯一的URL。 您还可以通过单击以下链接获得此短链接：GET SHORT URL

免责声明：与大多数代码生成器一样，经过深思熟虑的手动编写代码几乎总是优越的。 但是，这也将更加苛刻且耗时。 如果您对随后手动调整代码不感兴趣，建议不要将Bounce推得太远。 Bounce.JS使用大量矩阵变换，这并不是所有动画场景的最佳方法。

在制作此动画时，我很难学到这一点。 但是，您的动画可能会比此动画复杂，这是一件好事。 请记住：动画时间轴越长，生成的代码越多，所以不要发疯。

这就是基础。 该过程在技术上没有任何困难-其余的取决于您的想象力。

是时候做点什么了！

让我们创建一个自定义动画。 在下面的示例中，我将展示如何创建降落伞动画，即从上往下看时通常在卡通中看到的夸张动画的类型。

在Bounce.JS中，动画分为“组件”。 将组件视为舞蹈例程的不同部分。 请记住，我们仅设计该动画的行为，而不是动画对象，也不设计背景/舞台。 当然，一旦完成运动，将其应用于任何设置的任何对象都是微不足道的。

动画组件1

问：跳伞者跳起来后会做什么？

答：当然，他们打开降落伞。 因此，我们将其转换为动画。

为了模拟降落伞的打开，最好的方法是使用Scale组件。 关于预览中正方形的原始大小，在这里我使用的原始大小为0.2，以4结束。基本上，在动画结束时它会变大20倍。

由于降落伞将具有相同的宽度和长度（如果从顶部看，它的高度是相同的），因此我们将两个尺寸的长宽比保持相同。 我们为缓动选择跳动姿态，因为它具有最适合我们需求的运动特性。 在持续时间中，我们指定动画应覆盖的时间范围。 由于降落伞的打开非常快，因此我在此处放置了2000ms。

无论动画组件的顺序如何，所有组件都将在动画开始时立即激活，因此，如果希望组件稍后开始，则需要在延迟字段中指定延迟。

提示： 如果创建复杂的动画，最好将组件的顺序与激活它们的顺序保持一致，这样就不会太容易混淆。

该跳动字段指定数量的元素，以及...反弹在整个动画。 在这种情况下，我输入了16，这是一个相对较高的数字，但对于降落伞动画来说似乎是合理的。

刚度量也是如此。 让我们为此设置一个最小值。

动画组件2

接下来，我们将模拟降落伞的运动，就像风以微妙的随机方式改变其路径一样。 为此，我们将使用翻译组件。 我在这里添加了一个微妙的动作（右侧25个单位，底部15个单位），这确实足够了。 由于动画的流动性，我建议再次使用“弹跳”作为缓动。

由于此组件将在整个动画中播放，因此我让它播放20000ms，这应该覆盖整个长度。 降落伞将从时间轴的开头开始移动，因此我们在这里不需要延迟。 由于降落伞的运动会受到风的影响更大，但比第一个组件要坚硬得多，因此我在这里给它提供了22个弹跳和3个刚度 。

动画组件3

最后，我们将添加动画的最后一个组件。

如果从上方看降落伞跳线，由于时间的增加，他显然会越来越小。

因此，他的初始尺寸为1，动画结束时的尺寸实际上为0。让我们为宽度和高度插入这些值。

显然，此处的动画持续时间应该很长。 25000ms的时间应该可以做到。

由于此动画组件将与其他组件同时播放（即没有延迟），因此我们不需要添加任何弹跳或刚度效果，因为它是从以前的组件继承而来的。 因此，将其保留为0，如此处的屏幕截图所示。

当然，可以随意调整和混合结果，这只是一个粗略的指导原则，但是结果显然在您手中。

但是，你应该有一个类似的结果这之后。

对结果满意后，可以将动画导出为CSS并在项目中使用它。

您也可以在GitHub上找到BounceJS的存储库

你怎么看？

借助众多创新的网站设计和动画制作方式，BounceJS之类的生成器非常方便，尤其是在节省了您手动编码此类动画的宝贵时间时。

尝试一下，然后在评论部分发布实验。 我们很想知道您的结果！

From: https://www.sitepoint.com/bouncejs-create-complex-css-animations-fast/