timingKeyframe.js 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384
  1. "use strict";
  2. Object.defineProperty(exports, "__esModule", { value: true });
  3. exports.TimingKeyframe = void 0;
  4. const util_1 = require("@antv/util");
  5. function range(direction, iterationCount, keyframeCount) {
  6. const start = 0;
  7. const end = keyframeCount;
  8. const normal = [start, end];
  9. const reverse = [-end + 1, -start + 1];
  10. if (direction === 'normal')
  11. return normal;
  12. if (direction === 'reverse')
  13. return reverse;
  14. if (direction === 'alternate') {
  15. return iterationCount % 2 === 0 ? normal : reverse;
  16. }
  17. if (direction === 'reverse-alternate') {
  18. return iterationCount % 2 === 0 ? reverse : normal;
  19. }
  20. }
  21. /**
  22. * Set animation options for all descendants.
  23. */
  24. function setAnimation(node, duration, easing) {
  25. const discovered = [node];
  26. while (discovered.length) {
  27. const n = discovered.pop();
  28. n.animate = (0, util_1.deepMix)({
  29. enter: {
  30. duration,
  31. },
  32. update: {
  33. duration,
  34. easing,
  35. type: 'morphing',
  36. fill: 'both',
  37. },
  38. exit: {
  39. type: 'fadeOut',
  40. duration,
  41. },
  42. }, n.animate || {});
  43. const { children } = n;
  44. if (Array.isArray(children))
  45. discovered.push(...children);
  46. }
  47. return node;
  48. }
  49. /**
  50. * @todo More options, such as fill, totalDuration...
  51. */
  52. const TimingKeyframe = () => {
  53. return (options) => {
  54. const { children = [], duration = 1000, iterationCount = 1, direction = 'normal', easing = 'ease-in-out-sine', } = options;
  55. const n = children.length;
  56. if (!Array.isArray(children) || n === 0)
  57. return [];
  58. const { key } = children[0];
  59. const newChildren = children
  60. .map((d) => (Object.assign(Object.assign({}, d), { key })))
  61. .map((d) => setAnimation(d, duration, easing));
  62. return function* () {
  63. let count = 0;
  64. let prevIndex;
  65. while (iterationCount === 'infinite' || count < iterationCount) {
  66. const [start, end] = range(direction, count, n);
  67. for (let i = start; i < end; i += 1) {
  68. // For reverse direction, the range is from negative to negative
  69. // so the absolute value of i is the real index for newChildren.
  70. const index = Math.abs(i);
  71. // This is for preventing alternate or reverse-alternate keyframe
  72. // to yield two same node one by one when the direction change.
  73. if (prevIndex !== index)
  74. yield newChildren[index];
  75. prevIndex = index;
  76. }
  77. count++;
  78. }
  79. };
  80. };
  81. };
  82. exports.TimingKeyframe = TimingKeyframe;
  83. exports.TimingKeyframe.props = {};
  84. //# sourceMappingURL=timingKeyframe.js.map