Skip to content

动画融合(Animation Blending)

在 Zephyr3D 中,动画系统支持所有类型动画的融合,包括关键帧动画与骨骼动画。
通过给动画分配不同的播放权重(weight),可以控制多段动画在同一时间内共同作用的比例。
当前正在播放的所有动画会根据各自权重,通过加权平均计算出最终的对象状态,实现自然流畅的动画过渡。


动画融合的原理

当多个动画同时作用于同一对象时,引擎会为每个动画分配一个权重值
并在更新阶段根据这些权重对其输出结果进行加权混合

$$ S_{final} = \frac{\sum_{i=1}^{n}(S_i \times w_i)}{\sum_{i=1}^{n}w_i} $$

其中:

  • $S_i$ 表示第 $i$ 个动画在当前时刻的状态(例如位置、旋转、缩放);
  • $w_i$ 表示该动画的权重;
  • 最终状态 $S_{final}$ 为所有动画加权平均后的结果。

通过这种方式,Zephyr3D 能够实现自然平滑的动画混合效果,
例如“走→跑”之间的过渡或角色上半身与下半身动作的独立融合。


权重融合示例

下面示例展示了如何同时播放三个动画,并以 3:7:5 的比例进行融合。

javascript
animationSet.playAnimation('animation-1', {
  weight: 3, // 动画1的权重
});

animationSet.playAnimation('animation-2', {
  weight: 7, // 动画2的权重
});

animationSet.playAnimation('animation-3', {
  weight: 5, // 动画3的权重
});

在此情况下,引擎会自动将三个动画的数值结果根据权重 3:7:5 进行线性加权。
权重越大,对最终动画的影响越强。

提示:

  • 没指定 weight 的动画默认权重为 1
  • 可随时调整 weight 值以实现动态混合效果。

动画衔接(Cross Fade)

动画衔接是利用权重平滑过渡实现的常用技术,
它可避免两个动画之间的突变(跳帧、卡顿),实现无缝切换。

示例

javascript
// 假设动画 A 当前正在播放,此时需要切换到动画 B

// 停止动画 A,设置淡出时间为 0.3 秒
animationSet.stopAnimation('A', {
  fadeOut: 0.3
});

// 播放动画 B,设置淡入时间为 0.3 秒
animationSet.playAnimation('B', {
  fadeIn: 0.3
});

在上述过程中:

  • 动画 A 的权重会在 0.3 秒内 从 1 平滑降至 0
  • 动画 B 的权重会在 0.3 秒内 从 0 平滑升至 1
  • 引擎在此期间对两个动画的输出进行权重混合,从而实现无缝动画切换

实用技巧

使用场景推荐方案
从“走路”过渡到“跑步”使用 stopAnimation("walk", { fadeOut: 0.4 })playAnimation("run", { fadeIn: 0.4 })
上半身动作(挥手、射击)叠加到下半身运动为不同骨骼组创建独立动画并设定不同权重
多状态 Idle 循环或呼吸动作控制多 clip 同时播放,通过动态调整 weight 实现细微变化
快速切换摄像机动画通过 fadeIn / fadeOut 避免镜头跳变

小结

  • Zephyr3D 支持 任意数量动画的权重混合
  • 权重值可定义动画对同一对象的影响比例;
  • 通过 fadeInfadeOut 实现自然流畅的动画过渡;
  • 可用于角色状态机切换、复合动作叠加等高级动画系统。

Released under the MIT License.