three.js中的动画系统设计简介

要设计一个通用的可复用3d对象动画系统，需要把动画任务做一些结构分解。

主要是分为动画数据、动画连接器、动画混合器以及动画过渡曲线。

其中动画数据分为关键帧、动画轨道和动画片段，关键帧可以独立于动画对象属性而存在，这样便于复用，动画轨道对应于对象属性如位置或颜色，动画片段是一系列轨道的组合。

动画连接器用来连接动画数据和对象，这样数据就能作用在特定对象属性上，这里有一点是数据类型需要和属性匹配。

动画混合器用来管控动画任务，就像音乐混合器一样，如创建、播放、停止、切换动画动作。

剩下的动画曲线用来定义关键帧之间如何过渡，也可以定义动作之间如何融合。

在three.js中，

• 关键帧就是Keyframe,
• 动画轨道就是各种数据类型的KeyframeTrack
• 动画片段对应于AnimationClip
• 动画连接器对应于AnimationAction
• 动画混合器对应于AnimationMixer

顺便提下，理解动画任务的基本要素和结构后，

可以方便我们进一步设计可视化的动画编辑器和预览器。