[SOLVED] How to add easing function to Babylon JS keyframe

How to add easing function to Babylon JS keyframe

Given I have a BabylonJS keyframe animation defined similar to as follows (ancillary code omitted for brevity):

 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: 60,
    value: box.position.x - 2,
   
});

animation.setKeys(keys);

How might I go about associating an easing function with each key?

Currently I'm able to define an easing function for the entire animation via the: animation.setEasingFunction(anEasingFunction) function. However I would like to define the easing function at the key level in order to enable the application of multiple easing functions over the course of the animation, as necessary. Is this possible and if not are there any workarounds that may yield comparable results?

Solution

So the issue has been resolved. Up until now, it simply wasn't possible to apply easing functions at the keyframe level; as mentioned prior, it was only possible to assign an easing function to the entire animation. So I reached out to the BabylonJS project maintainers and they graciously accommodated my request and proceeded to promptly raise and merge a PR to enable this functionality. As a result it is now possible to directly associate an easing function with a keyframe, by defining it as follows:

const keys = [];
keys.push({
 frame: 0,
 value: box.position.x,
 easingFunction: new BABYLON.ElasticEase(1)
});

It's a very powerful addition to the platform, in my opinion. Obviously replace the easing function with one appropriate to your specific use case.