Ease in Ease out animation and stop animation mid-way

Questions
1

I am using CreateAndStartAnimation() function to animate my camera. I cannot seem to figure out how to make it smooth; as in ease in and ease out. Can this be done in this function without creating keyframe arrays?
Also is there a way to stop the current animation if I move my camera with mouse click? An event to interrupt the animation?

https://playground.babylonjs.com/#C245A1#33

2

CreateAndStartAnimation() is an helper function used to run a basic animation, but if you want more control over the animation, you need to create an Animation object and start it with scene.beginAnimation which returns an Animatable object. This way you can then pause/stop/restart animation. You can also configure an easing function and associate it with your Animation object.

It’s all very well described here:
https://doc.babylonjs.com/babylon101/animations

List of build in easing functions:
https://doc.babylonjs.com/babylon101/animations#easing-functions

mouse pointer events:
https://doc.babylonjs.com/how_to/interactions#pointer-interactions

2 Likes
3

https://playground.babylonjs.com/#C245A1#40 (and way back to #34, too)

Wingnut goofing-around… trying to do @saifshk17’s request (click-interruptible cam anim).

I’m using easing function in CreateAndStart, and pointerDown event reffed by LeJohn.

All is working (hit any key to start anim, and pointer click stops it)… but… another/next keypress… STARTS the animation from where it was stopped (not wanted).

In other words, the animation is only PAUSED, or… I cannot yet fig a way to DESTROY the animation upon pointer-click and scene.stopAnimation(camera);

Line 25-28 - lots of demented experimenting. I was hoping animatable.reset() would destroy the animation… but it only does what it says… resets it to starting place (activate line 28 to see it happen).

Good painful fun, though. :slight_smile:

Others… feel free to play with this. Show us how to destroy the cam animation after pointer click. Right now, pointer-click seems to ONLY pause it (or similar).

2 Likes
4

Hi, I just wanted to add to the conversation. We are currently using BabylonJS CreateAndStart() animation method for our project. According to the documentation when you initialize the method it returns an Animatable Object. Further on using the stop() method on this Animatable object will pause/stop the animation and then destroy it

Code example taken from the playground mentioned by @Wingnut :
var animation = BABYLON.Animation.CreateAndStartAnimation(‘1’, camera, ‘position’, 15, 180, camera.position, new BABYLON.Vector3(20, 15, -20), 0, ease);
animation.stop()

Link to the Animatable documentation : Animatable - Babylon.js Documentation

Hope this helps.
Regards,
Taha

5

Thanks for this amazing solution! :slight_smile: