如何为 Babylon.js 动画的关键帧单独设置缓动函数-js教程-PHP中文网

如何为 Babylon.js 动画的关键帧单独设置缓动函数

Babylon.js 自 v6.30 起支持为每个关键帧独立指定缓动函数（如 ElasticEase、QuinticEase 等），突破了以往仅能对整段动画统一设置缓动的限制，实现更精细的运动控制。

babylon.js 自 v6.30 起支持为每个关键帧独立指定缓动函数（如 `elasticease`、`quinticease` 等），突破了以往仅能对整段动画统一设置缓动的限制，实现更精细的运动控制。

在 Babylon.js 早期版本中，开发者只能通过 animation.setEasingFunction() 为整个动画序列应用单一缓动效果，灵活性受限。例如，若希望前半段使用弹性缓动（ElasticEase），后半段切换为回弹缓动（BounceEase），传统方式无法直接实现。

得益于社区反馈与核心团队的快速响应，Babylon.js 已在 v6.30 版本中正式引入关键帧级缓动支持（PR #14497）。现在，你可在定义 keyframe 对象时，直接通过 easingFunction 属性为每个关键帧绑定专属缓动实例：

php版微信js-sdk支付接口类

下载

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,
    // 起始关键帧：无缓动（线性）
});

keys.push({
    frame: 30,
    value: box.position.x - 1,
    // 中间关键帧：使用弹性缓动（入）
    easingFunction: new BABYLON.ElasticEase(BABYLON.EasingFunction.EASINGMODE_EASEIN)
});

keys.push({
    frame: 60,
    value: box.position.x - 2,
    // 结束关键帧：使用弹跳缓动（出）
    easingFunction: new BABYLON.BounceEase(BABYLON.EasingFunction.EASINGMODE_EASEOUT)
});

animation.setKeys(keys);
scene.beginAnimation(box, 0, 60, true, 1.0, () => {
    console.log("Animation completed.");
});

✅ 注意事项与最佳实践：

缓动函数仅作用于当前关键帧到下一关键帧之间的插值区间（即 key[i] → key[i+1]），不影响其他区间；
若某关键帧未指定 easingFunction，则该区间将回退至动画全局缓动（若已设置）或默认线性插值；
所有内置缓动类（如 QuadraticEase, CubicEase, BackEase 等）均支持 EASINGMODE_EASEIN / EASEOUT / EASEINOUT 模式，需显式传入；
建议确保 Babylon.js 版本 ≥ 6.30（可通过 BABYLON.Engine.Version 验证），旧版本将忽略 easingFunction 字段；
自定义缓动函数（继承 BABYLON.EasingFunction）同样适用，只要实现 ease() 方法即可。

这一增强极大提升了动画表现力——你可轻松构建具有“启动加速 + 中段弹性 + 收尾弹跳”的复合运动曲线，无需拆分多个动画或手动插值计算。对于 UI 微交互、角色动作过渡或物理模拟等场景，是真正意义上的生产力升级。