@antv/f-engine/lib/player.js

FEngine 是 AntV F 系列可视化引擎的底层渲染引擎，为移动端提供了一套完整的渲染、事件、动画能力，能方便的构建可视化 UI

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _tslib = require("tslib");
var _component = _interopRequireDefault(require("./component"));
var _timeline = _interopRequireDefault(require("./canvas/timeline"));
var _playerFrames = require("./playerFrames");
var _index = require("./canvas/render/index");
var _children = _interopRequireDefault(require("./children"));
var _util = require("@antv/util");
var _applyStyle = _interopRequireDefault(require("./canvas/render/applyStyle"));
function cloneNode(vnode) {
  return _children.default.map(vnode, function (child) {
    if (!child) {
      return;
    }
    var shape = child.shape,
      children = child.children,
      animator = child.animator;
    var _a = animator.end,
      end = _a === void 0 ? {} : _a;
    // 拿到上一帧的snapshot
    var snapshot = shape.cloneNode();
    (0, _applyStyle.default)(snapshot, end);
    return (0, _tslib.__assign)((0, _tslib.__assign)({}, child), {
      shape: snapshot,
      children: cloneNode(children)
    });
  });
}
var Player = /** @class */function (_super) {
  (0, _tslib.__extends)(Player, _super);
  function Player(props) {
    return _super.call(this, props) || this;
  }
  Player.prototype.didMount = function () {
    var _this = this;
    var _a = this.props,
      keyFrames = _a.keyFrames,
      children = _a.children,
      state = _a.state,
      onend = _a.onend,
      goTo = _a.goTo,
      speed = _a.speed;
    this.playerFrames = keyFrames.reduce(function (array, cur) {
      var frames = (0, _playerFrames.generateFrameElement)(cur, array[array.length - 1] || children);
      array.push(frames);
      return array;
    }, []);
    var array = this.playerFrames.map(function (cur, index) {
      var keyFrame = keyFrames[index];
      _this.preNode = cloneNode(_this.preNode || _this._vNode);
      var animUnits = (0, _index.getUpdateAnimation)(_this, cur, keyFrame) || {};
      return animUnits;
    });
    this.timeline = new _timeline.default({
      animUnits: array,
      playState: state,
      root: this.context.canvas,
      speed: speed,
      time: goTo
    });
    this.timeline.start();
    onend && this.timeline.on('end', onend);
  };
  Player.prototype.willReceiveProps = function (nextProps, _context) {
    var _a = this,
      lastProps = _a.props,
      timeline = _a.timeline;
    var state = nextProps.state,
      nextTime = nextProps.goTo,
      newSpeed = nextProps.speed;
    var lastTime = lastProps.goTo,
      lastSpeed = lastProps.speed;
    if (!(0, _util.isEqual)(state, timeline.getPlayState()) && timeline.getPlayState() === 'finish') {
      // 重播
      if (nextTime < timeline.totalDuration) {
        timeline.updateState(state);
        timeline.goTo(nextTime);
      }
      //保持结束播放状态
      return;
    }
    // state 更新
    if (!(0, _util.isEqual)(state, timeline.getPlayState())) {
      timeline.updateState(state);
    }
    if (!(0, _util.isEqual)(nextTime, lastTime)) {
      timeline.goTo(nextTime);
    }
    // 播放速度
    if (!(0, _util.isEqual)(newSpeed, lastSpeed)) {
      timeline.setPlaybackRate(newSpeed);
    }
  };
  /*外部ref调用方式 */
  Player.prototype.setPlayState = function (state) {
    var timeline = this.timeline;
    timeline.updateState(state);
  };
  Player.prototype.goTo = function (time) {
    var timeline = this.timeline;
    timeline.goTo(time);
  };
  Player.prototype.setPlaybackRate = function (speed) {
    var timeline = this.timeline;
    timeline.setPlaybackRate(speed);
  };
  Player.prototype.render = function () {
    return null;
  };
  return Player;
}(_component.default);
var _default = exports.default = Player;