timeline.js 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137
  1. var _require = require('../util/requestAnimationFrame'),
  2. requestAnimationFrame = _require.requestAnimationFrame;
  3. var clock = typeof performance === 'object' && performance.now ? performance : Date;
  4. var Timeline =
  5. /*#__PURE__*/
  6. 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. requestAnimationFrame(step);
  21. self.update();
  22. }
  23. }
  24. requestAnimationFrame(step);
  25. };
  26. _proto.stop = function stop() {
  27. this.playing = false;
  28. this.time = null;
  29. this.canvas = [];
  30. };
  31. _proto.update = function update() {
  32. var currentTime = clock.now();
  33. this.canvas = [];
  34. for (var i = 0; i < this.anims.length; i++) {
  35. var propertyAnim = this.anims[i];
  36. if (currentTime < propertyAnim.startTime || propertyAnim.hasEnded) {
  37. continue;
  38. }
  39. var shape = propertyAnim.shape; // shape
  40. if (shape.get('destroyed')) {
  41. this.anims.splice(i, 1);
  42. i--;
  43. continue;
  44. }
  45. var startState = propertyAnim.startState,
  46. endState = propertyAnim.endState,
  47. interpolate = propertyAnim.interpolate,
  48. duration = propertyAnim.duration;
  49. if (currentTime >= propertyAnim.startTime && !propertyAnim.hasStarted) {
  50. propertyAnim.hasStarted = true;
  51. if (propertyAnim.onStart) {
  52. propertyAnim.onStart();
  53. }
  54. }
  55. var t = (currentTime - propertyAnim.startTime) / duration;
  56. t = Math.max(0, Math.min(t, 1));
  57. t = propertyAnim.easing(t);
  58. if (propertyAnim.onFrame) {
  59. propertyAnim.onFrame(t);
  60. } else {
  61. for (var key in interpolate) {
  62. var diff = interpolate[key];
  63. var value = diff(t);
  64. var newValue = void 0;
  65. if (key === 'points') {
  66. newValue = [];
  67. var aLen = Math.max(startState.points.length, endState.points.length);
  68. for (var j = 0; j < aLen; j += 2) {
  69. newValue.push({
  70. x: value[j],
  71. y: value[j + 1]
  72. });
  73. }
  74. } else {
  75. newValue = value;
  76. }
  77. shape._attrs.attrs[key] = newValue;
  78. shape._attrs.bbox = null; // should clear calculated bbox
  79. }
  80. }
  81. var canvas = shape.get('canvas');
  82. if (this.canvas.indexOf(canvas) === -1) {
  83. this.canvas.push(canvas);
  84. }
  85. if (propertyAnim.onUpdate) {
  86. propertyAnim.onUpdate(t);
  87. }
  88. if (currentTime >= propertyAnim.endTime && !propertyAnim.hasEnded) {
  89. propertyAnim.hasEnded = true;
  90. if (propertyAnim.onEnd) {
  91. propertyAnim.onEnd();
  92. }
  93. }
  94. if (t === 1) {
  95. // end
  96. this.anims.splice(i, 1);
  97. i--;
  98. }
  99. }
  100. this.canvas.map(function (c) {
  101. c.draw();
  102. return c;
  103. });
  104. this.time = clock.now();
  105. };
  106. return Timeline;
  107. }();
  108. module.exports = Timeline;