使用Spline全新时间线工具制作3D场景动画
Spline是一个出色的工具，可用于创建交互式3D场景，并且非常容易集成到网页中。要在此构建令人印象深刻的交互，您不需要了解3D或编码，这是Spline的主要优势。
时间线是什么
时间线是一个几乎与动画本身一样古老的工具。它用于各种动态设计和3D图形程序中。
原因是时间线是一种非常通用的动画方式。它仅基于两个主要部分：
- 对象（或者更准确地说，是其属性）
- 关键帧
通过关键帧，我们将对象属性的某个值（例如位置）附加到特定的时间点。
时间线 vs 状态
对于那些已经在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文档中找到适用于哪些平台的信息。
如果您想将其保存为视频，我推荐使用导出窗口中的视频选项卡。在这里，您可以选择时间线，视频的持续时间将与时间线的长度匹配（尽管如果需要，您可以使其更长）。如果您想创建无缝循环，这尤其有用。
尝试向时间线添加更多属性——尝试为旋转设置动画，甚至添加相机并为其位置设置动画。尝试不同的样式和颜色，您可能会发现一些意想不到的效果。
或者，您可以查看我的最终项目，探索我使用时间线设置了动画的其他对象和属性。
我很想看看您创作了什么——所以请随时分享您自己的结果！并记住：练习得越多，时间线（以及一般的动画）就会感觉越自然。