@yqg/aminofx-css-kit 1.0.8 → 1.0.10

package/README.md

@@ -5,6 +5,7 @@
 ## 🚀 功能特性
 
 - **CSS 动画渲染**: 基于纯 CSS 实现的高性能动画播放
+- **Lottie 动画支持**: 集成 lottie-web，支持 Lottie 动画叠加播放
 - **资源预加载**: 智能的图片预加载机制，避免动画卡顿
 - **多种加载方式**: 支持 JSON Schema 直接传入或通过 URL 动态加载
 - **动态数据替换**: 支持模板变量替换，实现数据驱动的动画
@@ -34,6 +35,26 @@ interface IJsonSchema {
 }
 ```
 
+### ILottieConfig
+
+Lottie 动画配置接口，定义 Lottie 动画的播放参数。
+
+```typescript
+interface ILottieConfig {
+  /** Lottie 动画 JSON 文件 URL */
+  url: string;
+  
+  /** Lottie 容器的 DOM id */
+  containerId: string;
+  
+  /** 延迟播放时间（毫秒） */
+  timeout: number;
+  
+  /** 播放完成后是否清空容器内容，默认 true */
+  removeOnComplete?: boolean;
+}
+```
+
 ### IPlayerOptions
 
 播放器配置接口，定义创建播放器时的所有可选参数。
@@ -57,6 +78,9 @@ interface IPlayerOptions {
 
   /** 动态数据，用于替换模板变量 */
   dynamicData?: Record<string, string | number | boolean>;
+
+  /** Lottie 动画配置 */
+  lottie?: ILottieConfig;
 }
 ```
 
@@ -201,6 +225,41 @@ const player = createCssAnimationPlayer('demo-container', {
 player.play();
 ```
 
+### Lottie 动画叠加示例
+
+```html
+<!-- HTML 结构 -->
+<div id="demo-container"></div>
+<!-- Lottie 容器 -->
+<div id="lottie-container"></div>
+```
+
+```typescript
+// 基础配置示例
+const player = createCssAnimationPlayer('demo-container', {
+  jsonUrl: 'https://example.com/css-animation.json',
+  alignItems: 'flex-start',
+  lottie: {
+    url: 'https://example.com/lottie-animation.json',
+    containerId: 'lottie-container',  // 传入动效平台设置的lottie容器id，lottie尺寸默认375*812，位置、层级、展示区域等需在动效平台调整
+    timeout: 1000,                     // 延迟 1 秒后播放
+    removeOnComplete: true,            // 播放完成后清空容器（默认 true，可省略）
+  },
+});
+
+player.play();
+```
+
+**功能说明：**
+
+- Lottie 动画渲染在用户指定的容器中
+- 需要在 HTML 中预先创建 Lottie 容器元素
+- 通过 `containerId` 参数指定容器的 DOM id
+- `timeout` 参数控制延迟播放时间（毫秒）
+- `removeOnComplete` 控制播放完成后是否清空容器内容（默认 true）
+- Lottie 容器的样式（位置、尺寸、层级等）由用户自行控制
+- Lottie 动画与 CSS 动画独立播放，互不影响
+
 ## 🎪 高级用法
 
 ### 生命周期管理
@@ -413,6 +472,7 @@ const player = createCssAnimationPlayer('container', {
 4. **循环播放**：启用 `autoLoop` 时，确保提供了 `duration` 属性
 5. **内存管理**：使用完毕后务必调用 `destroy()` 方法清理资源
 6. **CORS**：通过 URL 加载的资源需要正确配置 CORS 策略
+7. **Lottie 依赖**：使用 Lottie 功能需要确保 `lottie-web` 已正确安装或通过 CDN 引入
 
 ## 🐛 常见问题
 
@@ -453,3 +513,60 @@ player.updateSchema({
 });
 player.play();
 ```
+
+### Q: Lottie 动画不显示？
+
+**A:** 检查以下几点：
+
+- 确认 `lottie-web` 库已正确加载（通过 npm 安装或 CDN 引入）
+- 检查 Lottie JSON 文件 URL 是否可访问
+- 确认 `containerId` 对应的容器元素已存在于 DOM 中
+- 检查容器元素的样式（display、visibility、尺寸等）
+- 查看浏览器控制台是否有 Lottie 加载错误
+- 确保 Lottie JSON 文件格式正确
+
+### Q: 如何调整 Lottie 动画的位置、大小和层级？
+
+**A:** Lottie 容器由用户自行创建和控制，可以通过 CSS 自由设置：
+
+```html
+<div id="lottie-container" style="
+  position: absolute;
+  left: 50px;
+  top: 100px;
+  width: 500px;
+  height: 600px;
+  z-index: 999;
+"></div>
+```
+
+或使用 CSS 类：
+
+```css
+#lottie-container {
+  position: absolute;
+  left: 50px;
+  top: 100px;
+  width: 500px;
+  height: 600px;
+  z-index: 999;
+}
+```
+
+### Q: 如何让 Lottie 动画播放完成后保留在页面上？
+
+**A:** 设置 `removeOnComplete: false`：
+
+```typescript
+const player = createCssAnimationPlayer('container', {
+  jsonUrl: 'https://example.com/css-animation.json',
+  lottie: {
+    url: 'https://example.com/lottie-animation.json',
+    containerId: 'lottie-container',
+    timeout: 1000,
+    removeOnComplete: false, // 播放完成后不清空容器
+  },
+});
+
+player.play();
+```

package/dist/esm/index.d.ts

@@ -11,6 +11,8 @@ declare class AnimationPlayer {
     private readyPromise;
     private loopTimerId;
     private slotObservers;
+    private lottieInstance;
+    private lottieTimerId;
     constructor(container: HTMLElement, options: IPlayerOptions);
     private init;
     private replacePlaceholders;
@@ -19,6 +21,10 @@ declare class AnimationPlayer {
     private performMove;
     private observeElementMount;
     private cleanupSlotObservers;
+    private initLottie;
+    private playLottie;
+    private removeLottieContent;
+    private cleanupLottie;
     private handleLoop;
     ready(): Promise<void>;
     play(): Promise<void>;

package/dist/esm/index.js

@@ -4,6 +4,8 @@ import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
 import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
 import _createClass from "@babel/runtime/helpers/esm/createClass";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import lottie from 'lottie-web/build/player/lottie_light';
+
 // 扩展全局 Window 接口
 
 var isBrowser = typeof window !== 'undefined';
@@ -102,7 +104,7 @@ var ResourceLoader = /*#__PURE__*/function () {
 _defineProperty(ResourceLoader, "imageCache", new Map());
 _defineProperty(ResourceLoader, "loadingQueue", new Map());
 var AnimationPlayer = /*#__PURE__*/function () {
-  // 保存 MutationObserver 实例，用于清理
+  // 保存 lottie 延迟播放定时器
 
   function AnimationPlayer(container, options) {
     _classCallCheck(this, AnimationPlayer);
@@ -113,6 +115,10 @@ var AnimationPlayer = /*#__PURE__*/function () {
     _defineProperty(this, "loopTimerId", null);
     // 保存定时器ID，用于清理
     _defineProperty(this, "slotObservers", []);
+    // 保存 MutationObserver 实例，用于清理
+    _defineProperty(this, "lottieInstance", null);
+    // 保存 lottie 实例
+    _defineProperty(this, "lottieTimerId", null);
     this.container = container;
     this.options = options;
     this.init();
@@ -292,11 +298,172 @@ var AnimationPlayer = /*#__PURE__*/function () {
       this.slotObservers = [];
       console.log('aminofx:  🧹 清理所有插槽观察器');
     }
+
+    /**
+     * 初始化 lottie 动画
+     */
+  }, {
+    key: "initLottie",
+    value: (function () {
+      var _initLottie = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3() {
+        var _this5 = this;
+        var _this$options$lottie, url, containerId, lottieContainer;
+        return _regeneratorRuntime().wrap(function _callee3$(_context3) {
+          while (1) switch (_context3.prev = _context3.next) {
+            case 0:
+              if (this.options.lottie) {
+                _context3.next = 2;
+                break;
+              }
+              return _context3.abrupt("return");
+            case 2:
+              _context3.prev = 2;
+              _this$options$lottie = this.options.lottie, url = _this$options$lottie.url, containerId = _this$options$lottie.containerId; // 获取用户指定的容器
+              lottieContainer = document.getElementById(containerId);
+              if (lottieContainer) {
+                _context3.next = 8;
+                break;
+              }
+              console.error("aminofx:  \u274C \u627E\u4E0D\u5230 Lottie \u5BB9\u5668\uFF0Cid: ".concat(containerId));
+              return _context3.abrupt("return");
+            case 8:
+              console.log("aminofx:  \uD83C\uDFAC \u5F00\u59CB\u52A0\u8F7D Lottie \u52A8\u753B: ".concat(url));
+              console.log("aminofx:  \uD83D\uDCE6 Lottie \u5BB9\u5668 ID: ".concat(containerId));
+
+              // 使用 lottie-web 加载动画
+              this.lottieInstance = lottie.loadAnimation({
+                container: lottieContainer,
+                renderer: 'svg',
+                loop: false,
+                autoplay: false,
+                // 不自动播放，等待延迟后手动播放
+                path: url
+              });
+
+              // 等待动画加载完成
+              _context3.next = 13;
+              return new Promise(function (resolve, reject) {
+                if (!_this5.lottieInstance) {
+                  reject(new Error('Lottie 实例创建失败'));
+                  return;
+                }
+                _this5.lottieInstance.addEventListener('DOMLoaded', function () {
+                  console.log('aminofx:  ✅ Lottie 动画加载完成');
+                  resolve();
+                });
+                _this5.lottieInstance.addEventListener('data_failed', function () {
+                  console.error('aminofx:  ❌ Lottie 动画加载失败');
+                  reject(new Error('Lottie 动画加载失败'));
+                });
+              });
+            case 13:
+              _context3.next = 18;
+              break;
+            case 15:
+              _context3.prev = 15;
+              _context3.t0 = _context3["catch"](2);
+              console.error('aminofx:  ❌ 初始化 Lottie 失败:', _context3.t0);
+            case 18:
+            case "end":
+              return _context3.stop();
+          }
+        }, _callee3, this, [[2, 15]]);
+      }));
+      function initLottie() {
+        return _initLottie.apply(this, arguments);
+      }
+      return initLottie;
+    }()
+    /**
+     * 播放 lottie 动画（支持延迟）
+     */
+    )
+  }, {
+    key: "playLottie",
+    value: function playLottie() {
+      var _this6 = this;
+      if (!this.options.lottie || !this.lottieInstance) {
+        return;
+      }
+      var _this$options$lottie2 = this.options.lottie,
+        timeout = _this$options$lottie2.timeout,
+        _this$options$lottie3 = _this$options$lottie2.removeOnComplete,
+        removeOnComplete = _this$options$lottie3 === void 0 ? true : _this$options$lottie3;
+
+      // 清理旧的延迟定时器
+      if (this.lottieTimerId !== null) {
+        clearTimeout(this.lottieTimerId);
+        this.lottieTimerId = null;
+      }
+
+      // 监听播放完成事件
+      if (removeOnComplete) {
+        this.lottieInstance.addEventListener('complete', function () {
+          console.log('aminofx:  ✅ Lottie 动画播放完成，正在清空内容...');
+          _this6.removeLottieContent();
+        });
+      }
+      if (timeout > 0) {
+        console.log("aminofx:  \u23F0 Lottie \u52A8\u753B\u5C06\u5728 ".concat(timeout, "ms \u540E\u64AD\u653E"));
+        this.lottieTimerId = window.setTimeout(function () {
+          var _this6$lottieInstance;
+          (_this6$lottieInstance = _this6.lottieInstance) === null || _this6$lottieInstance === void 0 || _this6$lottieInstance.play();
+          console.log('aminofx:  ▶️ Lottie 动画开始播放');
+          _this6.lottieTimerId = null;
+        }, timeout);
+      } else {
+        this.lottieInstance.play();
+        console.log('aminofx:  ▶️ Lottie 动画立即播放');
+      }
+    }
+
+    /**
+     * 移除 lottie 内容（播放完成后调用）
+     */
+  }, {
+    key: "removeLottieContent",
+    value: function removeLottieContent() {
+      if (!this.options.lottie) {
+        return;
+      }
+      var containerId = this.options.lottie.containerId;
+      var lottieContainer = document.getElementById(containerId);
+      if (!lottieContainer) {
+        return;
+      }
+      try {
+        lottieContainer.innerHTML = '';
+        console.log('aminofx:  🗑️ Lottie 内容已清空');
+      } catch (error) {
+        console.error('aminofx:  ❌ 清空 Lottie 内容失败:', error);
+      }
+    }
+
+    /**
+     * 清理 lottie 相关资源
+     */
+  }, {
+    key: "cleanupLottie",
+    value: function cleanupLottie() {
+      // 清理延迟定时器
+      if (this.lottieTimerId !== null) {
+        clearTimeout(this.lottieTimerId);
+        this.lottieTimerId = null;
+        console.log('aminofx:  🧹 清理 Lottie 延迟定时器');
+      }
+
+      // 销毁 lottie 实例
+      if (this.lottieInstance) {
+        this.lottieInstance.destroy();
+        this.lottieInstance = null;
+        console.log('aminofx:  🗑️ 销毁 Lottie 实例');
+      }
+    }
   }, {
     key: "handleLoop",
     value: function handleLoop() {
       var _this$options$jsonSch,
-        _this5 = this,
+        _this7 = this,
         _this$options$jsonSch2,
         _this$options$jsonSch3;
       if (!this.options.autoLoop || !Number((_this$options$jsonSch = this.options.jsonSchema) === null || _this$options$jsonSch === void 0 ? void 0 : _this$options$jsonSch.duration)) {
@@ -312,10 +479,10 @@ var AnimationPlayer = /*#__PURE__*/function () {
 
       // 后续根据使用情况看是否调整为监听css动画结束事件
       this.loopTimerId = window.setTimeout(function () {
-        _this5.container.style.display = 'none';
+        _this7.container.style.display = 'none';
         window.setTimeout(function () {
-          _this5.loopTimerId = null;
-          _this5.play();
+          _this7.loopTimerId = null;
+          _this7.play();
         }, 100);
       }, Number((_this$options$jsonSch2 = this.options.jsonSchema) === null || _this$options$jsonSch2 === void 0 ? void 0 : _this$options$jsonSch2.duration));
       console.log("aminofx:  \uD83D\uDD04 \u542F\u52A8\u5FAA\u73AF\u5B9A\u65F6\u5668\uFF0C\u65F6\u957F: ".concat((_this$options$jsonSch3 = this.options.jsonSchema) === null || _this$options$jsonSch3 === void 0 ? void 0 : _this$options$jsonSch3.duration, "ms"));
@@ -323,118 +490,125 @@ var AnimationPlayer = /*#__PURE__*/function () {
   }, {
     key: "ready",
     value: function () {
-      var _ready = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee5() {
-        var _this6 = this;
-        return _regeneratorRuntime().wrap(function _callee5$(_context5) {
-          while (1) switch (_context5.prev = _context5.next) {
+      var _ready = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee6() {
+        var _this8 = this;
+        return _regeneratorRuntime().wrap(function _callee6$(_context6) {
+          while (1) switch (_context6.prev = _context6.next) {
             case 0:
               if (!this.isReady) {
-                _context5.next = 3;
+                _context6.next = 3;
                 break;
               }
               console.log('aminofx:  ✅ 动画已准备就绪，直接返回');
-              return _context5.abrupt("return", Promise.resolve());
+              return _context6.abrupt("return", Promise.resolve());
             case 3:
               if (!this.readyPromise) {
-                _context5.next = 6;
+                _context6.next = 6;
                 break;
               }
               console.log('aminofx:  ⏳ 正在准备中，等待现有Promise...');
-              return _context5.abrupt("return", this.readyPromise);
+              return _context6.abrupt("return", this.readyPromise);
             case 6:
               this.readyPromise = new Promise( /*#__PURE__*/function () {
-                var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee4(resolve, reject) {
+                var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee5(resolve, reject) {
                   var jsonPromise, imgPromise;
-                  return _regeneratorRuntime().wrap(function _callee4$(_context4) {
-                    while (1) switch (_context4.prev = _context4.next) {
+                  return _regeneratorRuntime().wrap(function _callee5$(_context5) {
+                    while (1) switch (_context5.prev = _context5.next) {
                       case 0:
-                        _context4.prev = 0;
+                        _context5.prev = 0;
                         jsonPromise = new Promise( /*#__PURE__*/function () {
-                          var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3(resolve, reject) {
-                            var _this6$options;
-                            var _this6$options2, _this6$options$jsonSc, response, data;
-                            return _regeneratorRuntime().wrap(function _callee3$(_context3) {
-                              while (1) switch (_context3.prev = _context3.next) {
+                          var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee4(resolve, reject) {
+                            var _this8$options;
+                            var _this8$options2, _this8$options$jsonSc, response, data;
+                            return _regeneratorRuntime().wrap(function _callee4$(_context4) {
+                              while (1) switch (_context4.prev = _context4.next) {
                                 case 0:
-                                  if (!_this6.options.jsonSchema) {
-                                    _context3.next = 5;
+                                  if (!_this8.options.jsonSchema) {
+                                    _context4.next = 5;
                                     break;
                                   }
-                                  _this6.container.innerHTML = _this6.replacePlaceholders(_this6.options.jsonSchema.content);
+                                  _this8.container.innerHTML = _this8.replacePlaceholders(_this8.options.jsonSchema.content);
                                   resolve();
-                                  _context3.next = 24;
+                                  _context4.next = 24;
                                   break;
                                 case 5:
-                                  if (!((_this6$options = _this6.options) !== null && _this6$options !== void 0 && _this6$options.jsonUrl)) {
-                                    _context3.next = 23;
+                                  if (!((_this8$options = _this8.options) !== null && _this8$options !== void 0 && _this8$options.jsonUrl)) {
+                                    _context4.next = 23;
                                     break;
                                   }
-                                  _context3.prev = 6;
-                                  _context3.next = 9;
-                                  return fetch((_this6$options2 = _this6.options) === null || _this6$options2 === void 0 ? void 0 : _this6$options2.jsonUrl);
+                                  _context4.prev = 6;
+                                  _context4.next = 9;
+                                  return fetch((_this8$options2 = _this8.options) === null || _this8$options2 === void 0 ? void 0 : _this8$options2.jsonUrl);
                                 case 9:
-                                  response = _context3.sent;
-                                  _context3.next = 12;
+                                  response = _context4.sent;
+                                  _context4.next = 12;
                                   return response.json();
                                 case 12:
-                                  data = _context3.sent;
-                                  _this6.options.jsonSchema = data;
-                                  _this6.container.innerHTML = _this6.replacePlaceholders(((_this6$options$jsonSc = _this6.options.jsonSchema) === null || _this6$options$jsonSc === void 0 ? void 0 : _this6$options$jsonSc.content) || '');
+                                  data = _context4.sent;
+                                  _this8.options.jsonSchema = data;
+                                  _this8.container.innerHTML = _this8.replacePlaceholders(((_this8$options$jsonSc = _this8.options.jsonSchema) === null || _this8$options$jsonSc === void 0 ? void 0 : _this8$options$jsonSc.content) || '');
                                   resolve();
-                                  _context3.next = 21;
+                                  _context4.next = 21;
                                   break;
                                 case 18:
-                                  _context3.prev = 18;
-                                  _context3.t0 = _context3["catch"](6);
-                                  reject(_context3.t0);
+                                  _context4.prev = 18;
+                                  _context4.t0 = _context4["catch"](6);
+                                  reject(_context4.t0);
                                 case 21:
-                                  _context3.next = 24;
+                                  _context4.next = 24;
                                   break;
                                 case 23:
                                   throw new Error('没有提供jsonSchema或jsonUrl');
                                 case 24:
                                 case "end":
-                                  return _context3.stop();
+                                  return _context4.stop();
                               }
-                            }, _callee3, null, [[6, 18]]);
+                            }, _callee4, null, [[6, 18]]);
                           }));
                           return function (_x4, _x5) {
                             return _ref2.apply(this, arguments);
                           };
                         }());
-                        imgPromise = ResourceLoader.loadImages(_this6.options.preloadImgList || []);
-                        _context4.next = 5;
+                        imgPromise = ResourceLoader.loadImages(_this8.options.preloadImgList || []);
+                        _context5.next = 5;
                         return Promise.all([jsonPromise, imgPromise]);
                       case 5:
-                        _this6.isReady = true; // 设置准备完成状态
+                        if (!_this8.options.lottie) {
+                          _context5.next = 8;
+                          break;
+                        }
+                        _context5.next = 8;
+                        return _this8.initLottie();
+                      case 8:
+                        _this8.isReady = true; // 设置准备完成状态
 
                         // 处理插槽列表（此时弹窗内容已渲染，slotId 存在）
-                        _this6.handleSlotList();
+                        _this8.handleSlotList();
                         resolve();
                         console.log('aminofx:  🎉 动画准备完成，可以开始播放');
-                        _context4.next = 15;
+                        _context5.next = 18;
                         break;
-                      case 11:
-                        _context4.prev = 11;
-                        _context4.t0 = _context4["catch"](0);
-                        reject(_context4.t0);
-                        console.error('aminofx:  ❌ 动画准备失败:', _context4.t0);
-                      case 15:
+                      case 14:
+                        _context5.prev = 14;
+                        _context5.t0 = _context5["catch"](0);
+                        reject(_context5.t0);
+                        console.error('aminofx:  ❌ 动画准备失败:', _context5.t0);
+                      case 18:
                       case "end":
-                        return _context4.stop();
+                        return _context5.stop();
                     }
-                  }, _callee4, null, [[0, 11]]);
+                  }, _callee5, null, [[0, 14]]);
                 }));
                 return function (_x2, _x3) {
                   return _ref.apply(this, arguments);
                 };
               }());
-              return _context5.abrupt("return", this.readyPromise);
+              return _context6.abrupt("return", this.readyPromise);
             case 8:
             case "end":
-              return _context5.stop();
+              return _context6.stop();
           }
-        }, _callee5, this);
+        }, _callee6, this);
       }));
       function ready() {
         return _ready.apply(this, arguments);
@@ -444,29 +618,32 @@ var AnimationPlayer = /*#__PURE__*/function () {
   }, {
     key: "play",
     value: function () {
-      var _play = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee6() {
-        return _regeneratorRuntime().wrap(function _callee6$(_context6) {
-          while (1) switch (_context6.prev = _context6.next) {
+      var _play = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee7() {
+        return _regeneratorRuntime().wrap(function _callee7$(_context7) {
+          while (1) switch (_context7.prev = _context7.next) {
             case 0:
               if (this.isReady) {
-                _context6.next = 4;
+                _context7.next = 4;
                 break;
               }
               console.warn('aminofx:  ⚠️ 动画尚未准备就绪，自动调用ready()...');
-              _context6.next = 4;
+              _context7.next = 4;
               return this.ready();
             case 4:
               this.container.style.display = 'flex';
 
+              // 播放 lottie 动画（如果配置了 lottie）
+              this.playLottie();
+
               // 只在循环未启动时才启动循环，防止重复调用
               if (this.options.autoLoop && this.loopTimerId === null) {
                 this.handleLoop();
               }
-            case 6:
+            case 7:
             case "end":
-              return _context6.stop();
+              return _context7.stop();
           }
-        }, _callee6, this);
+        }, _callee7, this);
       }));
       function play() {
         return _play.apply(this, arguments);
@@ -486,6 +663,9 @@ var AnimationPlayer = /*#__PURE__*/function () {
       // 清理插槽观察器
       this.cleanupSlotObservers();
 
+      // 清理 lottie 相关资源
+      this.cleanupLottie();
+
       // 重置状态
       this.container.innerHTML = '';
       this.isReady = false;

package/dist/esm/type.d.ts

@@ -2,6 +2,12 @@ type IJsonSchema = {
     duration: number;
     content: string;
 };
+interface ILottieConfig {
+    url: string;
+    containerId: string;
+    timeout: number;
+    removeOnComplete?: boolean;
+}
 interface IPlayerOptions {
     alignItems?: 'center' | 'flex-start' | 'flex-end';
     jsonSchema?: IJsonSchema;
@@ -20,5 +26,6 @@ interface IPlayerOptions {
         };
     }[];
     containerStyle?: Record<string, string>;
+    lottie?: ILottieConfig;
 }
-export type { IPlayerOptions, IJsonSchema };
+export type { IPlayerOptions, IJsonSchema, ILottieConfig };