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

"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;