@antv/f2/lib/canvas/animation/timelime.js

Charts for mobile visualization.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
var requestAnimationFrame = (typeof window === "undefined" ? "undefined" : (0, _typeof2.default)(window)) === 'object' && window.requestAnimationFrame ? window.requestAnimationFrame : function (fn) {
  return setTimeout(fn, 16);
};
var cancelAnimationFrame = (typeof window === "undefined" ? "undefined" : (0, _typeof2.default)(window)) === 'object' && window.cancelAnimationFrame ? window.cancelAnimationFrame : function (number) {
  return clearTimeout(number);
};
var clock = (typeof performance === "undefined" ? "undefined" : (0, _typeof2.default)(performance)) === 'object' && performance.now ? performance : Date;
var Timeline = /*#__PURE__*/function () {
  function Timeline() {
    (0, _classCallCheck2.default)(this, Timeline);
    this.playing = false;
    // 暂停中
    this.paused = false;
    // 暂停的时间点
    this.pausedTime = 0;
  }
  (0, _createClass2.default)(Timeline, [{
    key: "play",
    value: function play(duration, onUpdate, onEnd) {
      var _this = this;
      if (duration <= 0) {
        onEnd();
        return;
      }
      // 上次动画未结束
      if (this.playing) {
        return;
      }
      // 记录 duration、onUpdate、onEnd
      this.duration = duration;
      this.onUpdate = onUpdate;
      this.onEnd = onEnd;
      var paused = this.paused,
        pausedTime = this.pausedTime;
      this.playing = true;
      var startTime = clock.now();
      // 如果当前正在暂停状态， 从暂停态继续播放
      if (paused && pausedTime) {
        startTime = startTime - pausedTime;
        this.paused = false;
        this.pausedTime = 0;
      }
      var play = function play() {
        var now = clock.now();
        var time = now - startTime;
        if (time >= duration) {
          onUpdate(duration);
          onEnd();
          _this.playing = false;
          return;
        }
        if (_this.paused) {
          onUpdate(time);
          _this.pausedTime = time;
          _this.playing = false;
          return;
        }
        onUpdate(time);
        _this.animationFrameNumber = requestAnimationFrame(play);
      };
      this.animationFrameNumber = requestAnimationFrame(play);
    }
  }, {
    key: "pause",
    value: function pause() {
      this.paused = true;
    }
  }, {
    key: "stop",
    value: function stop() {
      this.playing = false;
    }
  }, {
    key: "end",
    value: function end() {
      if (!this.playing) {
        return;
      }
      // 停掉动画
      this.abort();
      // 更新到最后一帧状态
      this.onUpdate(this.duration);
      this.onEnd();
    }
  }, {
    key: "abort",
    value: function abort() {
      if (!this.animationFrameNumber) {
        return;
      }
      cancelAnimationFrame(this.animationFrameNumber);
      this.playing = false;
      this.animationFrameNumber = null;
    }
  }]);
  return Timeline;
}();
var _default = Timeline;
exports.default = _default;