
Babylon.js 从 v6.40 起正式支持为单个关键帧(keyframe)独立指定缓动函数,开发者可在 keys 数组中直接为每个键值对象添加 easingFunction 属性,从而实现动画段内差异化缓动效果。
babylon.js 从 v6.40 起正式支持为单个关键帧(keyframe)独立指定缓动函数,开发者可在 `keys` 数组中直接为每个键值对象添加 `easingfunction` 属性,从而实现动画段内差异化缓动效果。
在 Babylon.js 早期版本中,缓动函数只能通过 animation.setEasingFunction() 全局应用到整个动画序列,限制了复杂运动曲线的设计灵活性。例如,一段包含“起始弹性回弹→中间匀速→结尾缓入”的复合动画,此前需拆分为多个独立动画或借助外部插值逻辑模拟,开发成本高且难以维护。
得益于社区反馈与核心团队的快速响应,Babylon.js 在 v6.40 版本 中正式引入了关键帧级缓动支持(PR #14497)。现在,你只需在定义 keyframe 对象时,直接传入 easingFunction 实例即可:
const animation = new BABYLON.Animation(
"positionAnimation",
"position.x",
30,
BABYLON.Animation.ANIMATIONTYPE_FLOAT,
BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE
);
const keys = [];
// 起始段:弹性缓出(模拟弹簧释放)
keys.push({
frame: 0,
value: box.position.x,
easingFunction: new BABYLON.ElasticEase(1.0) // 振幅系数
});
// 中间段:线性过渡(无缓动)
keys.push({
frame: 30,
value: box.position.x - 1,
easingFunction: null // 或省略该属性,等效于 BABYLON.LinearEase()
});
// 结尾段:二次缓入(柔和停止)
keys.push({
frame: 60,
value: box.position.x - 2,
easingFunction: new BABYLON.QuadraticEase(BABYLON.EasePower.IN)
});
animation.setKeys(keys);
scene.beginAnimation(box, 0, 60, true);✅ 注意事项:
- 所有内置缓动类(如 QuadraticEase, CubicEase, BackEase, BounceEase 等)均支持,且可组合使用 IN / OUT / IN_OUT 模式;
- 若某 keyframe 未指定 easingFunction,则默认继承动画全局缓动(若已设置),否则退化为线性插值;
- 缓动函数仅影响当前 keyframe 到下一个 keyframe 之间的插值区间,即 [key[i].frame, key[i+1].frame];
- 使用自定义缓动函数时,需继承 BABYLON.EasingFunction 并实现 ease() 方法,确保返回值在 [0, 1] 区间内;
- 请确保 Babylon.js 版本 ≥ 6.40.0(推荐使用最新稳定版),可通过 BABYLON.Engine.Version 验证。
这一特性显著提升了动画表现力与开发效率,使精细控制角色位移、UI 动效、物理模拟过渡等场景成为可能。建议在复杂时间轴动画中优先采用关键帧级缓动,替代多动画拼接方案,以获得更简洁、可读性更强的代码结构。


















