Hi There,
I’m trying to get around the issue that the easing function is applied to every transition between keyframes. I have multiple keyframes to define a flythrough[1] and the result isn’t what I would like.
I really want to apply the easing function to the first transition (first key frame to second) and to the second-to-last keyframe to the last keyframe. Now I did this using multiple animations chained together
in a beginDirectAnimation call. Something like this https://www.babylonjs-playground.com/#8ZNVGR#96
As always, the big question is what am I doing wrong?
I would have thought that each animation is handled equally and that the key with the corresponding
frame would be used for the current frame.
[1]=https://urban-photogrammetry.org/berlin/modelviewer - press play button and it becomes obvious what I mean
In the meantime, I’ve solved it using the onAnimationEnd callback, see https://www.babylonjs-playground.com/#8ZNVGR#99
The problem with that solution (and why it’s not as elegant my imagined solution) is that it’s difficult
to stop the animation midway through. That is because calling currAnim.stop() will trigger the onAnimationEnd
callback, hence triggering the next animation.
So now I’ll need something like a flag to prevent any further animation from being created if the animation
was canceled. Pity that Animatable doesn’t have a wasStopped() flag … 
Unfortunately I can not think of another way to benefit from easing function between animations. Maybe there is another better trick, summoning the almighty @Deltakosh to the rescue 
Alright, got it done
I got it working with https://www.babylonjs-playground.com/#8ZNVGR#100
Basically the clue was doing
var ref = currAnim;
currAnim = null;
try { ref.stop() } catch (e) {}
i.e. assigning ref, nullifying currAnim and then stopping the animation (and using currAnim == null as the
flag).
Thanks for letting me rubber duck and thanks for a great piece of software
1 Like