zoomIn.js 1.6 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243
  1. "use strict";
  2. Object.defineProperty(exports, "__esModule", { value: true });
  3. exports.ZoomIn = void 0;
  4. const utils_1 = require("./utils");
  5. const ZoomIn = (options) => {
  6. // Small enough to hide or show very small part of mark,
  7. // but bigger enough to not cause bug.
  8. const ZERO = 0.0001;
  9. return (from, to, value, coordinate, defaults) => {
  10. const [shape] = from;
  11. const { transform: prefix = '', fillOpacity = 1, strokeOpacity = 1, opacity = 1, } = shape.style;
  12. const keyframes = [
  13. {
  14. transform: `${prefix} scale(${ZERO})`.trimStart(),
  15. fillOpacity: 0,
  16. strokeOpacity: 0,
  17. opacity: 0,
  18. },
  19. {
  20. transform: `${prefix} scale(${ZERO})`.trimStart(),
  21. fillOpacity,
  22. strokeOpacity,
  23. opacity,
  24. offset: 0.01,
  25. },
  26. {
  27. transform: `${prefix} scale(1)`.trimStart(),
  28. fillOpacity,
  29. strokeOpacity,
  30. opacity,
  31. },
  32. ];
  33. const { width, height } = shape.getBoundingClientRect();
  34. // Change transform origin for correct transform.
  35. shape.setOrigin([width / 2, height / 2]);
  36. const animation = shape.animate(keyframes, (0, utils_1.effectTiming)(defaults, value, options));
  37. // Reset transform origin to eliminate side effect for following animations.
  38. animation.finished.then(() => shape.setOrigin(0, 0));
  39. return animation;
  40. };
  41. };
  42. exports.ZoomIn = ZoomIn;
  43. //# sourceMappingURL=zoomIn.js.map