zoomIn.js 1.5 KB

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