@antv/f2/lib/canvas/animation/index.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 _timelime = _interopRequireDefault(require("./timelime"));
var _animator2 = _interopRequireDefault(require("./animator"));
var _jsx = require("../../jsx");
// 遍历全部节点
function eachElement(element, fn) {
  fn(element);
  var children = element.get('children');
  if (children && children.length) {
    for (var i = 0, len = children.length; i < len; i++) {
      var child = children[i];
      eachElement(child, fn);
    }
  }
}
var Animation = /*#__PURE__*/function () {
  function Animation(canvas) {
    (0, _classCallCheck2.default)(this, Animation);
    this.timeline = new _timelime.default();
    this.canvas = canvas;
  }
  (0, _createClass2.default)(Animation, [{
    key: "createAnimator",
    value: function createAnimator(element, animation) {
      var duration = animation.duration,
        property = animation.property,
        onFrame = animation.onFrame;
      // 校验关键参数
      if (!duration || (!property || !property.length) && !onFrame) {
        return;
      }
      return new _animator2.default(element, animation);
    }
  }, {
    key: "play",
    value: function play(container, onAnimationEnd) {
      var _this = this;
      var canvas = this.canvas;
      var animators = [];
      var maxDuration = 0;
      var deleteElements = [];
      // 遍历整个树，找到全部需要动画的元素
      eachElement(container, function (element) {
        // TODO: status 需要提取状态
        var _element$_attrs = element._attrs,
          animation = _element$_attrs.animation,
          status = _element$_attrs.status;
        if (!animation) {
          if (status === _jsx.ElementStatus.ELEMENT_DELETE) {
            // element.remove(true);
            deleteElements.push(element);
          }
          return;
        }
        var animator = _this.createAnimator(element, animation);
        if (animator) {
          maxDuration = Math.max(maxDuration, animator.totalDuration);
          animators.push(animator);
        }
        var clip = animation.clip;
        // 如果有裁剪区动画，处理裁剪区动画
        if (clip) {
          clip.isClip = true;
          var clipElement = clip.element;
          var _animator = _this.createAnimator(clipElement, clip);
          if (_animator) {
            maxDuration = Math.max(maxDuration, _animator.totalDuration);
            element.attr('clip', clipElement);
            animators.push(_animator);
          }
        }
      });
      for (var i = 0, len = deleteElements.length; i < len; i++) {
        var element = deleteElements[i];
        var children = element._attrs.children;
        // 因为group的子元素也有可能有动画，所以这里先把叶子节点删除掉，等动画结束后，再把所有删除的元素删除掉
        if (!children || !children.length) {
          element.remove(true);
        }
      }
      // 开始播放动画
      this.timeline.play(maxDuration, function (time) {
        for (var _i = 0, _len = animators.length; _i < _len; _i++) {
          var animator = animators[_i];
          animator.to(time);
        }
        // 最后一帧放在end里统一draw， 避免重复draw
        if (time < maxDuration) {
          canvas.draw();
        }
      }, function () {
        for (var _i2 = 0, _len2 = deleteElements.length; _i2 < _len2; _i2++) {
          var _element = deleteElements[_i2];
          _element.remove(true);
        }
        canvas.draw();
        onAnimationEnd && onAnimationEnd();
      });
    }
    // 直接跳到动画最终态
  }, {
    key: "end",
    value: function end() {
      this.timeline.end();
    }
  }, {
    key: "abort",
    value: function abort() {
      this.timeline.abort();
    }
  }]);
  return Animation;
}();
var _default = Animation;
exports.default = _default;