Simulating realistic ball-bouncing physics using RxJS
Grab your physics textbook, and let’s bounce into the world of realistic ball physics with RxJS! We’re about to find out how to translate real-world physics principles into a reactive RxJS stream of events that simulates smooth ball movement in the UI.
How to do it…
In this recipe, we’re going to implement a reactive bouncing ball animation, ensuring that it runs 60 frames per second. We are striving to be as realistic as possible with the physics of a bouncing ball, applying gravity, falling velocity, and energy loss on each bounce.
Step 1 – Animating a ball falling
Isn’t it just annoying when you see janky animation on the web? In order to avoid that, and provide the best possible user experience, the first thing we’re going to do is to ensure that our animation runs at 60 fps. We can achieve this by using RxJS’s animationFrameScheduler, which will perform...
