Animating Objects

Build Reactive Websites with RxJS — by Randall Koutnik (66 / 74)

👈 Creating Your Own Operator | TOC | Calling next with Schedulers 👉

The term animation covers a whole host of topics, but this section is concerned just with the subcategory of animation that details ‘the process by which an object moves from point A to point B’. This type of animation is known as a ‘tween’ (since an object is moving between two points). The simplest possible tween consists of an element to move, the element’s current location as a start point, an end point, and the amount of time the animation will take. Modeled in RxJS, it looks something like this:

As always, there’s a catch. interval(1000 / 60) can only make a best effort attempt to emit at every interval — it provides no guarantee that it will emit an event exactly every 17 milliseconds. Every 17 milliseconds, RxJS asks the browser to execute a function. Many things could get in the way. If another function is currently being executed, our stream will be delayed. Browsers also throttle CPU usage of background tabs, so if the tab this is running in is not focused, the animation might get even further behind. Don’t take my word for it — run the following code to see just how far behind this interval can get. After you’ve done that, refresh the page, then switch over to another tab. Switch back after a while, and things get even weirder:

Related posts:

Learn Rails the way the Rails core team recommends it, along with the tens of thousands of developers who have used this broad, far-reaching tutorial and reference. If you're new to Rails, you'll get step-by-step guidance. If you're an experienced developer, get the comprehensive, insider information you need for the latest vers

Energy is the fundamental currency of the universe. This of course includes the ‘Pale Blue Dot’ that so graciously hosts humankind. In fact, the entire history of human civilization can be accurately…

For the first time in eight years, McDonald’s will release the McRib on a national scale. The sandwich has been cycled in and out of the restaurants for nearly four decades now. It’s gotten to the…