timeline.js 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160
  1. "use strict";
  2. exports.__esModule = true;
  3. exports["default"] = void 0;
  4. var _requestAnimationFrame = require("../util/requestAnimationFrame");
  5. var clock = typeof performance === 'object' && performance.now ? performance : Date;
  6. var Timeline = /*#__PURE__*/function () {
  7. function Timeline() {
  8. this.anims = [];
  9. this.time = null;
  10. this.playing = false;
  11. this.canvas = [];
  12. }
  13. var _proto = Timeline.prototype;
  14. _proto.play = function play() {
  15. var self = this;
  16. self.time = clock.now();
  17. self.playing = true;
  18. function step() {
  19. if (self.playing) {
  20. (0, _requestAnimationFrame.requestAnimationFrame)(step);
  21. self.update();
  22. }
  23. }
  24. (0, _requestAnimationFrame.requestAnimationFrame)(step);
  25. };
  26. _proto.stop = function stop() {
  27. this.playing = false;
  28. this.time = null;
  29. this.canvas = [];
  30. };
  31. _proto.pushAnim = function pushAnim(animInfo) {
  32. // 先启动动画
  33. if (!this.playing) {
  34. this.play();
  35. }
  36. var delay = animInfo.delay,
  37. duration = animInfo.duration;
  38. var startTime = this.time + delay;
  39. var endTime = startTime + duration;
  40. animInfo.startTime = startTime;
  41. animInfo.endTime = endTime;
  42. this.anims.push(animInfo);
  43. };
  44. _proto.update = function update() {
  45. var currentTime = clock.now();
  46. this.canvas = [];
  47. if (!this.anims.length) {
  48. this.stop();
  49. return;
  50. }
  51. for (var i = 0; i < this.anims.length; i++) {
  52. var propertyAnim = this.anims[i];
  53. if (currentTime < propertyAnim.startTime || propertyAnim.hasEnded) {
  54. continue;
  55. }
  56. var shape = propertyAnim.shape; // shape
  57. if (shape.get('destroyed')) {
  58. this.anims.splice(i, 1);
  59. i--;
  60. continue;
  61. }
  62. var startState = propertyAnim.startState,
  63. endState = propertyAnim.endState,
  64. interpolate = propertyAnim.interpolate,
  65. duration = propertyAnim.duration;
  66. if (currentTime >= propertyAnim.startTime && !propertyAnim.hasStarted) {
  67. propertyAnim.hasStarted = true;
  68. if (propertyAnim.onStart) {
  69. propertyAnim.onStart();
  70. }
  71. }
  72. var t = (currentTime - propertyAnim.startTime) / duration;
  73. t = Math.max(0, Math.min(t, 1));
  74. t = propertyAnim.easing(t);
  75. if (propertyAnim.onFrame) {
  76. propertyAnim.onFrame(t);
  77. } else {
  78. for (var key in interpolate) {
  79. var diff = interpolate[key];
  80. var value = diff(t);
  81. var newValue = void 0;
  82. if (key === 'points') {
  83. newValue = [];
  84. var aLen = Math.max(startState.points.length, endState.points.length);
  85. for (var j = 0; j < aLen; j += 2) {
  86. newValue.push({
  87. x: value[j],
  88. y: value[j + 1]
  89. });
  90. }
  91. } else {
  92. newValue = value;
  93. }
  94. shape._attrs.attrs[key] = newValue;
  95. shape._attrs.bbox = null; // should clear calculated bbox
  96. }
  97. }
  98. var canvas = shape.get('canvas');
  99. if (this.canvas.indexOf(canvas) === -1) {
  100. this.canvas.push(canvas);
  101. }
  102. if (propertyAnim.onUpdate) {
  103. propertyAnim.onUpdate(t);
  104. }
  105. if (currentTime >= propertyAnim.endTime && !propertyAnim.hasEnded) {
  106. propertyAnim.hasEnded = true;
  107. if (propertyAnim.onEnd) {
  108. propertyAnim.onEnd();
  109. }
  110. }
  111. if (t === 1) {
  112. // end
  113. this.anims.splice(i, 1);
  114. i--;
  115. }
  116. }
  117. this.canvas.map(function (c) {
  118. c.draw();
  119. return c;
  120. });
  121. this.time = clock.now();
  122. };
  123. return Timeline;
  124. }();
  125. var _default = Timeline;
  126. exports["default"] = _default;