How to add easing function to Babylon JS keyframe

Questions
,
1

Hi Members,

I’m completely new to Babylonjs. I’m looking to use it on a new project where there is a requirement to apply easing functions to each keyframe of an animation, rather than the entire animation. You may view my query relating to this on StackOverflow here

In any event it looks as though there is no easy way to accomplish this and thus I began exploring other options, one of which was to break the full animation into several sub animations, which should then, theoretically enable me to apply easing functions to each sub animation. I then attempted to combine these sub animations into a single group for playback. The trouble is this does not work as expected; the AnimationGroup appears to add an addition 0 frame key with a value of 0. This is, of course, fine for the first animation but screws up subsequent animations as they will incorrectly contain a zero frame key too! As you’ll see in the playground, I’ve tried manually removing the added 0 key, post assignment to the animation group, but it seems to be automatically re-added. Here is the playground: https://playground.babylonjs.com/#YZ26ZJ#6 Based on the animation keys the cube should move up the y axis, back down and then up again, this is not happening.

2

Welcome to the community,

I think what you want is consecutive animations, not necessarily group them.

3

Thanks @sebavan great to be here!! BabylonJS is a very power tool and seemingly has a large and engaged community!!

I’ll look into your suggestion, is there an idiomatic way of combining multiple animations, upwards of 5 dynamically i.e. without statically defining functions and passing the resulting pointers to these functions to the scene.beginDirectAnimation function.

I did note that the beginDirectAnimation accepts an array of animations. Will these animations play in the sequence they appear in the provided array. If so this should sufficiently address the issue.

4

I do not think transitions will apply in between :frowning: Animation chaining using beginDirectAnimation maybe something to improve here. cc @Evgeni_Popov to have a look next when he ll be back after a more than deserved tiny break :slight_smile:

5

Ok @sebavan thank you very much indeed for the clarification and the link to a possible workaround. As this query now essentially falls into the realm of a feature request would you recommend that I mark the question as solved for now?

6

It is ok @giles lets see with @Evgeni_Popov when he ll be back how long it could take :slight_smile: if it is really simple we won t even need to track it.

7

Here’s a PR that adds an optional easingFunction property to IAnimationKey, which should let you do whatever you want:

4 Likes
8

Thank you so much @Evgeni_Popov and @sebavan; legends!!

Will this work in the playground? I’ve tried the following to add an ease to a keyframe but it seems to take no effect, had a quick look at the PR and assumed this would work. Am I missing something?

 const easingFunction1 = new BABYLON.BounceEase(3,0.1);
 easingFunction1.setEasingMode(BABYLON.EasingFunction.EASINGMODE_EASEINOUT);


    var keys = [];
    keys.push({
        frame: 0,
        value: 0,
    });
    keys.push({
        frame: 100,
        value: 2,
        easingFunction: easingFunction1,
    });

Here is a link to the specific test playground: https://playground.babylonjs.com/#7QN6ZM#8

1 Like
9

The playground is not updated yet, it will be tomorrow.

10

OK, no worries. Thanks.