使用Expressive Animator创建弹性与弹跳效果

在现代网页设计领域，SVG图像被广泛应用于插画、图标和背景效果，因其清晰度和轻量级特性而备受推崇。虽然静态SVG图像在网页设计中扮演重要角色，但只有当它们与动态效果结合时，才能真正发挥其潜力。

精心制作的SVG动画能为网站增添生机和个性。在数字体验方面，并非所有动画都具有相同的影响力。例如，弹性和弹跳效果在动态设计中具有独特的吸引力，因为它们为运动带来了真实感，使动画更加引人入胜且令人难忘。

然而，任何尝试过SVG动画制作的人都了解其中涉及的技术障碍。传统上，创建令人信服的弹性或弹跳效果需要处理复杂的CSS关键帧或与JavaScript动画库搏斗。即使使用SVG动画编辑器，也很可能需要手动添加关键帧并调整它们之间的缓动函数，无论经验水平如何，这都可能变成耗时的试错过程。

这就是Expressive Animator的闪光点所在。它允许创作者在几秒钟内应用弹性和弹跳效果，绕过了手动关键帧编辑的繁琐工作。结果总是出类拔萃：充满生机的动画，只需付出少量努力即可制作完成。

使用Expressive Animator创建弹性效果

在Expressive Animator中创建弹性效果非常简单、快速且直观，因为该效果作为缓动函数直接内置在软件中。这意味着您只需要两个关键帧（开始和结束）就能制作效果，软件会自动处理中间的弹性运动。更好的是，弹性缓动可以应用于任何可设置动画的属性（例如位置、缩放、旋转、不透明度、变形等），为您提供一致的方式来将其添加到动画中。

首先设置场景。为此，我们将通过按Ctrl/Cmd + P创建一个新项目，并在弹出的"创建新项目"对话框中进行配置。对于帧尺寸，我们选择1080×1080，持续时间为00:01:30，并让帧速率保持不变的每秒60帧。

点击"创建项目"按钮后，您可以使用钢笔和椭圆工具创建要设置动画的艺术作品，或者直接复制并粘贴下面的艺术作品。

现在一切设置完毕，让我们创建动画。确保启用吸附和自动录制，然后将播放头移动到01:00f。通过启用吸附，您将能够在画布上完美对齐节点和图形对象。另一方面，顾名思义，自动录制会跟踪您对艺术作品所做的每项更改，并在时间轴上添加适当的关键帧。

按键盘上的A键切换到节点工具，然后选择字符串对象并将其手柄移动到画板的中心右侧点。不用担心精度问题，因为吸附会为您完成所有繁重工作。这将弯曲形状并为变形动画器添加关键帧。

接下来，按键盘上的V键切换到选择工具。启用此工具后，选择球体，将其向右移动，并放置在字符串的中间。再次，吸附将完成所有艰苦工作，让您能够将球体精确放置在所需位置，同时自动录制会自动添加适当的关键帧。

您现在可以重新播放动画，并通过再次单击自动录制按钮来禁用自动录制。

重新播放时可以看到，字符串和球体对象的移动方向是错误的。幸运的是，我们可以非常轻松地通过反转关键帧来修复此问题。为此，选择时间轴中的关键帧，右键单击打开上下文菜单并选择"反转"。这将反转关键帧，如果您重新播放动画，会看到方向现在正确了。

完成这些后，我们终于可以添加弹性效果了。选择时间轴中的所有关键帧，然后单击自定义缓动按钮打开带有缓动选项的对话框。从对话框中选择"弹性"，将振荡设置为4，刚度设置为2.5。

就这样！单击缓动对话框外的任意位置关闭它，然后重新播放动画以查看结果。

动画也可以导出。按Cmd/Ctrl + E打开导出对话框，并从各种导出选项中选择，范围从矢量化格式（如SVG和Lottie）到栅格化格式（如GIF和视频）。

对于这个特定的动画，我们将选择SVG导出格式。Expressive Animator允许您根据用于动画的技术在三种不同类型的SVG之间进行选择：SMIL、CSS或JavaScript。

这些技术各有不同的优缺点，但在本教程中，我们将选择SMIL。这是因为基于SMIL的动画得到广泛支持，即使在Safari浏览器上也是如此，并且可以用作背景图像或使用<img>标签嵌入HTML页面。

Expressive Animator的弹跳和其他效果

为动画添加弹跳效果与我们刚刚介绍的创建弹性效果的过程非常相似，因为两者都作为缓动函数内置在Expressive Animator中。就像弹性效果一样，弹跳缓动可以应用于任何可设置动画的属性，为您提供创建逼真运动的快速方法。

除了这两种效果外，Expressive Animator还提供其他可以塑造动画个性的缓动选项，如Back、Steps、Sinc等。

结论

弹性和弹跳效果长期以来一直是动态设计中最受欢迎但最耗时的技术之一。通过将它们直接集成到其缓动函数中，Expressive Animator消除了手动关键帧操作的复杂性，并将曾经的技术挑战转化为创意机会。

最棒的是，开始使用Expressive Animator没有任何风险。该软件提供完整的7天免费试用，无需账户，因此您可以立即下载并开始试验自己的设计。试用期结束后，您可以通过一次性付款购买Expressive Animator，无需订阅。这将为您提供涵盖Windows和macOS的永久许可证。

为了帮助您更快入门，我为您准备了一些额外资源。您将找到本教程中创建的动画的源文件，以及精选的有用链接列表，这些链接将指导您进一步探索Expressive Animator和SVG动画。这些材料旨在为您提供坚实的起点，以便您可以自信地学习、试验和自行构建。