bounce.js：快速创建复杂的CSS动画

Bounce.JS：轻松创建流畅CSS动画的利器

Bounce.JS，由Joel Besada创建，是一个简单易用的工具，可帮助开发者快速生成流畅、优雅的CSS动画。它属于新兴的JavaScript库和生成器浪潮中的一员，有效简化了复杂动画的创建过程。

图片来自icopythat

自1995年诞生以来，JavaScript——这门最初旨在增强网页动态效果的简单脚本语言——已经取得了长足的进步。由Mozilla联合创始人Brendan Eich发明，JavaScript在过去五年中逐渐取代Adobe Flash，成为网页动画、游戏和应用程序的首选技术。

JavaScript的兴起催生了一批新的库和生成器，使开发者能够更轻松地访问更复杂的动画功能。Bounce.JS正是其中之一。

Bounce.JS允许您通过简单的界面生成平滑、优雅的CSS动画，并进行预览、共享和导出。其操作非常直观！如果您喜欢精巧的动画效果，不妨试试Bounce.JS。

接下来，我们将探讨Bounce.JS的功能和动画工作流程，并创建一个自定义动画。相信您会觉得很有趣！

界面

Bounce.JS的界面简洁明了，使动画创建过程变得非常简单。

左侧是组件列表，您可以在这里添加各种效果到动画链中，并进行调整。它还提供一系列动画预设，您可以查看和修改这些预设，从而节省添加组件的时间。“Road Runner”动画预设非常有趣，作者对细节的处理令人赞叹。许多预设可用作模板，方便您混合自定义动画并节省时间。

屏幕中央是动画预览区域，一个正方形作为占位符，显示动画的所有动作。

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

慢动作功能尤其有助于详细分析动画的运动轨迹。

您创建的每个动画都拥有一个唯一的URL，点击“GET SHORT URL”可以获取简短链接。

免责声明：与大多数代码生成器一样，精心编写的代码通常会远远优于自动生成的代码。但是，手动编写代码会更费时费力。如果您不打算事后手动调整代码，建议不要过度依赖Bounce.JS。Bounce.JS大量使用矩阵变换，这并非所有动画场景的最佳方法。

我在制作这个动画时亲身体会到了这一点。不过，您的动画可能不会像这个一样复杂，这是一件好事。记住：动画时间线越长，生成的代码就越多，所以不要过度使用。

这就是基础知识。整个过程在技术上并不复杂——其余部分取决于您的想象力。

动手制作

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

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

动画组件1

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

答：当然，他们会打开降落伞。所以让我们把它转换成动画。

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

由于降落伞的宽度和长度（从上面看的高度）相同，我们保持两个维度的纵横比相同。我们为Easing选择Bounce属性，因为它最符合我们的需求。在持续时间中，我们指定动画应涵盖的时间范围。由于降落伞的打开速度很快，我这里设置了2000毫秒。

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

提示：如果您创建复杂的动画，最好保持组件的顺序与它们激活的顺序相同，这样就不会轻易混淆。

Bounces字段指定元素在动画过程中弹跳的次数。在本例中，我输入了16，这是一个相对较高的数字，但对于降落伞动画来说是合理的。

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

动画组件2

接下来，我们将模拟降落伞的运动，就像风以微妙的随机方式改变其路径一样。为此，我们将使用Translate组件。我在这里添加了一个细微的移动（向右25个单位，向下15个单位），这应该足够了。我建议再次使用Bouncing作为Easing，因为动画的流畅性。

由于此组件将在整个动画过程中播放，我让它播放20000毫秒，这应该覆盖其整个长度。降落伞将从时间线的开始移动，因此我们这里不需要延迟。由于降落伞的运动会更多地受到风的影响，但比第一个组件更硬，我在这里给了它22个Bounces和3的Stiffness。

动画组件3

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

如果您从上方观察跳伞者，由于时间的推移和距离的增加，他显然会显得越来越小。

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

动画的持续时间在这里应该相当长，很明显。25000毫秒就足够了。

由于此动画组件将与其他组件同时播放（即没有延迟），我们不需要添加任何弹跳或刚度效果，因为它继承自之前的组件。因此，像这里的屏幕截图一样，将它们保留为0。

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

但是，您之后应该会有类似的结果。

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

您还可以在GitHub上找到Bounce.JS的存储库。

您的想法？

随着设计和动画网站的许多创新新方法的出现，像Bounce.JS这样的生成器非常方便，尤其是在节省您手动编写此类动画代码的宝贵时间方面。

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

关于Bounce.js的常见问题

如何在我的项目中安装Bounce.js？

要安装Bounce.js，您可以使用npm或Bower。如果您使用npm，可以使用命令npm install bounce.js进行安装。对于Bower，使用命令bower install bounce.js。安装后，您可以使用script标签将其包含在HTML文件中。

我可以将Bounce.js与其他JavaScript库一起使用吗？

是的，Bounce.js与其他JavaScript库兼容。它不会干扰其他库的功能。您可以将其与jQuery、React、Angular和Vue.js等库一起使用。

如何使用Bounce.js创建动画？

使用Bounce.js创建动画包括创建一个新的Bounce对象并向其中添加组件。您可以添加诸如缩放、旋转、平移和倾斜之类的组件。添加组件后，您可以使用applyTo方法将动画应用于元素。

我可以在Bounce.js中控制动画的持续时间和延迟吗？

是的，Bounce.js允许您控制动画的持续时间和延迟。您可以分别使用duration和delay方法设置持续时间和延迟。值以毫秒为单位。

如何在Bounce.js中链接动画？

您可以使用chain方法在Bounce.js中链接动画。此方法允许您顺序执行动画。您可以将Bounce对象的数组传递给chain方法以将它们链接起来。

我可以使用Bounce.js进行响应式设计吗？

是的，Bounce.js可用于响应式设计。使用Bounce.js创建的动画是可缩放的，并适应不同的屏幕尺寸。您还可以使用媒体查询来控制动画在不同设备上的行为。

如何在Bounce.js中停止动画？

您可以使用stop方法在Bounce.js中停止动画。此方法会停止动画并将元素重置为其初始状态。

我可以使用Bounce.js进行复杂的动画吗？

是的，Bounce.js能够创建复杂的动画。您可以组合多个组件和链接动画来创建复杂的效果。但是，这需要对库和CSS动画有很好的理解。

Bounce.js与所有浏览器兼容吗？

Bounce.js与大多数现代浏览器兼容。但是，某些功能可能在旧版浏览器中不起作用。最好在不同的浏览器中测试您的动画以确保兼容性。

我可以将Bounce.js用于商业项目吗？

是的，Bounce.js是开源的，可免费用于个人和商业项目。您可以使用它为您的网站、应用程序、游戏和其他项目创建动画。

以上是bounce.js：快速创建复杂的CSS动画的详细内容。更多信息请关注PHP中文网其他相关文章！