跳转至

3.3 动画系统

动画编辑概览

如下图所示,在IdeaVR下方点击“动画”,即可出现如下图所示的动画编辑器界面(红框标出)。

imageCover

在IdeaVR中,你可以为属性面板中的任何内容设置动画。例如节点转换,子画面,UI元素,粒子,材质的可见性和颜色等等。从下图可以看到我们的动画编辑器主要由四部分组成:

imageCover

  • 动画控件(控制栏):添加、加载、保存和删除动画
  • 轨道列表
  • 带有关键帧的时间轴
  • 时间轴和轨道控件,您可以在其中缩放时间轴和编辑轨道

创建一个AnimationPlayer节点

要使用动画编辑器工具,我们首先要创建一个AnimationPlayer节点,通过AnimationPlayer节点可以创建任何简单或复杂的动画效果。

AnimationPlayer节点可以理解为存放动画数据的容器。一个AnimationPlayer节点可以存放多组动画数据,这些动画可以相互转换。

imageCover

温馨提示

您也可以通过快速创建菜单栏,快速创建一个动画播放器节点。

计算机动画依赖于关键帧

要使得我们的节点能够具有动画功能,我们需要在动画轨道上为该节点的某些特定属性设置关键帧。即,关键帧定义了节点属性在某一时间点的值。

如下图所示,动画轨道中菱形代表时间轴中的关键帧。两个关键帧之间的线表示这两帧之间所对应节点属性的值未被更改。

imageCover

IdeaVR引擎会在关键帧之间插值,使得关键帧之间的数值随着时间逐渐变化。如下图的红色箭头所示。

imageCover

imageCover

小技巧

当编辑完动画之后,为了能够快速检验动画效果,您可以单击动画轨道上方的播放按钮,此外,您也可以使用快捷键Shift+D播放动画

AnimationPlayer节点属性

在概览了简易动画制作流程之后,我们首先浏览一下AnimationPlayer的常用节点属性。

imageCover

  • 动画播放器:
  • 根节点 :该AnimationPlayer节点所属根节点的名称,可以更改它当前的根节点为当前场景中的其他节点。
  • 当前动画 :该节点绑定的动画。
  • 编辑轨道 :该AnimationPlayer节点是否可以编辑动画。
  • 节点:一些公共节点属性
  • 多人协同:多人交互的通用节点属性。
  • 脚本:节点绑定的脚本属性。

范例:创建一个简单的三维动画

我们通过制作一个简单的三维动画来示范IdeaVR引擎的动画制作流程。

首先在一个默认场景中,我们创建AnimationPlayer节点以及一个方块节点(CSGBox)作为它的子节点,如下图所示的节点关系:

imageCover

本范例中,我们将分别展示该方块的平移动画、旋转动画以及缩放动画,最后会结合三者形成一个变换动画。

小技巧

将动画节点作为子节点添加到AnimationPlayer节点并非强制要求,但是这样做可以很好地区分该场景中的动画节点与非动画节点。

接下来选中AnimationPlayer节点,属性面板会自动跳转到动画设置面板。点击下图红框高亮的 动画 按钮。

imageCover

由于当前没有可用的动画轨道,因此我们可以点击 动画 打开选项框,在下图的选项框中选择第一个 新建

imageCover

选中之后,在跳出的命名窗口中输入你想要的动画名称,在这里我们输入"demo"作为我们新创建的动画名称。

imageCover

当前的动画轨道还是空的,我们需要新建一条动画轨道。单击上图绿色动画轨道框中的“添加轨道”按钮,可以看到如下几种动画选项:

imageCover

其中

  • 属性轨道 :可以选取指定节点的任何属性作为动画进行编辑
  • 3D变换轨道 :编辑指定节点三维变换属性动画
  • 方法调用轨道 :对于指定节点在关键帧调用指定的函数方法,如显隐等
  • 贝塞尔曲线轨道 :编辑贝塞尔控制点从而控制指定节点的运动轨迹
  • 音频播放轨道 :音频播放轨迹
  • 动画播放轨道 :动画播放轨迹

这里我们选取属性轨道,点击之后,我们选中CSGBox为编辑动画的节点。

imageCover

温馨提示

这里看上去选中“3D变换轨道”更加符合范例需要,但是“3D变换轨道”是对于三维的整个变换进行编辑,无法继续细分为平移、旋转、缩放,为了展示需要,我们选择“属性轨道”,并分别选取 平移、旋转、缩放 三种属性进行范例展示

平移动画

在选中CSGBox作为动画编辑的节点之后,在“选择属性”界面中选中“平移”属性

imageCover

可以得到下图所示的动画轨迹

imageCover

在本范例中,为了简单起见,我们只设置两个关键帧,制作过程以及最终的制作结果如下动图所示

imageCover

旋转动画

在动画编辑器界面中,选中添加轨道按钮,选择属性轨道,选中CSGBox之后,选择下图所示的“旋转度数”属性

imageCover

同样,可以得到下图所示的旋转动画轨道图(红色箭头指向):

imageCover

缩放动画

同上,我们创建一个新的属性轨道,并选择CSGBox缩放属性,得到下图红色箭头所指的缩放动画轨道:

imageCover

制作缩放动画的流程和效果如下动图所示:

imageCover

位移、旋转与缩放的合成动画

在分别制作了位移、旋转和缩放动画之后,我们将这三者结合,形成一个完整的三维变换动画。

首先,我们打开位移、旋转和缩放动画的开关,具体位置如下图红框所示:

imageCover

之后我们便可以按下动画播放按钮或者使用快捷键Shift+D播放,效果如下:

imageCover

动画编辑器设置介绍

相信你通过上面的三维动画实例制作,对于动画编辑器已经有了一定的了解。下面我们就深入动画编辑器,看一看它当中的常用设置细节。

调整动画时长

在下图中的红色框内,可以设置需要的动画时长。此外,最后的“循环”符号表示在动画播放时是否开启循环播放状态。

imageCover

跟踪设置

每个轨道的末尾都有一个设置面板(见下图)

imageCover

您可以在其中设置 更新模式轨道插值 以及 循环模式

轨道的 更新模式 (下图)告诉IdeaVR何时更新属性值。

imageCover

它可以是:

  • 连续:更新每个帧的属性值
  • 离散:仅更新关键帧上的属性值
  • 触发器:仅更新关键帧或触发器上的属性值
  • 捕获:将记住属性的当前值,它将与找到的第一个动画键混合

在正常动画中,通常使用"连续"。其他类型用于编写复杂动画的脚本。

轨道插值 告诉IdeaVR如何计算关键帧之间的帧值(下图)。

imageCover

它支持以下插值模式:

  • 临近:基于最近的关键帧值
  • 线性:基于两个关键帧之间的线性函数计算设置值
  • 三次方:基于两个关键帧之间的三次方函数计算设置值

三次方插值使得物体的运动更加自然,并且动画的速度在关键帧上较慢,在关键帧之间速度较快,三次方插值通常用于角色动画。线性插值更加适合机械运动(如机器人等)。

IdeaVR支持两种 循环模式 (见下图),如果动画设置为循环播放,则该属性会影响动画的播放行为。

imageCover

  • 切断循环插值器:选择此选项后,动画将在此轨道的最后一个关键帧之后停止。当再次到达第一个关键帧时,动画将重置为其值。
  • 环绕间隔:选择此项后,IdeaVR将计算最后一个关键帧之后的动画,以便再次到达第一个关键帧的值。

其他属性关键帧

IdeaVR不会限制您只编辑三维变换属性,每个属性都可以用作轨道,您可以在节点的属性面板中设置关键帧。

相机动画

通过上面的学习,相信你已经可以自己制作出一些令人耳目一新的动画效果了。下面我们要再介绍一种特殊的动画特效——相机动画。

在虚拟的三维世界中,“相机”是一个特殊的节点,它是我们在虚拟世界中的“眼睛”,没有“相机”节点,我们便无法从屏幕上看到我们想要看到虚拟场景,因此,相机和动画的结合便成为了一种特殊的动画特效。

首先,我们创建一个AnimationPlayer节点,将当前场景的相机节点作为该AnimationPlayer节点的子节点,如下图所示

imageCover

接下来,在动画编辑器中为相机设置旋转和平移,具体操作见如下动图:

imageCover

在如上动图中,我们分别为MainCamera节点设置了平移和旋转属性,在这些属性中,我们为平移设置了两个关键帧,为旋转设置了四个关键帧。

设置完之后,为了能够在运行场景之后直接看到我们的相机动画效果,不要忘记勾选下图中的“加载后自动播放选项”

imageCover

最后,我们运行当前场景,可以看到如下动图所示的相机动画效果:

imageCover

这样,就可以看到我们制作的最终相机特效了。