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

Charts for mobile visualization.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _interpolate = _interopRequireDefault(require("./interpolate"));
var Easing = _interopRequireWildcard(require("./easing"));
var _jsx = require("../../jsx");
var _util = require("@antv/util");
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
var Animator = /*#__PURE__*/function () {
  function Animator(element, animation) {
    (0, _classCallCheck2.default)(this, Animator);
    // 是否是裁剪动画
    this.isClip = false;
    this.end = false;
    this.element = element;
    this.animation = animation;
    var _animation$property = animation.property,
      property = _animation$property === void 0 ? [] : _animation$property,
      easing = animation.easing,
      duration = animation.duration,
      _animation$delay = animation.delay,
      delay = _animation$delay === void 0 ? 0 : _animation$delay,
      start = animation.start,
      end = animation.end,
      onFrame = animation.onFrame,
      isClip = animation.isClip;
    var interpolates = property.map(function (name) {
      if ((0, _util.isString)(name)) {
        return (0, _interpolate.default)(start[name], end[name]);
      }
      // @ts-ignore
      if (name.interpolate) {
        // @ts-ignore
        return name.interpolate(start, end);
      }
    });
    this.easing = typeof easing === 'function' ? easing : Easing[easing] || Easing.linear;
    this.property = property;
    this.interpolates = interpolates;
    this.duration = duration;
    this.delay = delay;
    this.onFrame = onFrame;
    this.totalDuration = duration + delay;
    this.isClip = isClip;
    // 更新到初始状态
    this.update(0, 0);
  }
  (0, _createClass2.default)(Animator, [{
    key: "to",
    value: function to(time) {
      var duration = this.duration,
        delay = this.delay,
        totalDuration = this.totalDuration,
        easing = this.easing,
        end = this.end;
      // 已结束
      if (end) {
        return;
      }
      // 未开始
      if (time <= delay || !duration) {
        return;
      }
      // 最大为1
      var t = time >= totalDuration ? 1 : (time - delay) / duration;
      this.update(easing(t), time);
      // 最后一帧
      if (t === 1) {
        this.onEnd();
      }
    }
  }, {
    key: "update",
    value: function update(t, time) {
      var element = this.element,
        interpolates = this.interpolates,
        property = this.property,
        onFrame = this.onFrame;
      var attrs = {};
      for (var i = property.length - 1; i >= 0; i--) {
        var name = property[i];
        if ((0, _util.isString)(name)) {
          attrs[name] = interpolates[i](t);
        } else {
          // @ts-ignore
          attrs[name.name] = interpolates[i](t);
        }
      }
      if (onFrame) {
        attrs = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, attrs), this.onFrame(t, time));
      }
      element.attr(attrs);
    }
  }, {
    key: "onEnd",
    value: function onEnd() {
      var animation = this.animation,
        isClip = this.isClip,
        element = this.element;
      var onEnd = animation.onEnd;
      onEnd && onEnd.call(this);
      if (isClip) {
        // 如果是裁剪区动画，要移除裁剪区
        element.remove(true);
      }
      // 如果当前元素状态被标记为删除，等动画结束后直接删除
      if (element._attrs.status === _jsx.ElementStatus.ELEMENT_DELETE) {
        element.remove(true);
      }
      // 清空 不需要重复执行
      element.set('animation', null);
      this.end = true;
    }
  }]);
  return Animator;
}();
var _default = Animator;
exports.default = _default;