入门教程
提升教程
常见问题
O2WebGLEditor时间轴动画制作详细教程
发布时间:2024-06-11 16:00:00 来源: 本站

一、时间轴动画

Web引擎的动画编辑工具。

image.png

 

1、模型动画绑定

image.png

 

将需要绑定动画的模型,在场景大纲中选中并拖动到视口下方的时间轴动画面板中,在弹出的动画属性控制面板选择需要控制的动画属性。

2、动画属性控制

image.png

 

位置控制:模型变换坐标的控制,可在场景中记录模型的移动、旋转、缩放动画。

显示隐藏:控制模型的可视性,可在适当的关键帧节点控制模型的显示/隐藏。

颜色:模型的漫反射贴图叠加颜色的控制,可在时间轴关键帧中记录模型颜色变化的效果。

透明度:对透明材质的模型进行透明度“Alpha”参数值的控制。

UV坐标:控制模型贴图的偏移/缩放/旋转。

自发光:控制模型自发光颜色和强度,可做灯光闪烁效果。

Lightmap强度:控制模型光照贴图倍增强度。

角色动作:控制骨骼动画模型动画

3、时间轴操作面板

时间轴动画功能包括场景运行时对动画权重的完全控制和调用,其功能分区为主菜单区和动画编辑区。

image.png

 

3.1 主菜单栏

image.png

 

• 创建新的动画

在打开的时间轴动画面板的左上角,点击“+”号可以创建一个新的动画剪辑。

• 修改动画名称

点击新建的动画剪辑名称(默认名称为“timeline”),在弹窗中输入新的名称。

• 切换动画

在时间轴名称旁下拉选择并编辑其他的时间轴动画。

• 播放动画

点击播放按钮,可预览当前动画。

• 动画循环模式

切换当前动画的默认循环模式。

• 动画时长

调整动画的播放时间长度。

• 缩放时间轴显示范围

放大/缩小当前工作区时间轴的显示范围。

• 记录关键帧

拖动时间轴位置,调整对象动画参数为其记录关键帧。

• 删除动画

删除当前选定动画。

• 自动播放

启用动画在场景中自动播放功能。当动画需要通过程序事件触发播放时,不要勾选。

• 随对象导出

将带动画的对象导出为“O2Web对象,可在其他场景中导入复用。

3.2 编辑动画

image.png

 

• 解除绑定

• 删除关键帧

• 编辑曲线