start-waapi-animation.mjs 1.3 KB

12345678910111213141516171819202122232425262728293031323334353637
  1. import { activeAnimations } from '../../stats/animation-count.mjs';
  2. import { statsBuffer } from '../../stats/buffer.mjs';
  3. import { mapEasingToNativeEasing } from './easing/map-easing.mjs';
  4. function startWaapiAnimation(element, valueName, keyframes, { delay = 0, duration = 300, repeat = 0, repeatType = "loop", ease = "easeInOut", times, } = {}, pseudoElement = undefined) {
  5. const keyframeOptions = {
  6. [valueName]: keyframes,
  7. };
  8. if (times)
  9. keyframeOptions.offset = times;
  10. const easing = mapEasingToNativeEasing(ease, duration);
  11. /**
  12. * If this is an easing array, apply to keyframes, not animation as a whole
  13. */
  14. if (Array.isArray(easing))
  15. keyframeOptions.easing = easing;
  16. if (statsBuffer.value) {
  17. activeAnimations.waapi++;
  18. }
  19. const animation = element.animate(keyframeOptions, {
  20. delay,
  21. duration,
  22. easing: !Array.isArray(easing) ? easing : "linear",
  23. fill: "both",
  24. iterations: repeat + 1,
  25. direction: repeatType === "reverse" ? "alternate" : "normal",
  26. pseudoElement,
  27. });
  28. if (statsBuffer.value) {
  29. animation.finished.finally(() => {
  30. activeAnimations.waapi--;
  31. });
  32. }
  33. return animation;
  34. }
  35. export { startWaapiAnimation };