动画片段

动画片段（API）是 Galacean 动画系统的核心元素之一，Galacean 支持导入外部设计软件设计的模型动画，设计师输出的带动画的模型中的每个动画在 Galacean 中会被解析成一个个的 动画片段 资产，我们也可以通过动画片段编辑器创作额外的动画。

有两种常用的方式得到 动画片段

1. 导入用第三方工具（例如 Autodesk® 3ds Max®， Autodesk® Maya®， Blender）创建的带动画的模型，详见美术制作动画片段

2. 在 Galacean 中创建 动画片段（下文会介绍编辑器和脚本这两种创建方式）

动画面板介绍

动画片段编辑器目前支持除物理相关组件的所有可插值属性的编辑，如果你需要编辑其他属性，要在实体上添加对应的组件。

使用介绍

1. 在 资产面板 中 右键或者点击 + 创建 动画片段 资产

2. 双击 动画片段 资产,并选择一个实体作为 动画片段 的编辑对象

点击 创建 按钮编辑器会自动为你的 实体 添加 动画控制组件（详细介绍）并将该 动画片段 添加到 动画控制器 中

3. 添加要做动画的属性(这里我添加了两个)

4. 给属性添加关键帧

当我们点击添加关键帧按钮时，关键帧会存入当前指定属性的值，所以当我们什么都未改变时，关键帧存入的是此刻这个实体的 position 值。我们希望他 60 帧后移动到 (3, 0, 0)的位置，所以先将这个正方体通过属性面板修改到(3, 0, 0) 再添加关键帧

同理我们也为 rotation 属性添加关键帧

录制模式

我们提供了录制模式以方便开发者快速的添加关键帧。开启录制模式，当对应的属性修改时就会自动添加关键帧

操作关键帧

修改关键帧时间

选中关键帧并拖动即可

可以滑动 鼠标滚轮 缩放时间轴

修改关键帧的值

开启录制模式，把时间线移动到指定关键帧上，然后重新输入值即可, 在不开启录制模式的情况，需要重新点击添加关键帧按钮。

删除关键帧

选中关键帧右键选择删除，也可以按键盘上的删除键/退格键删除

编辑子实体

动画片段 不仅可以作用于添加动画控制组件（详细介绍）的 实体 上，还可以作用于它的子实体 上。

1. 我们为刚才的立方体添加一个子实体

2. 我们再点击添加属性就可以看到子实体的属性可以添加了

3. 开启录制模式，编辑子实体添加关键帧即可

编辑动画曲线

动画片段编辑器 支持动画曲线编辑，点击右上角的曲线Icon即可切换

曲线模式的纵轴为属性的数值

你可以按 shift+鼠标滚轮 调整纵轴的比例

属性对应曲线的颜色与按钮的颜色相同

选择关键帧会出现两个控制点，调整控制点即可调整曲线

也可以通过右键关键帧直接设置内置的预设值

选择属性面板的属性可以仅编辑指定属性的曲线

更多示例

• 文字动画：除了 Transform 组件，Galacean 还支持编辑其他组件的动画，可以阅读文字动画文档来了解。
• 帧动画 ：除了数值类型，Galacean 还支持引用类型的 动画曲线， 可以阅读帧动画文档来了解。
• 材质动画 ：Galacean 还支持组件中的资产属性的动画编辑，可以阅读材质动画文档来了解。

脚本使用

在使用脚本之前，建议先阅读以下文档：

• 脚本
• 动画系统构成

你可以自己创建一个 动画片段（API）并通过 addCurveBinding 为它添加 动画曲线（API）。

//custom rotate clip
const rotateClip = new AnimationClip("rotate");
const rotateState =
  animator.animatorController.layers[0].stateMachine.addState("rotate");
rotateState.clip = rotateClip;
 
const rotateCurve = new AnimationVector3Curve();
const key1 = new Keyframe<Vector3>();
key1.time = 0;
key1.value = new Vector3(0, 0, 0);
const key2 = new Keyframe<Vector3>();
key2.time = 10;
key2.value = new Vector3(0, 360, 0);
rotateCurve.addKey(key1);
rotateCurve.addKey(key2);
rotateClip.addCurveBinding("", Transform, "rotation", rotateCurve);
 
//custom color clip
const colorClip = new AnimationClip("color");
const colorState =
  animator.animatorController.layers[0].stateMachine.addState("color");
colorState.clip = colorClip;
 
const colorCurve = new AnimationFloatCurve();
const key1 = new Keyframe<number>();
key1.time = 0;
key1.value = 0;
const key2 = new Keyframe<number>();
key2.time = 10;
key2.value = 1;
colorCurve.addKey(key1);
colorCurve.addKey(key2);
colorClip.addCurveBinding("/light", DirectLight, "color.r", colorCurve);

你同样可以为你的子实体 /light 添加 AnimationCurve ，就像上面的代码示例，同时 addCurveBinding 的第三个参数并不局限于组件的属性，它是一个能索引到值的路径。

动画事件

你可以使用 AnimationEvent  来为 AnimationClip 添加事件，动画事件将在指定时间调用你在同一实体上绑定组件的指定回调函数。

const event = new AnimationEvent();
event.functionName = "test";
event.time = 0.5;
clip.addEvent(event);