[name]

Overview(概述)

在three.js动画系统中，您可以为模型的各种属性设置动画： [page：SkinnedMesh 蒙皮和装配模型]的骨头，[page：Geometry.morphTargets 变形目标]，不同的材料属性（颜色，不透明度，布尔运算），可见性和变换。动画属性可以淡入，淡出，交叉淡化和扭曲。不同时间的重量和时间尺度可以更改同一对象以及不同对象上的动画独立。可以在相同和不同对象上进行各种动画同步。

在一个同构系统中实现所有这一切，即three.js动画系统 [link：https：//github.com/mrdoob/three.js/issues/6881在2015年彻底改变] （注意过时的信息！），它现在有一个与Unity /虚幻引擎4类似的架构.此页面简要概述了主要组件系统以及它们如何协同工作。

Animation Clips(动画片段)

如果您已成功导入动画3D对象（如果有，则无关紧要）骨骼或变形目标或两者） - 例如使用[link：https：//github.com/KhronosGroup/glTF-Blender-Exporter glTF Blender导出器]从Blender导出它使用[page：GLTFLoader]将其加载到three.js场景中 - 其中一个响应字段应该是一个名为“animations”的数组，其中包含此模型的[page：AnimationClip AnimationClips]（请参阅下面的可能加载器列表）。

每个* AnimationClip *通常保存对象的某个活动的数据。如果 mesh是一个字符，例如，可以有一个用于walkcycle的动画片段，第二个跳跃，三分之一的回避等等。

Keyframe Tracks(关键帧轨道)

在这样的* AnimationClip *里面，每个动画属性的数据都存储在一个单独[page：KeyframeTrack]。假设一个角色对象有一个[page：Skeleton skeleton]，一个关键帧轨道可以存储下臂骨骼位置变化的数据随着时间的推移，不同的轨道数据为同一骨骼的旋转变化，三分之一轨道位置，旋转或缩放另一个骨骼，等等。应该很清楚， AnimationClip可以由许多这样的轨道组成。 .

假设模型具有[page：Geometry.morphTargets 变形目标]（例如一个变形目标显示一个友好的面孔，另一个显示愤怒的脸），每个轨道持有关于某个变形的[page：Mesh.morphTargetInfluences 影响]的信息目标在剪辑执行期间发生变化。

Animation Mixer(动画混音器)

存储的数据仅构成动画的基础 - 实际播放由控制 [page：AnimationMixer]。你可以想象这不仅仅是动画的播放器，而是作为硬件的模拟，如真正的调音台控制台，可以控制几个动画同时，混合和合并它们。

Animation Actions

* AnimationMixer *本身只有很少（通用）属性和方法，因为它可以通过[page：AnimationAction AnimationActions]来控制。通过配置 * AnimationAction *您可以确定何时播放某个* AnimationClip *，暂停或者停在其中一个混音器上，是否以及频率必须重复，无论是否应使用淡入淡出或时间缩放以及一些其他内容（例如交叉渐变）来执行或同步。

Animation Object Groups(动画对象组)

如果您希望一组对象接收共享动画状态，则可以使用[page:AnimationObjectGroup].

Supported Formats and Loaders(支持的格式和加载器)

请注意，并非所有模型格式都包含动画（尤其是OBJ，没有），而且只有一些 three.js加载器支持[page：AnimationClip AnimationClip]序列。以下几个确实支持此动画类型：

[page:JSONLoader THREE.JSONLoader]

[page:ObjectLoader THREE.ObjectLoader]

THREE.BVHLoader

THREE.ColladaLoader

THREE.FBXLoader

[page:GLTFLoader THREE.GLTFLoader]

THREE.MMDLoader

THREE.SEA3DLoader

请注意，3ds max和Maya当前无法导出多个动画（这意味着动画不是在同一时间线上）直接到一个文件。

Example
var mesh; // Create an AnimationMixer, and get the list of AnimationClip instances var mixer = new THREE.AnimationMixer( mesh ); var clips = mesh.animations; // Update the mixer on each frame function update () { mixer.update( deltaSeconds ); } // Play a specific animation var clip = THREE.AnimationClip.findByName( clips, 'dance' ); var action = mixer.clipAction( clip ); action.play(); // Play all animations clips.forEach( function ( clip ) { mixer.clipAction( clip ).play(); } );