@yqg/aminofx-css-kit 1.0.0 → 1.0.2

package/README.md

@@ -1,747 +1,453 @@
-# 动画播放器 SDK
+# AminoFX CSS Kit
 
-一个强大、灵活的Web动画播放器SDK，支持基于关键帧的复杂动画制作和播放。
+一个轻量级、高性能的 CSS 动画播放器 SDK，专为 Web 动画场景设计。
 
 ## 🚀 功能特性
 
-- **关键帧动画**: 基于时间轴的关键帧动画系统
-- **模板引擎**: 支持`{{variable}}`语法的动态内容渲染
-- **事件系统**: 完整的动画生命周期和元素交互事件支持
-- **CSS变换**: 支持位移、缩放、旋转、透明度等动画属性
-- **缓动函数**: 内置多种缓动函数，包括弹性和弹跳效果
-- **状态管理**: 完整的播放、暂停、停止、跳转控制
-- **自适应时长**: 根据关键帧自动计算动画时长
-- **类型安全**: 完整的TypeScript类型定义
+- **CSS 动画渲染**: 基于纯 CSS 实现的高性能动画播放
+- **资源预加载**: 智能的图片预加载机制，避免动画卡顿
+- **多种加载方式**: 支持 JSON Schema 直接传入或通过 URL 动态加载
+- **动态数据替换**: 支持模板变量替换，实现数据驱动的动画
+- **循环播放**: 内置自动循环播放功能
+- **灵活布局**: 支持多种垂直对齐方式
+- **生命周期管理**: 完整的初始化、播放、销毁流程
+- **类型安全**: 完整的 TypeScript 类型定义
 
 ## 📦 安装
 
 ```bash
-npm install @yqg-max/click-gate
+npm install aminofx-css-kit
 ```
 
 ## 🏗️ 核心接口
 
-### IAnimationElement
+### IJsonSchema
 
-动画元素配置接口，定义了动画中每个元素的基本信息和样式。
+JSON 数据格式接口，定义动画数据结构。
 
 ```typescript
-interface IAnimationElement {
-  /** 元素唯一标识符 */
-  id: string;
-  /** 元素关联的数据，用于模板渲染 */
-  data?: Record<string, any>;
-  /** 元素内容配置 */
-  content: {
-    /** HTML内容模板，支持 {{variable}} 语法 */
-    html?: string;
-    /** 自定义CSS样式 */
-    style?: Record<string, string | number>;
-  };
+interface IJsonSchema {
+  /** 动画总时长（毫秒） */
+  duration: number;
+  /** CSS 动画内容（包含样式和HTML结构） */
+  content: string;
 }
 ```
 
-### IPropertieCss
+### IPlayerOptions
 
-CSS属性接口，定义了动画中常用的CSS变换属性。
+播放器配置接口，定义创建播放器时的所有可选参数。
 
 ```typescript
-interface IPropertieCss {
-  /** X轴位置 (px) */
-  x: number;
-  /** Y轴位置 (px) */
-  y: number;
-  /** 宽度 (px) */
-  width: number;
-  /** 高度 (px) */
-  height: number;
-  /** 旋转角度 (deg) */
-  rotation: number;
-  /** 透明度 (0-1) */
-  opacity: number;
-  /** 缩放比例 */
-  scale: number;
-}
-```
+interface IPlayerOptions {
+  /** 弹窗垂直对齐方式 */
+  alignItems?: 'center' | 'flex-start' | 'flex-end';
 
-### IAnimationKeyframe
+  /** 直接传入 JSON Schema 数据 */
+  jsonSchema?: IJsonSchema;
 
-动画关键帧接口，定义了某个时间点上元素的属性状态。
+  /** 通过 URL 加载 JSON Schema（jsonSchema 优先级更高） */
+  jsonUrl?: string;
 
-```typescript
-interface IAnimationKeyframe {
-  /** 关键帧唯一标识符 */
-  id: string;
-  /** 关联的元素ID */
-  elementId: string;
-  /** 时间点 (毫秒) */
-  time: number;
-  /** 该时间点的CSS属性值 */
-  properties: Partial<IPropertieCss> & Record<string, any>;
-}
-```
-
-### IAnimationSchema
+  /** 需要预加载的图片列表 */
+  preloadImgList?: string[];
 
-动画配置模式接口，定义了完整的动画配置。
+  /** 是否自动循环播放 */
+  autoLoop?: boolean;
 
-```typescript
-interface IAnimationSchema {
-  /** 动画中的所有元素 */
-  elements: IAnimationElement[];
-  /** 动画中的所有关键帧 */
-  keyframes: IAnimationKeyframe[];
-  /** 全局数据，用于模板渲染 */
-  data?: Record<string, any>;
+  /** 动态数据，用于替换模板变量 */
+  dynamicData?: Record<string, string | number | boolean>;
 }
 ```
 
-### IAnimationInfo
-
-动画信息接口，提供动画的统计信息。
+## 🎨 核心类
 
-```typescript
-interface IAnimationInfo {
-  /** 总时长 (毫秒) */
-  totalDuration: number;
-  /** 最大关键帧时间 */
-  maxKeyframeTime: number;
-  /** 关键帧数量 */
-  keyframeCount: number;
-  /** 元素数量 */
-  elementCount: number;
-  /** 是否自动计算时长 */
-  isAutoCalculated: boolean;
-}
-```
+### AnimationPlayer
 
-## 🎭 类型定义
+动画播放器类，负责管理和控制动画的播放。
 
-### EasingFunction
+#### 方法列表
 
-动画缓动函数类型。
+| 方法                    | 描述                     | 参数                      | 返回值          |
+| ----------------------- | ------------------------ | ------------------------- | --------------- |
+| `play()`                | 开始播放动画             | -                         | `Promise<void>` |
+| `ready()`               | 等待资源加载完成         | -                         | `Promise<void>` |
+| `destroy()`             | 销毁播放器，清理资源     | -                         | `void`          |
+| `updateSchema(options)` | 更新动画配置并重新初始化 | `options: IPlayerOptions` | `void`          |
 
-```typescript
-type EasingFunction =
-  | 'linear' // 线性
-  | 'ease-in' // 缓慢开始
-  | 'ease-out' // 缓慢结束
-  | 'ease-in-out' // 缓慢开始和结束
-  | 'ease-in-cubic' // 三次方缓入
-  | 'ease-out-cubic' // 三次方缓出
-  | 'bounce-out' // 弹跳结束
-  | 'elastic-out'; // 弹性结束
-```
+## 🏭 工厂函数
 
-### AnimationState
+### createCssAnimationPlayer
 
-动画状态类型。
+创建 CSS 动画播放器的工厂函数。
 
 ```typescript
-type AnimationState = 'idle' | 'playing' | 'paused' | 'completed';
+function createCssAnimationPlayer(
+  containerId: string,
+  options: IPlayerOptions,
+): AnimationPlayer;
 ```
 
-### ElementEventCallback
+**参数说明：**
 
-事件监听器回调函数类型。
+- `containerId`: 容器元素的 ID
+- `options`: 播放器配置选项
 
-```typescript
-type ElementEventCallback = (event: Event, element: HTMLElement) => void;
-```
+**返回值：**
 
-## 🎨 核心类
+- `AnimationPlayer`: 动画播放器实例
 
-### AnimationPlayer
-
-动画播放器主类，负责管理和控制动画的播放。
-
-#### 构造函数
+## 🎯 快速开始
 
-```typescript
-constructor(container: HTMLElement, schema: IAnimationSchema)
+### 基础示例（使用 jsonUrl）
+
+```html
+<!doctype html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>AminoFX CSS Kit Demo</title>
+    <script src="https://unpkg.com/aminofx-css-kit/dist/umd/aminofx-css-kit.min.js"></script>
+  </head>
+  <body>
+    <div id="demo-container"></div>
+
+    <script>
+      const player = window.createCssAnimationPlayer('demo-container', {
+        jsonUrl: 'https://example.com/animation.json',
+        preloadImgList: [
+          'https://example.com/image1.png',
+          'https://example.com/image2.png',
+        ],
+        alignItems: 'flex-start',
+      });
+
+      player.play();
+    </script>
+  </body>
+</html>
 ```
 
-#### 播放控制方法
-
-| 方法                 | 描述                     | 参数                   | 返回值 |
-| -------------------- | ------------------------ | ---------------------- | ------ |
-| `play()`             | 开始播放动画             | -                      | `void` |
-| `pause()`            | 暂停动画                 | -                      | `void` |
-| `stop()`             | 停止动画并重置到初始状态 | -                      | `void` |
-| `seek(time: number)` | 跳转到指定时间           | `time`: 目标时间(毫秒) | `void` |
-
-#### 状态查询方法
-
-| 方法                 | 描述               | 返回值             |
-| -------------------- | ------------------ | ------------------ |
-| `getCurrentTime()`   | 获取当前播放时间   | `number`           |
-| `getDuration()`      | 获取动画总时长     | `number`           |
-| `getProgress()`      | 获取播放进度(0-1)  | `number`           |
-| `getState()`         | 获取当前状态       | `AnimationState`   |
-| `isPlaying()`        | 检查是否正在播放   | `boolean`          |
-| `getSchema()`        | 获取动画配置的副本 | `IAnimationSchema` |
-| `getAnimationInfo()` | 获取动画统计信息   | `IAnimationInfo`   |
-
-#### 数据更新方法
-
-| 方法                      | 描述         | 参数                    |
-| ------------------------- | ------------ | ----------------------- |
-| `updateData(newData)`     | 更新动画数据 | `newData`: 新数据对象   |
-| `updateSchema(newSchema)` | 更新动画配置 | `newSchema`: 新配置对象 |
-
-#### 事件监听方法
-
-| 方法                                       | 描述         | 参数                                        |
-| ------------------------------------------ | ------------ | ------------------------------------------- |
-| `onTimeChange(callback)`                   | 监听时间变化 | `callback`: (time: number) => void          |
-| `onAnimationComplete(callback)`            | 监听动画完成 | `callback`: () => void                      |
-| `onStateChange(callback)`                  | 监听状态变化 | `callback`: (state: AnimationState) => void |
-| `onListen(elementId, eventType, callback)` | 监听元素事件 | 详见下表                                    |
-
-##### onListen 参数详情
+### 使用 jsonSchema 直接传入
 
-| 参数        | 类型                   | 描述                             |
-| ----------- | ---------------------- | -------------------------------- |
-| `elementId` | `string`               | 元素ID                           |
-| `eventType` | `string`               | 事件类型('click', 'mouseover'等) |
-| `callback`  | `ElementEventCallback` | 事件回调函数                     |
-| **返回值**  | `() => void`           | 取消监听的函数                   |
-
-#### 事件管理方法
-
-| 方法                            | 描述                         | 参数                |
-| ------------------------------- | ---------------------------- | ------------------- |
-| `removeAllListeners(elementId)` | 移除指定元素的所有事件监听器 | `elementId`: 元素ID |
-| `removeAllElementListeners()`   | 移除所有事件监听器           | -                   |
-| `destroy()`                     | 销毁动画播放器               | -                   |
-
-### TemplateEngine
-
-模板引擎类，负责解析和渲染模板字符串。
-
-#### 静态方法
-
-| 方法                     | 描述           | 参数                                       | 返回值   |
-| ------------------------ | -------------- | ------------------------------------------ | -------- |
-| `render(template, data)` | 渲染模板字符串 | `template`: 模板字符串<br>`data`: 渲染数据 | `string` |
-
-### CSSAnimationGenerator
-
-CSS动画生成器类，负责生成CSS关键帧动画代码。
-
-#### 静态方法
-
-| 方法                                                | 描述              | 参数                                                              | 返回值   |
-| --------------------------------------------------- | ----------------- | ----------------------------------------------------------------- | -------- |
-| `generateKeyframes(elementId, keyframes)`           | 生成CSS关键帧动画 | `elementId`: 元素ID<br>`keyframes`: 关键帧数组                    | `string` |
-| `generateAnimationCSS(elementId, duration, easing)` | 生成元素动画CSS   | `elementId`: 元素ID<br>`duration`: 动画时长<br>`easing`: 缓动函数 | `string` |
-| `easingToCSSFunction(easing)`                       | 转换缓动函数为CSS | `easing`: 缓动函数名                                              | `string` |
-
-## 🏭 工厂函数
+```typescript
+import createCssAnimationPlayer from 'aminofx-css-kit';
+
+const player = createCssAnimationPlayer('demo-container', {
+  jsonSchema: {
+    duration: 5720,
+    content: `
+      <style>
+        .animation-box {
+          width: 100px;
+          height: 100px;
+          background: #3b82f6;
+          animation: slide 2s ease-in-out;
+        }
+        @keyframes slide {
+          from { transform: translateX(0); }
+          to { transform: translateX(200px); }
+        }
+      </style>
+      <div class="animation-box"></div>
+    `,
+  },
+  preloadImgList: ['https://example.com/bg.png'],
+});
 
-### createAnimationPlayer
+// 播放动画
+player.play();
+```
 
-根据容器ID创建动画播放器。
+### 动态数据替换示例
 
 ```typescript
-function createAnimationPlayer(
-  containerId: string,
-  schema: IAnimationSchema,
-): AnimationPlayer;
-```
+const player = createCssAnimationPlayer('demo-container', {
+  jsonSchema: {
+    duration: 3000,
+    content: `
+      <style>
+        .title { 
+          font-size: 24px; 
+          color: #1f2937;
+          animation: fadeIn 1s;
+        }
+        @keyframes fadeIn {
+          from { opacity: 0; }
+          to { opacity: 1; }
+        }
+      </style>
+      <div class="title">{{title}}</div>
+    `,
+  },
+  dynamicData: {
+    title: '欢迎使用 AminoFX CSS Kit',
+  },
+});
 
-### createAnimationPlayerFromElement
+player.play();
+```
 
-直接使用DOM元素创建动画播放器。
+### 循环播放示例
 
 ```typescript
-function createAnimationPlayerFromElement(
-  container: HTMLElement,
-  schema: IAnimationSchema,
-): AnimationPlayer;
+const player = createCssAnimationPlayer('demo-container', {
+  jsonUrl: 'https://example.com/loop-animation.json',
+  autoLoop: true, // 启用自动循环
+  alignItems: 'center',
+});
+
+player.play();
 ```
 
-## 🎯 快速开始
+## 🎪 高级用法
 
-### 基础示例
+### 生命周期管理
 
 ```typescript
-import { createAnimationPlayer, IAnimationSchema } from '@yqg-max/click-gate';
-
-// 1. 定义动画配置
-const schema: IAnimationSchema = {
-  elements: [
-    {
-      id: 'box1',
-      content: {
-        html: '<div style="width: 100px; height: 100px; background: #3b82f6;"></div>',
-        style: {
-          borderRadius: '8px',
-        },
-      },
-    },
-  ],
-  keyframes: [
-    {
-      id: 'kf1',
-      elementId: 'box1',
-      time: 0,
-      properties: { x: 0, y: 0, opacity: 1, scale: 1 },
-    },
-    {
-      id: 'kf2',
-      elementId: 'box1',
-      time: 1000,
-      properties: { x: 200, y: 100, opacity: 0.5, scale: 1.5 },
-    },
-    {
-      id: 'kf3',
-      elementId: 'box1',
-      time: 2000,
-      properties: { x: 0, y: 0, opacity: 1, scale: 1, rotation: 360 },
-    },
-  ],
-};
-
-// 2. 创建播放器
-const player = createAnimationPlayer('animation-container', schema);
+// 创建播放器
+const player = createCssAnimationPlayer('container', {
+  jsonUrl: 'https://example.com/animation.json',
+  preloadImgList: ['https://example.com/asset1.png'],
+});
 
-// 3. 播放动画
-player.play();
-```
+// 等待资源加载完成
+await player.ready();
+console.log('动画资源已准备完成');
 
-### 模板渲染示例
+// 播放动画
+await player.play();
+console.log('动画开始播放');
 
-```typescript
-const schema: IAnimationSchema = {
-  data: {
-    title: '欢迎使用动画播放器',
-    subtitle: '强大而灵活的动画解决方案',
-  },
-  elements: [
-    {
-      id: 'text1',
-      data: {
-        content: '{{title}}',
-      },
-      content: {
-        html: '<h2>{{content}}</h2>',
-        style: {
-          color: '#1f2937',
-          fontFamily: 'Arial, sans-serif',
-        },
-      },
-    },
-    {
-      id: 'text2',
-      content: {
-        html: '<p>{{subtitle}}</p>',
-        style: {
-          color: '#6b7280',
-        },
-      },
-    },
-  ],
-  keyframes: [
-    // 标题动画
-    {
-      id: 'title-start',
-      elementId: 'text1',
-      time: 0,
-      properties: { x: -200, opacity: 0 },
-    },
-    {
-      id: 'title-end',
-      elementId: 'text1',
-      time: 800,
-      properties: { x: 0, opacity: 1 },
-    },
-    // 副标题动画
-    {
-      id: 'subtitle-start',
-      elementId: 'text2',
-      time: 400,
-      properties: { x: 200, opacity: 0 },
-    },
-    {
-      id: 'subtitle-end',
-      elementId: 'text2',
-      time: 1200,
-      properties: { x: 0, opacity: 1 },
-    },
-  ],
-};
+// 在适当的时候销毁
+player.destroy();
+console.log('播放器已销毁');
 ```
 
-### 事件监听示例
+### 动态更新动画配置
 
 ```typescript
-// 创建播放器
-const player = createAnimationPlayer('container', schema);
-
-// 监听元素点击事件
-const removeClickListener = player.onListen(
-  'button1',
-  'click',
-  (event, element) => {
-    console.log('按钮被点击了！', element);
-    // 可以执行自定义逻辑
-    player.seek(1500); // 跳转到1.5秒
-  },
-);
-
-// 监听元素悬停事件
-player.onListen('image1', 'mouseover', (event, element) => {
-  element.style.transform = 'scale(1.1)';
+const player = createCssAnimationPlayer('container', {
+  jsonUrl: 'https://example.com/animation1.json',
 });
 
-player.onListen('image1', 'mouseout', (event, element) => {
-  element.style.transform = 'scale(1)';
-});
+// 播放第一个动画
+await player.play();
 
-// 监听动画状态变化
-player.onStateChange((state) => {
-  console.log('动画状态:', state);
+// 切换到另一个动画
+player.updateSchema({
+  jsonUrl: 'https://example.com/animation2.json',
+  autoLoop: true,
 });
 
-// 监听播放进度
-player.onTimeChange((time) => {
-  console.log('当前时间:', time);
-});
-
-// 监听动画完成
-player.onAnimationComplete(() => {
-  console.log('动画播放完成！');
-});
+// 播放新动画
+await player.play();
 ```
 
-### 动态数据更新示例
+### React 集成示例
 
-```typescript
-// 创建包含动态数据的动画
-const schema: IAnimationSchema = {
-  data: {
-    username: 'User',
-    score: 0,
-  },
-  elements: [
-    {
-      id: 'scoreDisplay',
-      content: {
-        html: '<div class="score">{{username}}的分数: {{score}}</div>',
-      },
-    },
-  ],
-  keyframes: [
-    {
-      id: 'score-anim',
-      elementId: 'scoreDisplay',
-      time: 0,
-      properties: { scale: 1 },
-    },
-    {
-      id: 'score-bounce',
-      elementId: 'scoreDisplay',
-      time: 500,
-      properties: { scale: 1.2 },
-    },
-    {
-      id: 'score-normal',
-      elementId: 'scoreDisplay',
-      time: 1000,
-      properties: { scale: 1 },
-    },
-  ],
-};
+```tsx
+import React, { useEffect, useRef, useState } from 'react';
+import createCssAnimationPlayer, { AnimationPlayer } from 'aminofx-css-kit';
 
-const player = createAnimationPlayer('container', schema);
+export const AnimationComponent: React.FC = () => {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const playerRef = useRef<AnimationPlayer | null>(null);
+  const [isReady, setIsReady] = useState(false);
 
-// 动态更新数据
-function updateScore(newScore: number) {
-  player.updateData({ score: newScore });
-  player.seek(0); // 重新播放动画
-  player.play();
-}
+  useEffect(() => {
+    if (!containerRef.current) return;
 
-// 使用示例
-updateScore(100);
-updateScore(250);
-```
+    // 创建播放器
+    const player = createCssAnimationPlayer('animation-container', {
+      jsonUrl: 'https://example.com/animation.json',
+      preloadImgList: ['https://example.com/image.png'],
+      alignItems: 'center',
+    });
 
-## 🎪 高级用法
+    playerRef.current = player;
 
-### 复杂动画序列
+    // 等待资源加载
+    player.ready().then(() => {
+      setIsReady(true);
+    });
 
-```typescript
-const complexSchema: IAnimationSchema = {
-  elements: [
-    { id: 'circle', content: { html: '<div class="circle"></div>' } },
-    { id: 'square', content: { html: '<div class="square"></div>' } },
-    { id: 'triangle', content: { html: '<div class="triangle"></div>' } },
-  ],
-  keyframes: [
-    // 圆形动画序列
-    {
-      id: 'c1',
-      elementId: 'circle',
-      time: 0,
-      properties: { x: 0, y: 0, opacity: 0 },
-    },
-    {
-      id: 'c2',
-      elementId: 'circle',
-      time: 500,
-      properties: { x: 100, y: 0, opacity: 1 },
-    },
-    {
-      id: 'c3',
-      elementId: 'circle',
-      time: 1000,
-      properties: { x: 100, y: 100, rotation: 180 },
-    },
-    {
-      id: 'c4',
-      elementId: 'circle',
-      time: 1500,
-      properties: { x: 0, y: 100, scale: 1.5 },
-    },
-    {
-      id: 'c5',
-      elementId: 'circle',
-      time: 2000,
-      properties: { x: 0, y: 0, scale: 1, rotation: 360 },
-    },
-
-    // 方形动画序列（延迟启动）
-    {
-      id: 's1',
-      elementId: 'square',
-      time: 300,
-      properties: { x: 200, y: 0, opacity: 0 },
-    },
-    {
-      id: 's2',
-      elementId: 'square',
-      time: 800,
-      properties: { x: 300, y: 0, opacity: 1 },
-    },
-    {
-      id: 's3',
-      elementId: 'square',
-      time: 1300,
-      properties: { x: 300, y: 100, rotation: 90 },
-    },
-    {
-      id: 's4',
-      elementId: 'square',
-      time: 1800,
-      properties: { x: 200, y: 100, scale: 0.8 },
-    },
-
-    // 三角形动画序列（更晚启动）
-    {
-      id: 't1',
-      elementId: 'triangle',
-      time: 600,
-      properties: { x: 400, y: 50, opacity: 0 },
-    },
-    {
-      id: 't2',
-      elementId: 'triangle',
-      time: 1100,
-      properties: { x: 450, y: 50, opacity: 1 },
-    },
-    {
-      id: 't3',
-      elementId: 'triangle',
-      time: 1600,
-      properties: { x: 450, y: 100, rotation: 120 },
-    },
-    {
-      id: 't4',
-      elementId: 'triangle',
-      time: 2100,
-      properties: { x: 400, y: 100, scale: 1.2 },
-    },
-  ],
+    // 清理
+    return () => {
+      player.destroy();
+      playerRef.current = null;
+    };
+  }, []);
+
+  const handlePlay = () => {
+    playerRef.current?.play();
+  };
+
+  return (
+    <div>
+      <div id='animation-container' ref={containerRef} />
+      <button onClick={handlePlay} disabled={!isReady}>
+        {isReady ? '播放动画' : '加载中...'}
+      </button>
+    </div>
+  );
 };
 ```
 
-### 自定义缓动函数
+## 📝 API 参考
+
+### 播放器实例方法
+
+#### play()
+
+开始播放动画。如果动画尚未准备就绪，会自动调用 `ready()` 方法。
 
 ```typescript
-// 使用不同的缓动函数创建丰富的动画效果
-const bounceSchema: IAnimationSchema = {
-  elements: [{ id: 'bouncer', content: { html: '<div class="ball"></div>' } }],
-  keyframes: [
-    {
-      id: 'bounce-start',
-      elementId: 'bouncer',
-      time: 0,
-      properties: { y: 0 },
-    },
-    {
-      id: 'bounce-drop',
-      elementId: 'bouncer',
-      time: 1000,
-      properties: { y: 200 }, // 使用 bounce-out 缓动
-    },
-    {
-      id: 'bounce-up',
-      elementId: 'bouncer',
-      time: 1500,
-      properties: { y: 50 }, // 弹起
-    },
-    {
-      id: 'bounce-settle',
-      elementId: 'bouncer',
-      time: 2000,
-      properties: { y: 200 }, // 最终落地
-    },
-  ],
-};
+await player.play();
 ```
 
-## 📝 API 参考
+#### ready()
 
-### 动画播放器 API
+等待所有资源（特别是图片）加载完成。此方法会：
 
-#### 播放控制
+- 预加载所有指定的图片
+- 确保图片解码完成
+- 返回 Promise，资源准备完成后 resolve
 
-- `play()` - 播放动画
-- `pause()` - 暂停动画
-- `stop()` - 停止动画
-- `seek(time: number)` - 跳转到指定时间
+```typescript
+await player.ready();
+console.log('所有资源已加载完成');
+```
 
-#### 状态查询
+#### destroy()
 
-- `getCurrentTime(): number` - 当前播放时间
-- `getDuration(): number` - 动画总时长
-- `getProgress(): number` - 播放进度 (0-1)
-- `getState(): AnimationState` - 当前状态
-- `isPlaying(): boolean` - 是否正在播放
+销毁播放器，清理所有资源：
 
-#### 数据管理
+- 清除循环定时器
+- 清空容器内容
+- 重置内部状态
 
-- `updateData(data: Record<string, any>)` - 更新动画数据
-- `updateSchema(schema: IAnimationSchema)` - 更新动画配置
-- `getSchema(): IAnimationSchema` - 获取当前配置
-- `getAnimationInfo(): IAnimationInfo` - 获取动画信息
+```typescript
+player.destroy();
+```
 
-#### 事件监听
+#### updateSchema(options)
 
-- `onTimeChange(callback)` - 时间变化事件
-- `onAnimationComplete(callback)` - 动画完成事件
-- `onStateChange(callback)` - 状态变化事件
-- `onListen(elementId, eventType, callback)` - 元素事件监听
+更新动画配置并重新初始化。会：
 
-#### 事件管理
+- 清理旧的定时器
+- 重置播放器状态
+- 加载新的动画配置
 
-- `removeAllListeners(elementId)` - 移除指定元素的监听器
-- `removeAllElementListeners()` - 移除所有监听器
-- `destroy()` - 销毁播放器
+```typescript
+player.updateSchema({
+  jsonUrl: 'https://example.com/new-animation.json',
+  autoLoop: true,
+});
+```
 
 ## 🔧 最佳实践
 
-### 1. 性能优化
+### 1. 图片预加载
+
+为了获得最佳的动画体验，建议提前声明所有需要的图片：
 
 ```typescript
-// 避免过多的关键帧
-// ❌ 不好的做法
-const badSchema = {
-  keyframes: [
-    { time: 0, properties: { x: 0 } },
-    { time: 10, properties: { x: 1 } },
-    { time: 20, properties: { x: 2 } },
-    // ... 每10ms一个关键帧
+const player = createCssAnimationPlayer('container', {
+  jsonUrl: 'https://example.com/animation.json',
+  preloadImgList: [
+    'https://example.com/bg.png',
+    'https://example.com/icon1.png',
+    'https://example.com/icon2.png',
   ],
-};
+});
 
-// ✅ 好的做法
-const goodSchema = {
-  keyframes: [
-    { time: 0, properties: { x: 0 } },
-    { time: 500, properties: { x: 50 } },
-    { time: 1000, properties: { x: 100 } },
-  ],
-};
+// 等待所有图片加载完成
+await player.ready();
+player.play();
 ```
 
-### 2. 内存管理
+### 2. 资源清理
 
-```typescript
-// 在组件卸载时清理播放器
-const player = createAnimationPlayer('container', schema);
+在组件卸载或页面离开时，务必销毁播放器：
 
-// 在适当的时候销毁
-function cleanup() {
-  player.destroy(); // 清理所有事件监听器和DOM引用
-}
-
-// React 示例
+```typescript
+// React
 useEffect(() => {
+  const player = createCssAnimationPlayer('container', options);
+
   return () => {
-    cleanup();
+    player.destroy(); // 清理资源
   };
 }, []);
+
+// Vue
+onUnmounted(() => {
+  player.value?.destroy();
+});
 ```
 
-### 3. 错误处理
+### 3. 性能优化
 
 ```typescript
-try {
-  const player = createAnimationPlayer('container', schema);
-  player.play();
-} catch (error) {
-  console.error('动画初始化失败:', error);
-  // 处理错误情况
-}
+// ✅ 推荐：使用 jsonSchema 直接传入，避免网络请求
+const player = createCssAnimationPlayer('container', {
+  jsonSchema: animationData,
+  preloadImgList: imageUrls,
+});
+
+// ⚠️ 注意：使用 jsonUrl 会产生额外的网络请求
+const player = createCssAnimationPlayer('container', {
+  jsonUrl: 'https://example.com/animation.json',
+});
 ```
 
 ## ⚠️ 注意事项
 
-1. **容器元素**: 确保容器元素存在且已挂载到DOM
-2. **唯一ID**: 元素ID和关键帧ID必须唯一
-3. **关键帧关联**: 所有关键帧必须关联到存在的元素
-4. **内存清理**: 使用完毕后调用`destroy()`方法清理资源
-5. **时间单位**: 所有时间参数使用毫秒为单位
-6. **CSS属性**: 支持的CSS属性有限，主要为变换属性
+1. **容器元素**：确保容器元素在调用 `createCssAnimationPlayer` 时已存在于 DOM 中
+2. **资源路径**：预加载图片列表中的 URL 必须是完整的 HTTP/HTTPS 地址
+3. **优先级**：当同时传入 `jsonSchema` 和 `jsonUrl` 时，`jsonSchema` 优先级更高
+4. **循环播放**：启用 `autoLoop` 时，确保提供了 `duration` 属性
+5. **内存管理**：使用完毕后务必调用 `destroy()` 方法清理资源
+6. **CORS**：通过 URL 加载的资源需要正确配置 CORS 策略
 
 ## 🐛 常见问题
 
-### Q: 动画不播放？
-
-A: 检查以下几点：
-
-- 容器元素是否存在
-- 动画配置是否正确
-- 是否有关键帧数据
-- 检查浏览器控制台是否有错误
-
-### Q: 模板变量不显示？
+### Q: 动画不显示？
 
-A: 确保：
+**A:** 检查以下几点：
 
-- 数据对象包含对应的属性
-- 模板语法正确使用`{{variableName}}`
-- 调用`updateData()`后重新渲染
+- 容器元素是否存在（`document.getElementById(containerId)` 不为 null）
+- JSON Schema 的 `content` 字段是否包含有效的 HTML 和 CSS
+- 检查浏览器控制台是否有错误信息
+- 确认图片 URL 是否可访问
 
-### Q: 事件监听器不工作？
+### Q: 图片加载失败？
 
-A: 检查：
+**A:**
 
-- 元素ID是否正确
-- 事件类型名称是否正确
-- 元素是否已创建并添加到DOM
+- 检查图片 URL 是否正确
+- 确认服务器是否配置了正确的 CORS 头
+- 查看浏览器网络面板，确认图片请求状态
+- 图片加载失败不会阻塞动画播放，但可能影响视觉效果
 
-## 📄 许可证
+### Q: 循环播放不工作？
 
-MIT License
+**A:**
 
-## 🤝 贡献
+- 确保 `autoLoop` 设置为 `true`
+- 检查 `jsonSchema.duration` 是否正确设置
+- 循环播放基于定时器实现，确保页面未被挂起
 
-欢迎提交 Issue 和 Pull Request！
+### Q: 如何动态更改动画内容？
 
----
+**A:** 使用 `updateSchema()` 方法：
 
-如有疑问，请查看源码注释或提交 Issue。
+```typescript
+player.updateSchema({
+  jsonSchema: newAnimationData,
+  dynamicData: { title: '新标题' },
+});
+player.play();
+```

package/dist/esm/index.js

@@ -120,36 +120,46 @@ var AnimationPlayer = /*#__PURE__*/function () {
         return _regeneratorRuntime().wrap(function _callee2$(_context2) {
           while (1) switch (_context2.prev = _context2.next) {
             case 0:
+              Object.assign(this.container.style, {
+                display: 'none',
+                width: '100vw',
+                height: '100vh',
+                overflow: 'hidden',
+                alignItems: this.options.alignItems || 'center',
+                justifyContent: 'center',
+                backgroundColor: 'rgba(0, 0, 0, 0.85)',
+                backdropFilter: 'blur(10px)'
+              });
               if (!this.options.jsonSchema) {
-                _context2.next = 4;
+                _context2.next = 5;
                 break;
               }
               this.container.innerHTML = this.replacePlaceholders(this.options.jsonSchema.content);
-              _context2.next = 16;
+              _context2.next = 17;
               break;
-            case 4:
+            case 5:
               if (!((_this$options = this.options) !== null && _this$options !== void 0 && _this$options.jsonUrl)) {
-                _context2.next = 15;
+                _context2.next = 16;
                 break;
               }
-              _context2.next = 7;
+              _context2.next = 8;
               return fetch((_this$options2 = this.options) === null || _this$options2 === void 0 ? void 0 : _this$options2.jsonUrl);
-            case 7:
+            case 8:
               response = _context2.sent;
-              _context2.next = 10;
+              _context2.next = 11;
               return response.json();
-            case 10:
+            case 11:
               data = _context2.sent;
               this.options.jsonSchema = data;
               this.container.innerHTML = this.replacePlaceholders(((_this$options$jsonSch = this.options.jsonSchema) === null || _this$options$jsonSch === void 0 ? void 0 : _this$options$jsonSch.content) || '');
-              _context2.next = 16;
+              _context2.next = 17;
               break;
-            case 15:
-              throw new Error('没有提供jsonSchema或jsonUrl');
             case 16:
-              _context2.next = 18;
+              throw new Error('没有提供jsonSchema或jsonUrl');
+            case 17:
+              _context2.next = 19;
               return this.ready();
-            case 18:
+            case 19:
             case "end":
               return _context2.stop();
           }
@@ -189,7 +199,7 @@ var AnimationPlayer = /*#__PURE__*/function () {
         _this3 = this,
         _this$options$jsonSch3,
         _this$options$jsonSch4;
-      if (!this.options.autoLoop || !((_this$options$jsonSch2 = this.options.jsonSchema) !== null && _this$options$jsonSch2 !== void 0 && _this$options$jsonSch2.duration)) {
+      if (!this.options.autoLoop || !Number((_this$options$jsonSch2 = this.options.jsonSchema) === null || _this$options$jsonSch2 === void 0 ? void 0 : _this$options$jsonSch2.duration)) {
         return;
       }
 
@@ -207,7 +217,7 @@ var AnimationPlayer = /*#__PURE__*/function () {
           _this3.loopTimerId = null;
           _this3.play();
         }, 100);
-      }, (_this$options$jsonSch3 = this.options.jsonSchema) === null || _this$options$jsonSch3 === void 0 ? void 0 : _this$options$jsonSch3.duration);
+      }, Number((_this$options$jsonSch3 = this.options.jsonSchema) === null || _this$options$jsonSch3 === void 0 ? void 0 : _this$options$jsonSch3.duration));
       console.log("aminofx:  \uD83D\uDD04 \u542F\u52A8\u5FAA\u73AF\u5B9A\u65F6\u5668\uFF0C\u65F6\u957F: ".concat((_this$options$jsonSch4 = this.options.jsonSchema) === null || _this$options$jsonSch4 === void 0 ? void 0 : _this$options$jsonSch4.duration, "ms"));
     }
   }, {
@@ -324,16 +334,7 @@ var AnimationPlayer = /*#__PURE__*/function () {
   }, {
     key: "updateSchema",
     value: function updateSchema(options) {
-      // 清理旧的循环定时器
-      if (this.loopTimerId !== null) {
-        clearTimeout(this.loopTimerId);
-        this.loopTimerId = null;
-        console.log('aminofx:  🧹 更新Schema时清理循环定时器');
-      }
-
-      // 重置状态
-      this.isReady = false;
-      this.readyPromise = null;
+      this.destroy();
 
       // 更新配置并重新初始化
       this.options = options;
@@ -350,16 +351,6 @@ function createCssAnimationPlayer(containerId, options) {
 
   // 固定比例画布容器，通过设置container适配不同比例机型
   var canvasContainer = document.createElement('div');
-  Object.assign(canvasContainer.style, {
-    display: 'none',
-    width: '100vw',
-    height: '100vh',
-    overflow: 'hidden',
-    alignItems: options.alignItems || 'center',
-    justifyContent: 'center',
-    backgroundColor: 'rgba(0, 0, 0, 0.85)',
-    backdropFilter: 'blur(10px)'
-  });
   var instance = new AnimationPlayer(canvasContainer, options);
   container.appendChild(canvasContainer);
   return instance;

package/dist/umd/aminofx-css-kit.min.js

@@ -1 +1 @@
-!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports["@yqg/aminofx-css-kit"]=e():t["@yqg/aminofx-css-kit"]=e()}(self,(function(){return function(){var t={506:function(){},365:function(t){function e(t,e,r,n,o,i,a){try{var s=t[i](a),c=s.value}catch(t){return void r(t)}s.done?e(c):Promise.resolve(c).then(n,o)}t.exports=function(t){return function(){var r=this,n=arguments;return new Promise((function(o,i){var a=t.apply(r,n);function s(t){e(a,o,i,s,c,"next",t)}function c(t){e(a,o,i,s,c,"throw",t)}s(void 0)}))}},t.exports.__esModule=!0,t.exports.default=t.exports},156:function(t){t.exports=function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")},t.exports.__esModule=!0,t.exports.default=t.exports},499:function(t,e,r){var n=r(714);function o(t,e){for(var r=0;r<e.length;r++){var o=e[r];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(t,n(o.key),o)}}t.exports=function(t,e,r){return e&&o(t.prototype,e),r&&o(t,r),Object.defineProperty(t,"prototype",{writable:!1}),t},t.exports.__esModule=!0,t.exports.default=t.exports},173:function(t,e,r){var n=r(714);t.exports=function(t,e,r){return(e=n(e))in t?Object.defineProperty(t,e,{value:r,enumerable:!0,configurable:!0,writable:!0}):t[e]=r,t},t.exports.__esModule=!0,t.exports.default=t.exports},298:function(t,e,r){var n=r(241).default;function o(){"use strict";t.exports=o=function(){return r},t.exports.__esModule=!0,t.exports.default=t.exports;var e,r={},i=Object.prototype,a=i.hasOwnProperty,s=Object.defineProperty||function(t,e,r){t[e]=r.value},c="function"==typeof Symbol?Symbol:{},u=c.iterator||"@@iterator",l=c.asyncIterator||"@@asyncIterator",f=c.toStringTag||"@@toStringTag";function p(t,e,r){return Object.defineProperty(t,e,{value:r,enumerable:!0,configurable:!0,writable:!0}),t[e]}try{p({},"")}catch(e){p=function(t,e,r){return t[e]=r}}function h(t,e,r,n){var o=e&&e.prototype instanceof g?e:g,i=Object.create(o.prototype),a=new M(n||[]);return s(i,"_invoke",{value:S(t,r,a)}),i}function d(t,e,r){try{return{type:"normal",arg:t.call(e,r)}}catch(t){return{type:"throw",arg:t}}}r.wrap=h;var y="suspendedStart",v="executing",m="completed",x={};function g(){}function w(){}function b(){}var P={};p(P,u,(function(){return this}));var j=Object.getPrototypeOf,_=j&&j(j(C([])));_&&_!==i&&a.call(_,u)&&(P=_);var k=b.prototype=g.prototype=Object.create(P);function L(t){["next","throw","return"].forEach((function(e){p(t,e,(function(t){return this._invoke(e,t)}))}))}function T(t,e){function r(o,i,s,c){var u=d(t[o],t,i);if("throw"!==u.type){var l=u.arg,f=l.value;return f&&"object"==n(f)&&a.call(f,"__await")?e.resolve(f.__await).then((function(t){r("next",t,s,c)}),(function(t){r("throw",t,s,c)})):e.resolve(f).then((function(t){l.value=t,s(l)}),(function(t){return r("throw",t,s,c)}))}c(u.arg)}var o;s(this,"_invoke",{value:function(t,n){function i(){return new e((function(e,o){r(t,n,e,o)}))}return o=o?o.then(i,i):i()}})}function S(t,r,n){var o=y;return function(i,a){if(o===v)throw new Error("Generator is already running");if(o===m){if("throw"===i)throw a;return{value:e,done:!0}}for(n.method=i,n.arg=a;;){var s=n.delegate;if(s){var c=E(s,n);if(c){if(c===x)continue;return c}}if("next"===n.method)n.sent=n._sent=n.arg;else if("throw"===n.method){if(o===y)throw o=m,n.arg;n.dispatchException(n.arg)}else"return"===n.method&&n.abrupt("return",n.arg);o=v;var u=d(t,r,n);if("normal"===u.type){if(o=n.done?m:"suspendedYield",u.arg===x)continue;return{value:u.arg,done:n.done}}"throw"===u.type&&(o=m,n.method="throw",n.arg=u.arg)}}}function E(t,r){var n=r.method,o=t.iterator[n];if(o===e)return r.delegate=null,"throw"===n&&t.iterator.return&&(r.method="return",r.arg=e,E(t,r),"throw"===r.method)||"return"!==n&&(r.method="throw",r.arg=new TypeError("The iterator does not provide a '"+n+"' method")),x;var i=d(o,t.iterator,r.arg);if("throw"===i.type)return r.method="throw",r.arg=i.arg,r.delegate=null,x;var a=i.arg;return a?a.done?(r[t.resultName]=a.value,r.next=t.nextLoc,"return"!==r.method&&(r.method="next",r.arg=e),r.delegate=null,x):a:(r.method="throw",r.arg=new TypeError("iterator result is not an object"),r.delegate=null,x)}function O(t){var e={tryLoc:t[0]};1 in t&&(e.catchLoc=t[1]),2 in t&&(e.finallyLoc=t[2],e.afterLoc=t[3]),this.tryEntries.push(e)}function I(t){var e=t.completion||{};e.type="normal",delete e.arg,t.completion=e}function M(t){this.tryEntries=[{tryLoc:"root"}],t.forEach(O,this),this.reset(!0)}function C(t){if(t||""===t){var r=t[u];if(r)return r.call(t);if("function"==typeof t.next)return t;if(!isNaN(t.length)){var o=-1,i=function r(){for(;++o<t.length;)if(a.call(t,o))return r.value=t[o],r.done=!1,r;return r.value=e,r.done=!0,r};return i.next=i}}throw new TypeError(n(t)+" is not iterable")}return w.prototype=b,s(k,"constructor",{value:b,configurable:!0}),s(b,"constructor",{value:w,configurable:!0}),w.displayName=p(b,f,"GeneratorFunction"),r.isGeneratorFunction=function(t){var e="function"==typeof t&&t.constructor;return!!e&&(e===w||"GeneratorFunction"===(e.displayName||e.name))},r.mark=function(t){return Object.setPrototypeOf?Object.setPrototypeOf(t,b):(t.__proto__=b,p(t,f,"GeneratorFunction")),t.prototype=Object.create(k),t},r.awrap=function(t){return{__await:t}},L(T.prototype),p(T.prototype,l,(function(){return this})),r.AsyncIterator=T,r.async=function(t,e,n,o,i){void 0===i&&(i=Promise);var a=new T(h(t,e,n,o),i);return r.isGeneratorFunction(e)?a:a.next().then((function(t){return t.done?t.value:a.next()}))},L(k),p(k,f,"Generator"),p(k,u,(function(){return this})),p(k,"toString",(function(){return"[object Generator]"})),r.keys=function(t){var e=Object(t),r=[];for(var n in e)r.push(n);return r.reverse(),function t(){for(;r.length;){var n=r.pop();if(n in e)return t.value=n,t.done=!1,t}return t.done=!0,t}},r.values=C,M.prototype={constructor:M,reset:function(t){if(this.prev=0,this.next=0,this.sent=this._sent=e,this.done=!1,this.delegate=null,this.method="next",this.arg=e,this.tryEntries.forEach(I),!t)for(var r in this)"t"===r.charAt(0)&&a.call(this,r)&&!isNaN(+r.slice(1))&&(this[r]=e)},stop:function(){this.done=!0;var t=this.tryEntries[0].completion;if("throw"===t.type)throw t.arg;return this.rval},dispatchException:function(t){if(this.done)throw t;var r=this;function n(n,o){return s.type="throw",s.arg=t,r.next=n,o&&(r.method="next",r.arg=e),!!o}for(var o=this.tryEntries.length-1;o>=0;--o){var i=this.tryEntries[o],s=i.completion;if("root"===i.tryLoc)return n("end");if(i.tryLoc<=this.prev){var c=a.call(i,"catchLoc"),u=a.call(i,"finallyLoc");if(c&&u){if(this.prev<i.catchLoc)return n(i.catchLoc,!0);if(this.prev<i.finallyLoc)return n(i.finallyLoc)}else if(c){if(this.prev<i.catchLoc)return n(i.catchLoc,!0)}else{if(!u)throw new Error("try statement without catch or finally");if(this.prev<i.finallyLoc)return n(i.finallyLoc)}}}},abrupt:function(t,e){for(var r=this.tryEntries.length-1;r>=0;--r){var n=this.tryEntries[r];if(n.tryLoc<=this.prev&&a.call(n,"finallyLoc")&&this.prev<n.finallyLoc){var o=n;break}}o&&("break"===t||"continue"===t)&&o.tryLoc<=e&&e<=o.finallyLoc&&(o=null);var i=o?o.completion:{};return i.type=t,i.arg=e,o?(this.method="next",this.next=o.finallyLoc,x):this.complete(i)},complete:function(t,e){if("throw"===t.type)throw t.arg;return"break"===t.type||"continue"===t.type?this.next=t.arg:"return"===t.type?(this.rval=this.arg=t.arg,this.method="return",this.next="end"):"normal"===t.type&&e&&(this.next=e),x},finish:function(t){for(var e=this.tryEntries.length-1;e>=0;--e){var r=this.tryEntries[e];if(r.finallyLoc===t)return this.complete(r.completion,r.afterLoc),I(r),x}},catch:function(t){for(var e=this.tryEntries.length-1;e>=0;--e){var r=this.tryEntries[e];if(r.tryLoc===t){var n=r.completion;if("throw"===n.type){var o=n.arg;I(r)}return o}}throw new Error("illegal catch attempt")},delegateYield:function(t,r,n){return this.delegate={iterator:C(t),resultName:r,nextLoc:n},"next"===this.method&&(this.arg=e),x}},r}t.exports=o,t.exports.__esModule=!0,t.exports.default=t.exports},569:function(t,e,r){var n=r(241).default;t.exports=function(t,e){if("object"!=n(t)||!t)return t;var r=t[Symbol.toPrimitive];if(void 0!==r){var o=r.call(t,e||"default");if("object"!=n(o))return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===e?String:Number)(t)},t.exports.__esModule=!0,t.exports.default=t.exports},714:function(t,e,r){var n=r(241).default,o=r(569);t.exports=function(t){var e=o(t,"string");return"symbol"==n(e)?e:String(e)},t.exports.__esModule=!0,t.exports.default=t.exports},241:function(t){function e(r){return t.exports=e="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},t.exports.__esModule=!0,t.exports.default=t.exports,e(r)}t.exports=e,t.exports.__esModule=!0,t.exports.default=t.exports}},e={};function r(n){var o=e[n];if(void 0!==o)return o.exports;var i=e[n]={exports:{}};return t[n](i,i.exports,r),i.exports}r.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return r.d(e,{a:e}),e},r.d=function(t,e){for(var n in e)r.o(e,n)&&!r.o(t,n)&&Object.defineProperty(t,n,{enumerable:!0,get:e[n]})},r.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},r.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})};var n={};return function(){"use strict";r.r(n),r.d(n,{AnimationPlayer:function(){return v}});var t=r(298),e=r.n(t),o=r(365),i=r.n(o),a=r(156),s=r.n(a),c=r(499),u=r.n(c),l=r(173),f=r.n(l),p=r(506),h={};for(var d in p)["default","AnimationPlayer"].indexOf(d)<0&&(h[d]=function(t){return p[t]}.bind(0,d));r.d(n,h);var y=function(){function t(){s()(this,t)}var r;return u()(t,null,[{key:"loadImages",value:(r=i()(e()().mark((function t(r){var n,o=this;return e()().wrap((function(t){for(;;)switch(t.prev=t.next){case 0:if(Array.isArray(r)&&0!==r.length){t.next=2;break}return t.abrupt("return",Promise.resolve());case 2:return n=r.map((function(t,e){if(!t.startsWith("http"))return Promise.resolve();if(o.imageCache.has(t))return console.log("aminofx:  ✅ 图片 ".concat(e+1," 已缓存: ").concat(t)),Promise.resolve();if(o.loadingQueue.has(t))return o.loadingQueue.get(t);var r=new Promise((function(r){var n=new Image;n.onload=function(){o.imageCache.set(t,!0),o.loadingQueue.delete(t),console.log("aminofx:  ✅ 图片 ".concat(e+1," 加载成功: ").concat(t)),"function"==typeof n.decode?n.decode().then((function(){console.log("aminofx:  🎨 图片 ".concat(e+1," 解码完成: ").concat(t)),r()})).catch((function(){console.log("aminofx:  ⚠️ 图片 ".concat(e+1," decode失败，使用fallback: ").concat(t)),r()})):(console.log("aminofx:  📱 图片 ".concat(e+1," 使用兼容模式: ").concat(t)),r())},n.src=t,n.onerror=function(){o.loadingQueue.delete(t),console.error("aminofx:  ❌ 图片 ".concat(e+1," 加载失败: ").concat(t)),r()}}));return o.loadingQueue.set(t,r),r})),t.prev=3,t.next=6,Promise.all(n);case 6:console.log("aminofx:  🎉 所有图片资源加载完成"),t.next=12;break;case 9:t.prev=9,t.t0=t.catch(3),console.error("aminofx:  ❌ 图片加载过程中出现错误:",t.t0);case 12:case"end":return t.stop()}}),t,null,[[3,9]])}))),function(t){return r.apply(this,arguments)})}]),t}();f()(y,"imageCache",new Map),f()(y,"loadingQueue",new Map);var v=function(){function t(e,r){s()(this,t),f()(this,"container",void 0),f()(this,"options",void 0),f()(this,"isReady",!1),f()(this,"readyPromise",null),f()(this,"loopTimerId",null),this.container=e,this.options=r,this.init()}var r,n,o;return u()(t,[{key:"init",value:(o=i()(e()().mark((function t(){var r,n,o,i,a;return e()().wrap((function(t){for(;;)switch(t.prev=t.next){case 0:if(!this.options.jsonSchema){t.next=4;break}this.container.innerHTML=this.replacePlaceholders(this.options.jsonSchema.content),t.next=16;break;case 4:if(null===(r=this.options)||void 0===r||!r.jsonUrl){t.next=15;break}return t.next=7,fetch(null===(n=this.options)||void 0===n?void 0:n.jsonUrl);case 7:return i=t.sent,t.next=10,i.json();case 10:a=t.sent,this.options.jsonSchema=a,this.container.innerHTML=this.replacePlaceholders((null===(o=this.options.jsonSchema)||void 0===o?void 0:o.content)||""),t.next=16;break;case 15:throw new Error("没有提供jsonSchema或jsonUrl");case 16:return t.next=18,this.ready();case 18:case"end":return t.stop()}}),t,this)}))),function(){return o.apply(this,arguments)})},{key:"replacePlaceholders",value:function(t){var e=this;return this.options.dynamicData&&t?t.replace(/\{\{(\w+)\}\}|\$\{(\w+)\}/g,(function(t,r,n){var o,i=r||n;return void 0!==(null===(o=e.options.dynamicData)||void 0===o?void 0:o[i])?String(e.options.dynamicData[i]):t})):t}},{key:"handleLoop",value:function(){var t,e,r,n=this;this.options.autoLoop&&null!==(t=this.options.jsonSchema)&&void 0!==t&&t.duration&&(null!==this.loopTimerId&&(clearTimeout(this.loopTimerId),this.loopTimerId=null,console.log("aminofx:  🧹 清理旧的循环定时器")),this.loopTimerId=window.setTimeout((function(){n.container.style.display="none",window.setTimeout((function(){n.loopTimerId=null,n.play()}),100)}),null===(e=this.options.jsonSchema)||void 0===e?void 0:e.duration),console.log("aminofx:  🔄 启动循环定时器，时长: ".concat(null===(r=this.options.jsonSchema)||void 0===r?void 0:r.duration,"ms")))}},{key:"ready",value:(n=i()(e()().mark((function t(){var r=this;return e()().wrap((function(t){for(;;)switch(t.prev=t.next){case 0:if(!this.isReady){t.next=3;break}return console.log("aminofx:  ✅ 动画已准备就绪，直接返回"),t.abrupt("return",Promise.resolve());case 3:if(!this.readyPromise){t.next=6;break}return console.log("aminofx:  ⏳ 正在准备中，等待现有Promise..."),t.abrupt("return",this.readyPromise);case 6:return this.readyPromise=new Promise(function(){var t=i()(e()().mark((function t(n){return e()().wrap((function(t){for(;;)switch(t.prev=t.next){case 0:return t.prev=0,t.next=3,y.loadImages(r.options.preloadImgList||[]);case 3:r.isReady=!0,console.log("aminofx:  🎉 动画准备完成，可以开始播放"),t.next=10;break;case 7:t.prev=7,t.t0=t.catch(0),console.error("aminofx:  ❌ 动画准备失败:",t.t0);case 10:n();case 11:case"end":return t.stop()}}),t,null,[[0,7]])})));return function(e){return t.apply(this,arguments)}}()),t.abrupt("return",this.readyPromise);case 8:case"end":return t.stop()}}),t,this)}))),function(){return n.apply(this,arguments)})},{key:"play",value:(r=i()(e()().mark((function t(){return e()().wrap((function(t){for(;;)switch(t.prev=t.next){case 0:if(this.isReady){t.next=4;break}return console.warn("aminofx:  ⚠️ 动画尚未准备就绪，自动调用ready()..."),t.next=4,this.ready();case 4:this.container.style.display="flex",this.options.autoLoop&&null===this.loopTimerId&&this.handleLoop();case 6:case"end":return t.stop()}}),t,this)}))),function(){return r.apply(this,arguments)})},{key:"destroy",value:function(){null!==this.loopTimerId&&(clearTimeout(this.loopTimerId),this.loopTimerId=null,console.log("aminofx:  🧹 销毁时清理循环定时器")),this.container.innerHTML="",this.isReady=!1,this.readyPromise=null,console.log("aminofx:  🗑️ AnimationPlayer 已销毁")}},{key:"updateSchema",value:function(t){null!==this.loopTimerId&&(clearTimeout(this.loopTimerId),this.loopTimerId=null,console.log("aminofx:  🧹 更新Schema时清理循环定时器")),this.isReady=!1,this.readyPromise=null,this.options=t,this.init()}}]),t}();function m(t,e){var r=document.getElementById(t);if(!r)throw new Error('Container with id "'.concat(t,'" not found'));var n=document.createElement("div");Object.assign(n.style,{display:"none",width:"100vw",height:"100vh",overflow:"hidden",alignItems:e.alignItems||"center",justifyContent:"center",backgroundColor:"rgba(0, 0, 0, 0.85)",backdropFilter:"blur(10px)"});var o=new v(n,e);return r.appendChild(n),o}n.default=m,window.createCssAnimationPlayer=m}(),n}()}));
+!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports["@yqg/aminofx-css-kit"]=e():t["@yqg/aminofx-css-kit"]=e()}(self,(function(){return function(){var t={506:function(){},365:function(t){function e(t,e,r,n,o,i,a){try{var s=t[i](a),c=s.value}catch(t){return void r(t)}s.done?e(c):Promise.resolve(c).then(n,o)}t.exports=function(t){return function(){var r=this,n=arguments;return new Promise((function(o,i){var a=t.apply(r,n);function s(t){e(a,o,i,s,c,"next",t)}function c(t){e(a,o,i,s,c,"throw",t)}s(void 0)}))}},t.exports.__esModule=!0,t.exports.default=t.exports},156:function(t){t.exports=function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")},t.exports.__esModule=!0,t.exports.default=t.exports},499:function(t,e,r){var n=r(714);function o(t,e){for(var r=0;r<e.length;r++){var o=e[r];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(t,n(o.key),o)}}t.exports=function(t,e,r){return e&&o(t.prototype,e),r&&o(t,r),Object.defineProperty(t,"prototype",{writable:!1}),t},t.exports.__esModule=!0,t.exports.default=t.exports},173:function(t,e,r){var n=r(714);t.exports=function(t,e,r){return(e=n(e))in t?Object.defineProperty(t,e,{value:r,enumerable:!0,configurable:!0,writable:!0}):t[e]=r,t},t.exports.__esModule=!0,t.exports.default=t.exports},298:function(t,e,r){var n=r(241).default;function o(){"use strict";t.exports=o=function(){return r},t.exports.__esModule=!0,t.exports.default=t.exports;var e,r={},i=Object.prototype,a=i.hasOwnProperty,s=Object.defineProperty||function(t,e,r){t[e]=r.value},c="function"==typeof Symbol?Symbol:{},u=c.iterator||"@@iterator",l=c.asyncIterator||"@@asyncIterator",f=c.toStringTag||"@@toStringTag";function p(t,e,r){return Object.defineProperty(t,e,{value:r,enumerable:!0,configurable:!0,writable:!0}),t[e]}try{p({},"")}catch(e){p=function(t,e,r){return t[e]=r}}function h(t,e,r,n){var o=e&&e.prototype instanceof g?e:g,i=Object.create(o.prototype),a=new M(n||[]);return s(i,"_invoke",{value:S(t,r,a)}),i}function d(t,e,r){try{return{type:"normal",arg:t.call(e,r)}}catch(t){return{type:"throw",arg:t}}}r.wrap=h;var y="suspendedStart",v="executing",m="completed",x={};function g(){}function w(){}function b(){}var j={};p(j,u,(function(){return this}));var P=Object.getPrototypeOf,_=P&&P(P(N([])));_&&_!==i&&a.call(_,u)&&(j=_);var k=b.prototype=g.prototype=Object.create(j);function L(t){["next","throw","return"].forEach((function(e){p(t,e,(function(t){return this._invoke(e,t)}))}))}function E(t,e){function r(o,i,s,c){var u=d(t[o],t,i);if("throw"!==u.type){var l=u.arg,f=l.value;return f&&"object"==n(f)&&a.call(f,"__await")?e.resolve(f.__await).then((function(t){r("next",t,s,c)}),(function(t){r("throw",t,s,c)})):e.resolve(f).then((function(t){l.value=t,s(l)}),(function(t){return r("throw",t,s,c)}))}c(u.arg)}var o;s(this,"_invoke",{value:function(t,n){function i(){return new e((function(e,o){r(t,n,e,o)}))}return o=o?o.then(i,i):i()}})}function S(t,r,n){var o=y;return function(i,a){if(o===v)throw new Error("Generator is already running");if(o===m){if("throw"===i)throw a;return{value:e,done:!0}}for(n.method=i,n.arg=a;;){var s=n.delegate;if(s){var c=T(s,n);if(c){if(c===x)continue;return c}}if("next"===n.method)n.sent=n._sent=n.arg;else if("throw"===n.method){if(o===y)throw o=m,n.arg;n.dispatchException(n.arg)}else"return"===n.method&&n.abrupt("return",n.arg);o=v;var u=d(t,r,n);if("normal"===u.type){if(o=n.done?m:"suspendedYield",u.arg===x)continue;return{value:u.arg,done:n.done}}"throw"===u.type&&(o=m,n.method="throw",n.arg=u.arg)}}}function T(t,r){var n=r.method,o=t.iterator[n];if(o===e)return r.delegate=null,"throw"===n&&t.iterator.return&&(r.method="return",r.arg=e,T(t,r),"throw"===r.method)||"return"!==n&&(r.method="throw",r.arg=new TypeError("The iterator does not provide a '"+n+"' method")),x;var i=d(o,t.iterator,r.arg);if("throw"===i.type)return r.method="throw",r.arg=i.arg,r.delegate=null,x;var a=i.arg;return a?a.done?(r[t.resultName]=a.value,r.next=t.nextLoc,"return"!==r.method&&(r.method="next",r.arg=e),r.delegate=null,x):a:(r.method="throw",r.arg=new TypeError("iterator result is not an object"),r.delegate=null,x)}function O(t){var e={tryLoc:t[0]};1 in t&&(e.catchLoc=t[1]),2 in t&&(e.finallyLoc=t[2],e.afterLoc=t[3]),this.tryEntries.push(e)}function I(t){var e=t.completion||{};e.type="normal",delete e.arg,t.completion=e}function M(t){this.tryEntries=[{tryLoc:"root"}],t.forEach(O,this),this.reset(!0)}function N(t){if(t||""===t){var r=t[u];if(r)return r.call(t);if("function"==typeof t.next)return t;if(!isNaN(t.length)){var o=-1,i=function r(){for(;++o<t.length;)if(a.call(t,o))return r.value=t[o],r.done=!1,r;return r.value=e,r.done=!0,r};return i.next=i}}throw new TypeError(n(t)+" is not iterable")}return w.prototype=b,s(k,"constructor",{value:b,configurable:!0}),s(b,"constructor",{value:w,configurable:!0}),w.displayName=p(b,f,"GeneratorFunction"),r.isGeneratorFunction=function(t){var e="function"==typeof t&&t.constructor;return!!e&&(e===w||"GeneratorFunction"===(e.displayName||e.name))},r.mark=function(t){return Object.setPrototypeOf?Object.setPrototypeOf(t,b):(t.__proto__=b,p(t,f,"GeneratorFunction")),t.prototype=Object.create(k),t},r.awrap=function(t){return{__await:t}},L(E.prototype),p(E.prototype,l,(function(){return this})),r.AsyncIterator=E,r.async=function(t,e,n,o,i){void 0===i&&(i=Promise);var a=new E(h(t,e,n,o),i);return r.isGeneratorFunction(e)?a:a.next().then((function(t){return t.done?t.value:a.next()}))},L(k),p(k,f,"Generator"),p(k,u,(function(){return this})),p(k,"toString",(function(){return"[object Generator]"})),r.keys=function(t){var e=Object(t),r=[];for(var n in e)r.push(n);return r.reverse(),function t(){for(;r.length;){var n=r.pop();if(n in e)return t.value=n,t.done=!1,t}return t.done=!0,t}},r.values=N,M.prototype={constructor:M,reset:function(t){if(this.prev=0,this.next=0,this.sent=this._sent=e,this.done=!1,this.delegate=null,this.method="next",this.arg=e,this.tryEntries.forEach(I),!t)for(var r in this)"t"===r.charAt(0)&&a.call(this,r)&&!isNaN(+r.slice(1))&&(this[r]=e)},stop:function(){this.done=!0;var t=this.tryEntries[0].completion;if("throw"===t.type)throw t.arg;return this.rval},dispatchException:function(t){if(this.done)throw t;var r=this;function n(n,o){return s.type="throw",s.arg=t,r.next=n,o&&(r.method="next",r.arg=e),!!o}for(var o=this.tryEntries.length-1;o>=0;--o){var i=this.tryEntries[o],s=i.completion;if("root"===i.tryLoc)return n("end");if(i.tryLoc<=this.prev){var c=a.call(i,"catchLoc"),u=a.call(i,"finallyLoc");if(c&&u){if(this.prev<i.catchLoc)return n(i.catchLoc,!0);if(this.prev<i.finallyLoc)return n(i.finallyLoc)}else if(c){if(this.prev<i.catchLoc)return n(i.catchLoc,!0)}else{if(!u)throw new Error("try statement without catch or finally");if(this.prev<i.finallyLoc)return n(i.finallyLoc)}}}},abrupt:function(t,e){for(var r=this.tryEntries.length-1;r>=0;--r){var n=this.tryEntries[r];if(n.tryLoc<=this.prev&&a.call(n,"finallyLoc")&&this.prev<n.finallyLoc){var o=n;break}}o&&("break"===t||"continue"===t)&&o.tryLoc<=e&&e<=o.finallyLoc&&(o=null);var i=o?o.completion:{};return i.type=t,i.arg=e,o?(this.method="next",this.next=o.finallyLoc,x):this.complete(i)},complete:function(t,e){if("throw"===t.type)throw t.arg;return"break"===t.type||"continue"===t.type?this.next=t.arg:"return"===t.type?(this.rval=this.arg=t.arg,this.method="return",this.next="end"):"normal"===t.type&&e&&(this.next=e),x},finish:function(t){for(var e=this.tryEntries.length-1;e>=0;--e){var r=this.tryEntries[e];if(r.finallyLoc===t)return this.complete(r.completion,r.afterLoc),I(r),x}},catch:function(t){for(var e=this.tryEntries.length-1;e>=0;--e){var r=this.tryEntries[e];if(r.tryLoc===t){var n=r.completion;if("throw"===n.type){var o=n.arg;I(r)}return o}}throw new Error("illegal catch attempt")},delegateYield:function(t,r,n){return this.delegate={iterator:N(t),resultName:r,nextLoc:n},"next"===this.method&&(this.arg=e),x}},r}t.exports=o,t.exports.__esModule=!0,t.exports.default=t.exports},569:function(t,e,r){var n=r(241).default;t.exports=function(t,e){if("object"!=n(t)||!t)return t;var r=t[Symbol.toPrimitive];if(void 0!==r){var o=r.call(t,e||"default");if("object"!=n(o))return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===e?String:Number)(t)},t.exports.__esModule=!0,t.exports.default=t.exports},714:function(t,e,r){var n=r(241).default,o=r(569);t.exports=function(t){var e=o(t,"string");return"symbol"==n(e)?e:String(e)},t.exports.__esModule=!0,t.exports.default=t.exports},241:function(t){function e(r){return t.exports=e="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},t.exports.__esModule=!0,t.exports.default=t.exports,e(r)}t.exports=e,t.exports.__esModule=!0,t.exports.default=t.exports}},e={};function r(n){var o=e[n];if(void 0!==o)return o.exports;var i=e[n]={exports:{}};return t[n](i,i.exports,r),i.exports}r.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return r.d(e,{a:e}),e},r.d=function(t,e){for(var n in e)r.o(e,n)&&!r.o(t,n)&&Object.defineProperty(t,n,{enumerable:!0,get:e[n]})},r.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},r.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})};var n={};return function(){"use strict";r.r(n),r.d(n,{AnimationPlayer:function(){return v}});var t=r(298),e=r.n(t),o=r(365),i=r.n(o),a=r(156),s=r.n(a),c=r(499),u=r.n(c),l=r(173),f=r.n(l),p=r(506),h={};for(var d in p)["default","AnimationPlayer"].indexOf(d)<0&&(h[d]=function(t){return p[t]}.bind(0,d));r.d(n,h);var y=function(){function t(){s()(this,t)}var r;return u()(t,null,[{key:"loadImages",value:(r=i()(e()().mark((function t(r){var n,o=this;return e()().wrap((function(t){for(;;)switch(t.prev=t.next){case 0:if(Array.isArray(r)&&0!==r.length){t.next=2;break}return t.abrupt("return",Promise.resolve());case 2:return n=r.map((function(t,e){if(!t.startsWith("http"))return Promise.resolve();if(o.imageCache.has(t))return console.log("aminofx:  ✅ 图片 ".concat(e+1," 已缓存: ").concat(t)),Promise.resolve();if(o.loadingQueue.has(t))return o.loadingQueue.get(t);var r=new Promise((function(r){var n=new Image;n.onload=function(){o.imageCache.set(t,!0),o.loadingQueue.delete(t),console.log("aminofx:  ✅ 图片 ".concat(e+1," 加载成功: ").concat(t)),"function"==typeof n.decode?n.decode().then((function(){console.log("aminofx:  🎨 图片 ".concat(e+1," 解码完成: ").concat(t)),r()})).catch((function(){console.log("aminofx:  ⚠️ 图片 ".concat(e+1," decode失败，使用fallback: ").concat(t)),r()})):(console.log("aminofx:  📱 图片 ".concat(e+1," 使用兼容模式: ").concat(t)),r())},n.src=t,n.onerror=function(){o.loadingQueue.delete(t),console.error("aminofx:  ❌ 图片 ".concat(e+1," 加载失败: ").concat(t)),r()}}));return o.loadingQueue.set(t,r),r})),t.prev=3,t.next=6,Promise.all(n);case 6:console.log("aminofx:  🎉 所有图片资源加载完成"),t.next=12;break;case 9:t.prev=9,t.t0=t.catch(3),console.error("aminofx:  ❌ 图片加载过程中出现错误:",t.t0);case 12:case"end":return t.stop()}}),t,null,[[3,9]])}))),function(t){return r.apply(this,arguments)})}]),t}();f()(y,"imageCache",new Map),f()(y,"loadingQueue",new Map);var v=function(){function t(e,r){s()(this,t),f()(this,"container",void 0),f()(this,"options",void 0),f()(this,"isReady",!1),f()(this,"readyPromise",null),f()(this,"loopTimerId",null),this.container=e,this.options=r,this.init()}var r,n,o;return u()(t,[{key:"init",value:(o=i()(e()().mark((function t(){var r,n,o,i,a;return e()().wrap((function(t){for(;;)switch(t.prev=t.next){case 0:if(Object.assign(this.container.style,{display:"none",width:"100vw",height:"100vh",overflow:"hidden",alignItems:this.options.alignItems||"center",justifyContent:"center",backgroundColor:"rgba(0, 0, 0, 0.85)",backdropFilter:"blur(10px)"}),!this.options.jsonSchema){t.next=5;break}this.container.innerHTML=this.replacePlaceholders(this.options.jsonSchema.content),t.next=17;break;case 5:if(null===(r=this.options)||void 0===r||!r.jsonUrl){t.next=16;break}return t.next=8,fetch(null===(n=this.options)||void 0===n?void 0:n.jsonUrl);case 8:return i=t.sent,t.next=11,i.json();case 11:a=t.sent,this.options.jsonSchema=a,this.container.innerHTML=this.replacePlaceholders((null===(o=this.options.jsonSchema)||void 0===o?void 0:o.content)||""),t.next=17;break;case 16:throw new Error("没有提供jsonSchema或jsonUrl");case 17:return t.next=19,this.ready();case 19:case"end":return t.stop()}}),t,this)}))),function(){return o.apply(this,arguments)})},{key:"replacePlaceholders",value:function(t){var e=this;return this.options.dynamicData&&t?t.replace(/\{\{(\w+)\}\}|\$\{(\w+)\}/g,(function(t,r,n){var o,i=r||n;return void 0!==(null===(o=e.options.dynamicData)||void 0===o?void 0:o[i])?String(e.options.dynamicData[i]):t})):t}},{key:"handleLoop",value:function(){var t,e,r,n=this;this.options.autoLoop&&Number(null===(t=this.options.jsonSchema)||void 0===t?void 0:t.duration)&&(null!==this.loopTimerId&&(clearTimeout(this.loopTimerId),this.loopTimerId=null,console.log("aminofx:  🧹 清理旧的循环定时器")),this.loopTimerId=window.setTimeout((function(){n.container.style.display="none",window.setTimeout((function(){n.loopTimerId=null,n.play()}),100)}),Number(null===(e=this.options.jsonSchema)||void 0===e?void 0:e.duration)),console.log("aminofx:  🔄 启动循环定时器，时长: ".concat(null===(r=this.options.jsonSchema)||void 0===r?void 0:r.duration,"ms")))}},{key:"ready",value:(n=i()(e()().mark((function t(){var r=this;return e()().wrap((function(t){for(;;)switch(t.prev=t.next){case 0:if(!this.isReady){t.next=3;break}return console.log("aminofx:  ✅ 动画已准备就绪，直接返回"),t.abrupt("return",Promise.resolve());case 3:if(!this.readyPromise){t.next=6;break}return console.log("aminofx:  ⏳ 正在准备中，等待现有Promise..."),t.abrupt("return",this.readyPromise);case 6:return this.readyPromise=new Promise(function(){var t=i()(e()().mark((function t(n){return e()().wrap((function(t){for(;;)switch(t.prev=t.next){case 0:return t.prev=0,t.next=3,y.loadImages(r.options.preloadImgList||[]);case 3:r.isReady=!0,console.log("aminofx:  🎉 动画准备完成，可以开始播放"),t.next=10;break;case 7:t.prev=7,t.t0=t.catch(0),console.error("aminofx:  ❌ 动画准备失败:",t.t0);case 10:n();case 11:case"end":return t.stop()}}),t,null,[[0,7]])})));return function(e){return t.apply(this,arguments)}}()),t.abrupt("return",this.readyPromise);case 8:case"end":return t.stop()}}),t,this)}))),function(){return n.apply(this,arguments)})},{key:"play",value:(r=i()(e()().mark((function t(){return e()().wrap((function(t){for(;;)switch(t.prev=t.next){case 0:if(this.isReady){t.next=4;break}return console.warn("aminofx:  ⚠️ 动画尚未准备就绪，自动调用ready()..."),t.next=4,this.ready();case 4:this.container.style.display="flex",this.options.autoLoop&&null===this.loopTimerId&&this.handleLoop();case 6:case"end":return t.stop()}}),t,this)}))),function(){return r.apply(this,arguments)})},{key:"destroy",value:function(){null!==this.loopTimerId&&(clearTimeout(this.loopTimerId),this.loopTimerId=null,console.log("aminofx:  🧹 销毁时清理循环定时器")),this.container.innerHTML="",this.isReady=!1,this.readyPromise=null,console.log("aminofx:  🗑️ AnimationPlayer 已销毁")}},{key:"updateSchema",value:function(t){this.destroy(),this.options=t,this.init()}}]),t}();function m(t,e){var r=document.getElementById(t);if(!r)throw new Error('Container with id "'.concat(t,'" not found'));var n=document.createElement("div"),o=new v(n,e);return r.appendChild(n),o}n.default=m,window.createCssAnimationPlayer=m}(),n}()}));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yqg/aminofx-css-kit",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "YQG AminoFX CSS animation kit - Core animation utilities and effects",
   "main": "dist/esm/index.js",
   "module": "dist/esm/index.js",

package/src/index.ts

@@ -99,6 +99,17 @@ class AnimationPlayer {
   }
 
   private async init(): Promise<void> {
+    Object.assign(this.container.style, {
+      display: 'none',
+      width: '100vw',
+      height: '100vh',
+      overflow: 'hidden',
+      alignItems: this.options.alignItems || 'center',
+      justifyContent: 'center',
+      backgroundColor: 'rgba(0, 0, 0, 0.85)',
+      backdropFilter: 'blur(10px)',
+    });
+
     if (this.options.jsonSchema) {
       this.container.innerHTML = this.replacePlaceholders(
         this.options.jsonSchema.content,
@@ -142,7 +153,7 @@ class AnimationPlayer {
   }
 
   private handleLoop() {
-    if (!this.options.autoLoop || !this.options.jsonSchema?.duration) {
+    if (!this.options.autoLoop || !Number(this.options.jsonSchema?.duration)) {
       return;
     }
 
@@ -160,7 +171,7 @@ class AnimationPlayer {
         this.loopTimerId = null;
         this.play();
       }, 100);
-    }, this.options.jsonSchema?.duration);
+    }, Number(this.options.jsonSchema?.duration));
 
     console.log(
       `aminofx:  🔄 启动循环定时器，时长: ${this.options.jsonSchema?.duration}ms`,
@@ -223,16 +234,7 @@ class AnimationPlayer {
   }
 
   updateSchema(options: IPlayerOptions): void {
-    // 清理旧的循环定时器
-    if (this.loopTimerId !== null) {
-      clearTimeout(this.loopTimerId);
-      this.loopTimerId = null;
-      console.log('aminofx:  🧹 更新Schema时清理循环定时器');
-    }
-
-    // 重置状态
-    this.isReady = false;
-    this.readyPromise = null;
+    this.destroy();
 
     // 更新配置并重新初始化
     this.options = options;
@@ -252,17 +254,6 @@ function createCssAnimationPlayer(
   // 固定比例画布容器，通过设置container适配不同比例机型
   const canvasContainer = document.createElement('div');
 
-  Object.assign(canvasContainer.style, {
-    display: 'none',
-    width: '100vw',
-    height: '100vh',
-    overflow: 'hidden',
-    alignItems: options.alignItems || 'center',
-    justifyContent: 'center',
-    backgroundColor: 'rgba(0, 0, 0, 0.85)',
-    backdropFilter: 'blur(10px)',
-  });
-
   const instance = new AnimationPlayer(canvasContainer, options);
 
   container.appendChild(canvasContainer);