Verge3D 动画系统 — Soft8Soft
Description: Verge3D 动画系统概述。了解如何使用 JavaScript 为场景、对象、材质和其他实体制作动画。

# 动画系统

## 概述

在 Verge3D 动画系统中，您可以为模型的各种属性制作动画：[page:SkinnedMesh 蒙皮和绑定模型]的骨骼、变形目标、不同的材质属性（颜色、不透明度、布尔值）、可见性和变换。动画属性可以淡入、淡出、交叉淡化和扭曲。同一对象以及不同对象上的不同同时动画的权重和时间比例可以独立更改。同一对象和不同对象上的各种动画可以同步。

本页面简要介绍了系统的主要组件以及它们如何协同工作。

### Animation Clips | 动画片段

如果您已成功导入一个动画3D对象——例如，通过从 Blender、3ds Max 或 Maya 导出并使用 GLTFLoader 加载到 Verge3D 中——响应字段之一应该是一个名为"animations"的数组，包含该资产的 AnimationClips。

每个 AnimationClip 通常保存对象某个活动的数据。例如，如果网格是一个角色，可能有一个用于步行的 AnimationClip。如果网格是一个可配置对象，则会有一个用于渐进材质动画的片段。

Verge3D 不支持同一对象的同一类型的多个动画。例如，如果一个角色有步行、待机和跑步动画，所有这些都需要放在同一条时间轴上。

### Keyframe Tracks | 关键帧轨道

在这样的 AnimationClip 中，每个动画属性的数据存储在单独的 KeyframeTrack 中。假设一个角色对象有一个 [page:Skeleton 骨架]，一个关键帧轨道可以存储前臂骨骼随时间变化的位置数据，另一个轨道存储同一骨骼的旋转变化数据，第三个轨道存储另一骨骼的位置、旋转或缩放，依此类推。很明显，一个 AnimationClip 可以由许多这样的轨道组成。

假设模型有变形目标（例如一个变形目标显示友好的面部，另一个显示愤怒的面部），每个轨道保存有关某个变形目标的 [page:Mesh.morphTargetInfluences 影响] 在片段播放期间如何变化的信息。

### Animation Mixer | 动画混合器

存储的数据仅构成动画的基础——实际播放由 AnimationMixer 控制。您不仅可以将其想象为动画播放器，还可以想象为类似于真实混合控制台的硬件模拟，它可以同时控制多个动画，进行混合和合并。

### Animation Actions | 动画行为

AnimationMixer 本身只有很少的（通用）属性和方法，因为它可以通过 AnimationActions 来控制。通过配置 AnimationAction，您可以确定某个 AnimationClip 何时在一个混合器上播放、暂停或停止，是否以及多久重复一次片段，是否应使用淡入淡出或时间缩放来执行，以及一些其他功能，如交叉淡入淡出或同步。

## 示例

`const action = v3d.SceneUtils.getAnimationActionByName(app, "AnimatedObjectName"); if (action) { action.reset(); action.play(); }`

## Puzzles

Verge3D 实现了一些动画拼图，它们隐藏了动画系统的复杂性。这些拼图使用简单的"动画实体"概念，可以从列表中选择，也可以通过名称引用。通过添加可视化块，您可以在无需编码的情况下播放/暂停/停止/克隆/分割/挂钩这些实体。