@yqg/aminofx-css-kit 1.0.0

package/src/index.ts

@@ -0,0 +1,276 @@
+import type { IPlayerOptions } from './type';
+
+// 扩展全局 Window 接口
+declare global {
+  interface Window {
+    createCssAnimationPlayer: typeof createCssAnimationPlayer;
+  }
+}
+
+// 资源加载器
+class ResourceLoader {
+  private static imageCache = new Map<string, boolean>();
+  private static loadingQueue = new Map<string, Promise<void>>();
+
+  static async loadImages(urls: string[]): Promise<void> {
+    if (!Array.isArray(urls) || urls.length === 0) {
+      return Promise.resolve();
+    }
+
+    const loadPromises = urls.map((url, index) => {
+      if (!url.startsWith('http')) {
+        return Promise.resolve();
+      }
+
+      if (this.imageCache.has(url)) {
+        console.log(`aminofx:  ✅ 图片 ${index + 1} 已缓存: ${url}`);
+        return Promise.resolve();
+      }
+
+      if (this.loadingQueue.has(url)) {
+        return this.loadingQueue.get(url)!;
+      }
+
+      const loadPromise = new Promise<void>((resolve) => {
+        const img = new Image();
+
+        img.onload = () => {
+          this.imageCache.set(url, true);
+          this.loadingQueue.delete(url);
+          console.log(`aminofx:  ✅ 图片 ${index + 1} 加载成功: ${url}`);
+
+          // 确保图片资源在加载后能够被浏览器解码（decode），以提升渲染性能和避免闪烁。
+          // 如果浏览器支持 Image.decode 方法，则异步等待 decode 完成后再进行后续处理；
+          // decode 失败时也会继续后续流程，并做降级提示。
+          // 对于不支持 decode 的环境，则直接进入兼容处理流程，保证流程不中断。
+          if (typeof img.decode === 'function') {
+            img
+              .decode()
+              .then(() => {
+                console.log(`aminofx:  🎨 图片 ${index + 1} 解码完成: ${url}`);
+                resolve();
+              })
+              .catch(() => {
+                console.log(
+                  `aminofx:  ⚠️ 图片 ${index + 1} decode失败，使用fallback: ${url}`,
+                );
+                resolve();
+              });
+          } else {
+            console.log(`aminofx:  📱 图片 ${index + 1} 使用兼容模式: ${url}`);
+            resolve();
+          }
+        };
+
+        img.src = url;
+
+        img.onerror = () => {
+          this.loadingQueue.delete(url);
+          console.error(`aminofx:  ❌ 图片 ${index + 1} 加载失败: ${url}`);
+          // 失败时也要继续后续流程，保证流程不中断。后续图片会再加载一次
+          resolve();
+        };
+      });
+
+      this.loadingQueue.set(url, loadPromise);
+      return loadPromise;
+    });
+
+    try {
+      await Promise.all(loadPromises);
+      console.log('aminofx:  🎉 所有图片资源加载完成');
+    } catch (error) {
+      console.error('aminofx:  ❌ 图片加载过程中出现错误:', error);
+    }
+  }
+}
+
+class AnimationPlayer {
+  private container: HTMLElement;
+  private options: IPlayerOptions;
+  private isReady = false;
+  private readyPromise: Promise<void> | null = null;
+  private loopTimerId: number | null = null; // 保存定时器ID，用于清理
+
+  constructor(container: HTMLElement, options: IPlayerOptions) {
+    this.container = container;
+    this.options = options;
+    this.init();
+  }
+
+  private async init(): Promise<void> {
+    if (this.options.jsonSchema) {
+      this.container.innerHTML = this.replacePlaceholders(
+        this.options.jsonSchema.content,
+      );
+    } else if (this.options?.jsonUrl) {
+      // 通过url拉取资源
+      const response = await fetch(this.options?.jsonUrl);
+      const data = await response.json();
+      this.options.jsonSchema = data;
+      this.container.innerHTML = this.replacePlaceholders(
+        this.options.jsonSchema?.content || '',
+      );
+    } else {
+      throw new Error('没有提供jsonSchema或jsonUrl');
+    }
+    await this.ready();
+  }
+
+  /**
+   * 高性能占位符替换方法
+   * 支持格式：{{key}} 或 ${key}
+   * @param content - 需要替换的内容
+   * @returns 替换后的内容
+   */
+  private replacePlaceholders(content: string): string {
+    if (!this.options.dynamicData || !content) {
+      return content;
+    }
+
+    // 使用正则表达式一次性匹配所有占位符 {{key}} 或 ${key}
+    // 采用惰性匹配，避免贪婪匹配导致的性能问题
+    return content.replace(
+      /\{\{(\w+)\}\}|\$\{(\w+)\}/g,
+      (match, key1, key2) => {
+        const key = key1 || key2;
+        return this.options.dynamicData?.[key] !== undefined
+          ? String(this.options.dynamicData[key])
+          : match;
+      },
+    );
+  }
+
+  private handleLoop() {
+    if (!this.options.autoLoop || !this.options.jsonSchema?.duration) {
+      return;
+    }
+
+    // 清理旧的定时器，防止累积
+    if (this.loopTimerId !== null) {
+      clearTimeout(this.loopTimerId);
+      this.loopTimerId = null;
+      console.log('aminofx:  🧹 清理旧的循环定时器');
+    }
+
+    // 后续根据使用情况看是否调整为监听css动画结束事件
+    this.loopTimerId = window.setTimeout(() => {
+      this.container.style.display = 'none';
+      window.setTimeout(() => {
+        this.loopTimerId = null;
+        this.play();
+      }, 100);
+    }, this.options.jsonSchema?.duration);
+
+    console.log(
+      `aminofx:  🔄 启动循环定时器，时长: ${this.options.jsonSchema?.duration}ms`,
+    );
+  }
+
+  async ready(): Promise<void> {
+    if (this.isReady) {
+      console.log('aminofx:  ✅ 动画已准备就绪，直接返回');
+      return Promise.resolve();
+    }
+
+    if (this.readyPromise) {
+      console.log('aminofx:  ⏳ 正在准备中，等待现有Promise...');
+      return this.readyPromise;
+    }
+
+    this.readyPromise = new Promise<void>(async (resolve) => {
+      try {
+        await ResourceLoader.loadImages(this.options.preloadImgList || []);
+        this.isReady = true; // 设置准备完成状态
+        console.log('aminofx:  🎉 动画准备完成，可以开始播放');
+      } catch (error) {
+        console.error('aminofx:  ❌ 动画准备失败:', error);
+      }
+      resolve();
+    });
+
+    return this.readyPromise;
+  }
+
+  async play(): Promise<void> {
+    if (!this.isReady) {
+      console.warn('aminofx:  ⚠️ 动画尚未准备就绪，自动调用ready()...');
+      await this.ready();
+    }
+
+    this.container.style.display = 'flex';
+
+    // 只在循环未启动时才启动循环，防止重复调用
+    if (this.options.autoLoop && this.loopTimerId === null) {
+      this.handleLoop();
+    }
+  }
+
+  destroy(): void {
+    // 清理循环定时器
+    if (this.loopTimerId !== null) {
+      clearTimeout(this.loopTimerId);
+      this.loopTimerId = null;
+      console.log('aminofx:  🧹 销毁时清理循环定时器');
+    }
+
+    // 重置状态
+    this.container.innerHTML = '';
+    this.isReady = false;
+    this.readyPromise = null;
+
+    console.log('aminofx:  🗑️ 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.options = options;
+    this.init();
+  }
+}
+
+function createCssAnimationPlayer(
+  containerId: string,
+  options: IPlayerOptions,
+): AnimationPlayer {
+  const container = document.getElementById(containerId);
+  if (!container) {
+    throw new Error(`Container with id "${containerId}" not found`);
+  }
+
+  // 固定比例画布容器，通过设置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);
+
+  return instance;
+}
+
+export default createCssAnimationPlayer;
+window.createCssAnimationPlayer = createCssAnimationPlayer;
+export { AnimationPlayer };
+export * from './type';

package/src/type.ts

@@ -0,0 +1,22 @@
+// JSON 类型定义
+type IJsonSchema = {
+  duration: number;
+  content: string;
+};
+
+interface IPlayerOptions {
+  // 弹窗垂直对齐方式
+  alignItems?: 'center' | 'flex-start' | 'flex-end';
+  // 传入 JSON 数据
+  jsonSchema?: IJsonSchema;
+  // 传入 JSON 文件 URL，同时传入 jsonSchema 时，jsonSchema 优先级更高
+  jsonUrl?: string;
+  // 预加载图片列表
+  preloadImgList?: string[];
+  // 是否自动循环播放
+  autoLoop?: boolean;
+  // 动态变量
+  dynamicData?: Record<string, string | number | boolean>;
+}
+
+export type { IPlayerOptions, IJsonSchema };