Quick and dirty animaton with async/await
Animation is a pain if you do not know how it is implemented. Basically, you are updating a value with respect to time. This is generally done by calculating the time elapsed since the last frame and interpolating this value between its initial and final values. The interpolation needn’t be linear, there are many such interpolating functions with for example some easing. Even there are methods that will consider previous and later values such as Catmull-Rom splines. In this article, I’ll not go into the details but just introduce a simple ‘hack’ if you will. This approach is influenced mainly from Unity coroutines with the yield keyword. Similarly,with the help of new ECMAscript features, namely async functions and await, we can define an animate function as such; const startValue = 0; // start valueconst endValue = 100; // end valueconst totalTime = 1000; // Aniation time in millisecondslet value = startValue;async function animate() { const lastTime = perf...