@antv/f-lottie/es/index.js

FEngine for Lottie

import { __extends } from "tslib";
import { Component, createRef, jsx } from '@antv/f-engine';
import { loadAnimation } from '@antv/g-lottie-player';
var Lottie = /** @class */function (_super) {
  __extends(Lottie, _super);
  function Lottie(props) {
    var _this = _super.call(this, props) || this;
    _this.addLottie = function () {
      var _a = _this,
        props = _a.props,
        context = _a.context;
      var data = props.data,
        options = props.options,
        play = props.play;
      var canvas = context.canvas;
      if (!data) return;
      // 文档流后挂载lottie
      canvas.ready.then(function () {
        _this.animation = _this.animation ? _this.animation : loadAnimation(data, options);
        _this.animation.render(_this.ref.current);
        _this.size = _this.animation.size();
        _this.updateSize();
        // 播放控制
        if (play) {
          var _a = play.speed,
            speed = _a === void 0 ? 1 : _a,
            _b = play.start,
            start = _b === void 0 ? 0 : _b,
            _c = play.end,
            end = _c === void 0 ? _this.animation.getDuration(true) : _c;
          _this.animation.setSpeed(speed);
          _this.animation.playSegments([start, end]);
        }
      });
    };
    _this.updateSize = function () {
      var _a = _this.size,
        currentWidth = _a.width,
        currentHeight = _a.height;
      var style = _this.props.style;
      if (!style) return;
      var _b = style.width,
        width = _b === void 0 ? currentWidth : _b,
        _c = style.height,
        height = _c === void 0 ? currentHeight : _c;
      _this.ref.current.scale(width / currentWidth, height / currentHeight);
      _this.size = {
        width: width,
        height: height
      };
    };
    _this.ref = createRef();
    return _this;
  }
  Lottie.prototype.didMount = function () {
    this.addLottie();
  };
  Lottie.prototype.willUpdate = function () {
    this.addLottie();
  };
  Lottie.prototype.render = function () {
    var _a = this.props,
      style = _a.style,
      animation = _a.animation;
    return jsx("group", {
      ref: this.ref,
      style: style,
      animation: animation
    });
  };
  return Lottie;
}(Component);
export default Lottie;