Animation Progress and requestAnimationFrame
The Web Animation API doesn’t allow for keeping track of the progress in a clean way, so, we are forced to use
requestAnimationFrame to check the current progress of an animation, however, doing, so, can actually decrease framerates, so, I built a system to call
requestAnimationFrame less often.
@okikio/animate stores running
Animate instances in a Set stored in the
Animate class’s static RUNNING property. The RUNNING property only stores
Animate instances that have registered “update” event listeners.
When an Animate instance is played, it gets added to the
Animate.requestFrame() is then called and a single
requestAnimationFrame runs for all Animate instances in the
RUNNING set. If after a couple frames a Animate instance doesn’t have an attached “update” event listener it is automatically removed from the
Note: Animate instances that are finished are also auto-removed, and if there are no Animate instances in the
RUNNINGSet the requestAnimationFrame is stopped.
For you to better understand, check this out (this is meant for visiualization, avoid directly interacting with these API’s),
import ASTRO_ESCAPED_LEFT_CURLY_BRACKET Animate } from "@okikio/" Animate.RUNNING = new Set(); let instance = new Animate(ASTRO_ESCAPED_LEFT_CURLY_BRACKET /* .... */ }); instance.on("update", () => console.log("It works")); // If there are "update" event listener if (instance.emitter.getEvent("update").length > 0) ASTRO_ESCAPED_LEFT_CURLY_BRACKET Animate.RUNNING.add(instance); if (Animate.animationFrame == null) Animate.requestFrame(); }
If you add an “update” event listener to an Animate instance, the Animate instance is added to the RUNNING Set, and if a
requestAnimationFrame isn’t already running it will request a new one.
requestAnimationFrame is now throttled to match a maximum frame rate of 60 fps (frames per second). You can change the frame rate by setting
Animate.FRAME_RATE to your preferred frame rate.
Note: the frame rate affects
tweenAttr, as it uses the “update” event to animation attributes.
Animate.FRAME_RATE = 30; // 30 fps