使用Spline时间线工具制作3D动画场景
学习如何使用Spline的新时间线功能创建流畅、逼真的3D动画——从关键帧和曲线到为网页导出场景。
什么是时间线
时间线是一个几乎与动画本身一样古老的工具。它被用于各种动态设计和3D图形程序中。
原因是时间线是一种非常通用的动画方式。它仅基于两个主要部分：
- 一个对象（或者更准确地说，是它的属性）
- 一个关键帧
通过关键帧，我们将对象属性的某个值（例如位置）附加到特定的时间点。
最简单的例子是一个移动的对象。假设我们希望对象在1秒内从左向右移动。我们在起点放置第一个关键帧，对象位于左侧。然后在第一秒设置第二个关键帧，并将对象移动到B点。这样，对于第二个关键帧，我们说：“在这一刻，属性应该具有这个值。”
就是这样。关键帧被放置在结果应该发生的时刻。而关键帧之间发生的一切就是动画本身。
重要提示：要使用时间线为对象设置动画，您至少需要两个具有相同属性不同值的关键帧。
时间线 vs 状态
对于那些已经在Spline中为对象设置过动画的人来说，您知道动画通常是通过状态（和不同的事件作为触发器）制作的。起初，它可能看起来很相似：通过状态，您为对象设置不同的属性（例如位置），然后定义这些状态之间的时间间隔。
但时间线和状态之间的巨大区别在于：当动画在状态之间发生时，所有属性同时改变。因此，如果您的球体应该移动、改变大小和改变颜色，它将同时完成所有这些操作。没有办法让球体先开始移动，然后在动画中间改变大小，最后改变颜色。
这时时间线就派上用场了——因为使用时间线，所有这些属性都可以独立改变，以不同的速度，并且互不依赖。
时间线的第二个大优势是，当您需要在一个场景中为多个对象设置动画时，它更加方便。
Spline中的时间线
现在，让我们使用时间线在Spline中创建一个简单的动画，看看它是如何工作的。我们将制作一个经典的动画，通常用于学习动画基础——弹跳球。
最终，您应该得到一个看起来像这样的动画：
如果您仔细观察，它不仅仅是一个弹跳球——它每次碰到地板时都会变形。使用状态创建这样的动画会有问题且灵活性差很多。
为了节省时间，我准备了一个包含起始对象的Spline文件。只需点击此链接并复制此场景：Spline场景链接
步骤1：激活时间线
激活时间线模式。为此，切换顶部工具栏上的开关。一旦启用时间线，您将看到底部出现一个大面板。
重要的是要理解时间线是一种特殊模式。当它处于活动状态时，您所做的大部分更改都将保留在此模式内。因此，我的建议是：如果您想要对不应设置动画的对象或场景进行更改，请关闭时间线。例如，编辑对象的材质。
同时，时间线的一个大优势是您可以直接在视口中看到动画并在播放时进行更改。
步骤2：应用动画
选择我们的球对象，在底部的时间线面板中，查找按钮+动画。当您想要使用时间线为对象设置动画时，首先选择它，然后从列表中选择要设置动画的属性。几乎所有对象都有相同的可用属性集——位置、旋转、缩放、材质等。3D路径、相机和克隆器有一些额外的选项。
在我们的案例中，我们希望对象"上下弹跳"，因此我们将选择为位置设置动画。
步骤3：设置
让我们仔细看看时间线窗口及其构成。
在左侧，我们看到一个时间线列表¹——在这里，您可以使用同一场景创建多个动画版本。时间线可以创建、删除和重命名。
窗口的其余部分是实际的时间线。它具有：
- 时间标尺²
- 播放头³（用于快速在时间线上移动）
- 属性轨道⁴（在我们的案例中是位置）
- 属性列表⁵（这可以是一个对象的多个属性，或同时多个对象）
- 以及一些控件：
- 播放⁶（用于预览动画，与顶部工具栏中的播放按钮不同）
- S⁷ – 时间线长度（默认为5秒）
- 循环开关⁸（用于连续播放动画）
- 图形编辑器切换⁹（我们稍后会讨论）
此外，您可以管理时间线窗口的大小，使其变小或变大。
当我们为球添加位置动画时，我们得到一个蓝色的"条"。这个条的开头和结尾有关键帧。我们现在的目标是让球有三个位置：底部（在地板上）、顶部和再次底部。
这意味着我们将需要3个关键帧。
选择第一个关键帧，并确保位置字段中的所有值都设置为0。
将播放头移动到条的中间（标尺上的0.5秒）。此时，球应该在顶部。因此，我们需要告诉Spline它应该在哪里。您可以手动移动球，或者直接在位置字段中输入值0, 150, 0。一旦您更改属性，一个新的关键帧就会出现。
然后，选择最后一个关键帧，并确保所有值都设置为0。
点击所有3个关键帧，以确保所有值设置正确；有时您可能会忘记按回车键。
请记住，位置属性中的这三个输入字段是对象的X、Y和Z坐标。它们与您在右侧属性面板中看到的值匹配。现在，我们正在将对象移动到顶部（根据Y轴）。
如果您将时间线长度设置为1秒并打开循环，然后按播放（或只需按空格键），球将无停顿地弹跳。
步骤4：图形编辑器
一个只上下移动的球看起来并不像弹跳。我们需要增加真实感，这种真实感来自于球弹跳时在不同时刻以不同速度移动的事实。要控制这个速度，我们需要图形编辑器。
将时间线切换到图形编辑器模式，您将看到一个图表。
如果图表区域太小难以操作，您可以放大。如果您使用笔记本电脑，请尝试捏合手势，或使用cmd（Ctrl）+ 鼠标滚轮上下滚动。
这里没有什么复杂的。我们看到的是属性值随时间变化的简单图表。在我们的案例中，Y位置（绿色曲线）从开始到中间平滑移动，从中间到结束也平滑移动。这意味着我们的球平滑上升，然后在顶部缓慢停止，然后平滑加速下降，最后在底部缓慢停止。
但在现实生活中，当球碰到地面时，它会在撞击时突然减速，然后快速加速向上。我们需要通过调整曲线手柄（类似于使用钢笔工具绘制曲线）在图表上显示这一点。
此图表中的每个点代表一个关键帧，因此从技术上讲，您可以通过移动这些点和调整曲线来更精确地微调动画。
最终，曲线应该看起来像视频中的样子。
步骤5：最终调整
我们的球现在弹跳得更逼真了，但为了达到完美效果，它还应该在撞击时变形（压扁）。为此，我们需要向时间线添加另一个动画属性——缩放。
如果您仍处于此模式，请关闭图形编辑器。确保球被选中。按动画并选择缩放。
您将立即看到缩放值的新轨道。在第一个关键帧上，值为1, 1, 1。但由于我们的动画实际上从球已经弹离地面的时刻开始，此时它应该被压扁。因此，让我们将值设置为1, 0.7, 1。
现在球看起来被压扁了。让我们还确保在动画结束时，它恢复原状。因此，在第二个关键帧上，将缩放值设置回1, 1, 1。然后，将此关键帧移动到0.5秒。
就是这样，现在球在弹跳并在碰到地面时变形。尝试实验缩放属性的图表——更改它将向您展示动画如何看起来不同。
时间线的另一个优势是整体动画速度。例如，如果我们不喜欢球弹跳太快，我们想以慢动作显示它，我们可以简单地拉伸主动画条以增加（或减少）其持续时间。这样，所有关键帧都会沿时间线均匀缩放。
预览和导出
除了时间线中的播放按钮外，顶部工具栏中还有一个播放按钮用于预览整个场景。但如果您第一次点击它，什么也不会发生——那是因为您需要创建一个事件来触发时间线动画。
例如，当球对象被选中时，创建一个开始事件，并在操作列表中选择时间线动画。如果您希望动画不停播放，请不要忘记将循环参数设置为无限。
还有不同的方式可以导出此动画。
如果您想将动画集成到网站中，首先决定它应该如何开始：自动、悬停在球上还是点击。确保设置将触发时间线的事件。在我们的案例中，它设置为开始。之后，只需转到导出窗口并选择最适合您的集成方法。当您完成一些编辑时，不要忘记按"更新…“按钮。
☝️ 请记住，像Framer、Wix、Webflow等不同平台可能需要不同版本的嵌入代码。您可以在Spline文档中找到适用于哪些平台的信息。
如果您想将其保存为视频，我推荐使用导出窗口中的视频选项卡。在这里，您可以选择时间线，视频的持续时间将与时间线的长度匹配（尽管如果需要，您可以使其更长）。如果您想创建无缝循环，这尤其有用。
尝试向时间线添加更多属性——尝试动画旋转，甚至添加相机并动画其位置。尝试样式和颜色，您可能会发现一些意想不到的东西。
或者，您可以查看我的最终项目，探索我使用时间线动画了哪些其他对象和属性。
我很想看看您创作了什么——所以请随时分享您自己的结果！并记住：您练习得越多，时间线（和动画整体）就会感觉越自然。
如果您喜欢本教程并想深入了解Spline和Web3D基础，您可以查看我的Spline设计课程。作为一个小奖励，您可以使用促销代码"codrops"获得50%的折扣。