# 简单动画入门指引

本章节我们将使用一个简单的例子来说明使用动画的基本流程,并介绍动画系统中的几个基本概念

# 创建物体与动画片段

首先在 Hierarchy 面板中,右键->创建3D节点->Mesh->Cube,在场景中创建一个 Cube 节点,命名为Cube_1

在 Project 面板中,右键->新建->Animation->animiationclip,创建一个动画片段,命名为BoxMove

# 创建 Animation 组件并使用动画片段

现在我们有了动画片段与应用动画的物体,接下来需要配置让物体播放这个动画片段。在小游戏3D中,主要使用 Animation 组件来对物体播放的动画进行管理。

在Cube_1的 Inspector 面板中,添加组件->Animation->Animation,为物体添加一个 Animation 组件。结果如图,会自动创建一个 Animation 和Skeleton组件并相互绑定。Skeleton组件主要用于后续的骨骼动画,这里可以先忽略

然后在 Animation 组件的配置中,依次配置Clip、初始动作、autoPlay,这样在物体初始化时就能播放 BoxMove 这个动画

# 编辑动画片段

现在我们完成了物体与动画片段的关联,接下来需要开始编辑动画的内容了。

首先我们打开工具 Animation 面板,界面->新增标签->Animation->Animation。

然后 Hierarchy 面板中的Cube_1物体,就会看到 Animation 面板中出现了对应的动画片段 BoxMove 的信息,目前还是空的。

接下来我们开始编辑BoxMove

# 增加propertyKey

首先我们单击Add Property按钮,出现Cube_1物体上的组件及其属性,称之为property。 这里我们希望动画片段控制物体的位移和旋转,所以勾选上Transform3D.position和Transform3D.quaternion

# 录制property

单击 Preview 旁边的红点(录制按钮),这时候会发现 Inspector 中对应的属性变成了红色,即表明当前进入了录制模式。

将右边的时间轴拖到第120帧的位置,然后在场景中编辑物体的位移和旋转信息,就会自动在120帧的位置创建关键帧,如图所示

再按一下红点,结束录制模式。点一下红点旁边的播放按钮,可以在场景中预览刚刚编辑的动画。 预览没问题之后,Ctrl+S保存即可,然后播放场景即可预览

# 配置WrapMode

这时会发现,动画仅播放一次就停了。这时因为动画片段的默认配置是仅播放一次,如果我们编辑的动画是需要循环播放的,需要进行配置。 首先在 Project 面板中点击 BoxMove 动画片段,然后在 Inspector 选项卡中可以选择WrapMode(循环模式),这里我们选择PingPong,表示我们希望动画先正序播放,然后倒序播放,如此循环。

最终结果,物体如我们预期的播放了动画

如果想要了解更多关于动画片段的编辑功能和使用方法,请参考动画面板章节

# 使用代码控制动画

在实际游戏中,开发者可能会需要经常使用代码控制动画。在小游戏3D中,开发者的代码主要通过 Animation 组件来进行动画的控制和管理。

我们在Cube_1上添加一个自定义 Script 组件,命名为TestAnimation,并复制以下代码保存

import engine from "engine";
@engine.decorators.serialize("TestAnimation")
export default class TestAnimation extends engine.Script {
  @engine.decorators.property({
    type: engine.Animation
  })
  public animComp: engine.Animation;

  public onStart() {
    this.animComp.play("BoxMove",1000,engine.Animation.WrapMode.Loop);
  }
}

将 Hierarchy 中的Cube_1节店拖至 Inspector 中的 animComp 字段,完成属性的绑定。

运行游戏,就会发现动画以 Loop 模式播放,而不是以配置中的 PingPong 模式运行

如果想要了解更多 Animation 组件相关的内容,请参考Animation组件参考章节

# 使用动画事件

在游戏开发过程中,一个很常用的手段会为动画片段定义一些关键事件(Event),触发不同的自定义逻辑。小游戏3D提供了动画事件的能力。

打开动画面板进入到 BoxMove 的详情中,在如图的位置右键->Add Animation Event 然后点击这个生成的竖线,在 Inspector 中可以可以编辑事件的回调函数名称和参数

我们回到 TestAnimation.ts 脚本中,为组件添加以下方法

  public onAnimEvent(e: engine.Animation.AnimationEvent) {
    console.log('animationEvent',e.stringParameter, e.numberParameter);
    this.animComp.stop();
  }

保存运行场景,会发现动画停在了第80帧,在 DevTools 中能看到打印出的log