lyb-pixi-js 1.6.2 → 1.7.1

package/Components/Base/LibPixiParticleMove.d.ts

@@ -1,8 +1,7 @@
 import { Container } from "pixi.js";
-import { type EmitterConfigV3 } from "@pixi/particle-emitter";
 export interface LibPixiParticleMoveParams {
     /** 粒子JSON资源 */
-    json: EmitterConfigV3;
+    container: Container;
     /** 运动时长 */
     duration: number;
     /** 粒子开始位置 */
@@ -26,6 +25,66 @@ export interface LibPixiParticleMoveParams {
     showControl?: boolean;
     /** 是否循环，调试使用 */
     loop?: boolean;
+    /** 是否启用粒子容器 */
+    enableParticleContainer?: boolean;
+    /** 粒子配置 */
+    particleConfig: {
+        /** 随机时长 */
+        lifetime: {
+            /** 最小时长 */
+            min: number;
+            /** 最大时长 */
+            max: number;
+        };
+        /** 混合模式 */
+        blendMode?: string;
+        /** 频率，秒/个 */
+        frequency?: number;
+        /** 透明度变化 */
+        alpha?: {
+            /** 开始透明度 */
+            start: number;
+            /** 结束透明度 */
+            end: number;
+        };
+        /** 颜色变化 */
+        color?: {
+            /** 开始颜色 */
+            start: string;
+            /** 结束颜色 */
+            end: string;
+        };
+        /** 随机缩放变化 */
+        scale?: {
+            /** 最小 */
+            start: number;
+            /** 最大 */
+            end: number;
+        };
+        /** 随机偏移角度变化 */
+        rotation?: {
+            /** 最小角度 */
+            min: number;
+            /** 最大角度 */
+            max: number;
+        };
+        /** 随机自身旋转角度变化 */
+        rotate?: {
+            /** 最小角度 */
+            min: number;
+            /** 最大角度 */
+            max: number;
+        };
+        /** 移动速度，像素 */
+        speed?: {
+            /** 开始速度，不能为0，可无限接近0 */
+            start: number;
+            /** 结束速度，开始速度会衰减到结束速度 */
+            end: number;
+        };
+    };
+    /** 头部粒子到达终点后触发，可在此设置隐藏动画，隐藏动画结束后调用 destroy 参数进行销毁 */
+    onDestroy?: (destroy: () => void) => void;
 }
 /** @description 利用贝塞尔曲线实现粒子移动
  * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiParticleMove-粒子容器
@@ -33,7 +92,10 @@ export interface LibPixiParticleMoveParams {
 export declare class LibPixiParticleMove extends Container {
     private _particleContainer;
     constructor(params: LibPixiParticleMoveParams);
+    /** @description 创建贝塞尔曲线路径点组 */
     private _createBezierPoints;
+    /** @description 计算贝塞尔曲线单个路径衔接点 */
     private _multiPointBezier;
+    /** @description 计算组合数 */
     private _binomial;
 }

package/Components/Base/LibPixiParticleMove.js

@@ -1,5 +1,5 @@
 import { Container, ParticleContainer, Ticker } from "pixi.js";
-import { Emitter } from "@pixi/particle-emitter";
+import { Emitter, upgradeConfig } from "@pixi/particle-emitter";
 import gsap from "gsap";
 import { LibPixiText } from "./LibPixiText";
 /** @description 利用贝塞尔曲线实现粒子移动
@@ -8,11 +8,32 @@ import { LibPixiText } from "./LibPixiText";
 export class LibPixiParticleMove extends Container {
     constructor(params) {
         super();
-        const { start, control, end, json, duration, ease = "power1.out", showControl = false, loop = false, } = params;
-        this._particleContainer = new ParticleContainer();
+        const { start, control, end, container, duration, ease = "power1.out", showControl = false, loop = false, enableParticleContainer = false, particleConfig, onDestroy, } = params;
+        const config = upgradeConfig({
+            lifetime: particleConfig.lifetime,
+            blendMode: particleConfig.blendMode,
+            frequency: particleConfig.frequency || 0.01,
+            maxParticles: 1 / (particleConfig.frequency || 0.01),
+            alpha: particleConfig.alpha,
+            scale: particleConfig.scale,
+            color: particleConfig.color,
+            startRotation: particleConfig.rotation,
+            rotationSpeed: particleConfig.rotate,
+            speed: particleConfig.speed,
+            pos: {
+                x: 0,
+                y: 0,
+            },
+        }, [container]);
+        if (enableParticleContainer) {
+            this._particleContainer = new ParticleContainer();
+        }
+        else {
+            this._particleContainer = new Container();
+        }
         this.addChild(this._particleContainer);
         // 初始化粒子发射器
-        const flyParticle = new Emitter(this._particleContainer, json);
+        const flyParticle = new Emitter(this._particleContainer, config);
         // 创建贝塞尔曲线的路径
         const path = this._createBezierPoints([start, ...control, end], 100, showControl);
         // 用来控制路径动画的对象
@@ -21,6 +42,7 @@ export class LibPixiParticleMove extends Container {
             duration,
             pathThrough: path.length - 1,
             repeat: loop ? -1 : 0,
+            repeatDelay: loop ? 1 : 0,
             ease,
             onStart: () => {
                 flyParticle.emit = true;
@@ -31,23 +53,33 @@ export class LibPixiParticleMove extends Container {
                 flyParticle.updateOwnerPos(p.x, p.y);
             },
             onComplete: () => {
-                gsap.to(this, {
-                    alpha: 0,
-                    duration: 0.5,
-                    onComplete: () => {
+                if (onDestroy) {
+                    onDestroy(() => {
                         flyParticle.emit = false;
                         ticker.destroy();
-                        this.removeFromParent();
-                    },
-                });
+                        this.destroy({ children: true });
+                    });
+                }
+                else {
+                    gsap.to(this, {
+                        alpha: 0,
+                        duration: 1,
+                        onComplete: () => {
+                            flyParticle.emit = false;
+                            ticker.destroy();
+                            this.destroy({ children: true });
+                        },
+                    });
+                }
             },
         });
         const ticker = new Ticker();
         ticker.add(() => {
-            flyParticle.update(1 / 75);
+            flyParticle.update(ticker.deltaMS / 1000);
         });
         ticker.start();
     }
+    /** @description 创建贝塞尔曲线路径点组 */
     _createBezierPoints(anchorPoints, pointsAmount, showControl) {
         const points = [];
         // 渲染控制点
@@ -56,7 +88,10 @@ export class LibPixiParticleMove extends Container {
                 //创建一个小圆点
                 const text = new LibPixiText({
                     text: index + 1,
-                    fontSize: 16,
+                    fontSize: 20,
+                    stroke: true,
+                    strokeColor: "#000",
+                    strokeThickness: 1,
                 });
                 text.position.set(item.x, item.y);
                 this.addChild(text);
@@ -69,6 +104,7 @@ export class LibPixiParticleMove extends Container {
         }
         return points;
     }
+    /** @description 计算贝塞尔曲线单个路径衔接点 */
     _multiPointBezier(points, t) {
         const len = points.length;
         let x = 0, y = 0;
@@ -88,6 +124,7 @@ export class LibPixiParticleMove extends Container {
         }
         return { x, y };
     }
+    /** @description 计算组合数 */
     _binomial(n, k) {
         if (k === 0 || k === n)
             return 1;

package/Components/Base/LibPixiRectBgColor.d.ts

@@ -1,15 +1,11 @@
 import { Graphics } from "pixi.js";
 export interface LibPixiRectBgColorParams {
     /** 宽度 */
-    width?: number;
+    width: number;
     /** 高度 */
-    height?: number;
+    height: number;
     /** 背景颜色 */
     bgColor?: string | number;
-    /** x轴偏移 */
-    x?: number;
-    /** y轴偏移 */
-    y?: number;
     /** 透明度 */
     alpha?: number;
     /** 圆角半径 */

package/Components/Base/LibPixiRectBgColor.js

@@ -18,9 +18,7 @@ export class LibPixiRectBgColor extends Graphics {
         this.borderColor = "black";
         /** 背景色 */
         this.bgAlpha = 1;
-        const { x = 0, y = 0, width = 0, height = 0, bgColor = "#fff", alpha = 1, radius = 0, borderWidth = 0, borderColor = "black", enableTint = true, } = options;
-        this.x = x;
-        this.y = y;
+        const { width, height, bgColor = "#fff", alpha = 1, radius = 0, borderWidth = 0, borderColor = "black", enableTint = true, } = options;
         this.bgAlpha = alpha;
         this.radius = radius;
         this.enableTint = enableTint;

package/Components/Custom/LibPixiSlider.d.ts

@@ -7,6 +7,8 @@ interface LibPixiSliderParams {
     height: number;
     /** 滑动页列表 */
     slideList: Container[];
+    /** 是否启用循环滑动 */
+    loop?: boolean;
     /** 是否启用景深 */
     enableDepth?: boolean;
     /** 景深透明度 */
@@ -26,6 +28,8 @@ export declare class LibPixiSlider extends LibPixiContainer {
     private _slideWidth;
     /** 滑动区域高度 */
     private _slideHeight;
+    /** 是否启用循环 */
+    private _loop;
     /** 记录拖动开始时的X坐标 */
     private _startX;
     /** 偏移量 */

package/Components/Custom/LibPixiSlider.js

@@ -1,8 +1,9 @@
 import { Container } from "pixi.js";
 import gsap from "gsap";
+import { LibJsLerp } from "lyb-js/Math/LibJsLerp.js";
 import { libPixiOverflowHidden } from "../../Utils/LibPixiOverflowHidden";
 import { LibPixiContainer } from "../Base/LibPixiContainer";
-import { LibJsLerp } from 'lyb-js/Math/LibJsLerp';
+import { libPixiEvent } from "../../Utils/LibPixiEvent";
 /** @description 类似轮播图，但是不会自动轮播
  * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiSlider-横向滑动图
  */
@@ -14,7 +15,7 @@ export class LibPixiSlider extends LibPixiContainer {
      * @param slideCallback 滑动结束回调
      */
     constructor(params) {
-        const { width, height, slideList, slideCallback, enableDepth = false, depthAlpha = 0.5, depthScale = 0.5, } = params;
+        const { width, height, slideList, slideCallback, loop = false, enableDepth = false, depthAlpha = 0.5, depthScale = 0.5, } = params;
         super(width, height);
         /** 当前幻灯片索引 */
         this._currentIndex = 0;
@@ -22,6 +23,8 @@ export class LibPixiSlider extends LibPixiContainer {
         this._slideWidth = 0;
         /** 滑动区域高度 */
         this._slideHeight = 0;
+        /** 是否启用循环 */
+        this._loop = false;
         /** 记录拖动开始时的X坐标 */
         this._startX = 0;
         /** 偏移量 */
@@ -36,6 +39,7 @@ export class LibPixiSlider extends LibPixiContainer {
         this._slideArea = new Container();
         this._slideWidth = width;
         this._slideHeight = height;
+        this._loop = loop;
         this._slideList = slideList;
         this._enableDepth = enableDepth;
         this._depthAlpha = depthAlpha;
@@ -49,10 +53,7 @@ export class LibPixiSlider extends LibPixiContainer {
             item.pivot.set(this._slideWidth / 2, this._slideHeight / 2);
         });
         this.addChild(this._slideArea);
-        // 监听拖动事件
-        this.eventMode = "static";
-        this.cursor = "pointer";
-        this.on("pointerdown", this._onDragStart);
+        libPixiEvent(this, "pointerdown", this._onDragStart.bind(this));
         window.addEventListener("pointermove", this._onDragMove.bind(this));
         window.addEventListener("pointerup", this._onDragEnd.bind(this));
     }
@@ -68,39 +69,36 @@ export class LibPixiSlider extends LibPixiContainer {
      * @param index 索引
      */
     _slideTo(index) {
-        if (index < 0) {
-            // 回弹到第一张
-            gsap.to(this._slideArea, {
-                x: 0,
-                duration: 0.25,
-                onUpdate: () => {
-                    this._setDepth();
-                },
-            });
-            this._currentIndex = 0;
-        }
-        else if (index > this._pageNum) {
-            // 回弹到最后一张
-            gsap.to(this._slideArea, {
-                x: -this._pageNum * this._slideWidth,
-                duration: 0.5,
-                onUpdate: () => {
-                    this._setDepth();
-                },
-            });
-            this._currentIndex = this._pageNum;
+        let x = 0;
+        if (this._loop) {
+            this._currentIndex =
+                (index + this._slideList.length) % this._slideList.length;
+            x = -this._currentIndex * this._slideWidth;
         }
         else {
-            // 正常滑动
-            this._currentIndex = index;
-            gsap.to(this._slideArea, {
-                x: -this._currentIndex * this._slideWidth,
-                duration: 0.25,
-                onUpdate: () => {
-                    this._setDepth();
-                },
-            });
+            if (index < 0) {
+                // 回弹到第一张
+                x = 0;
+                this._currentIndex = 0;
+            }
+            else if (index > this._pageNum) {
+                // 回弹到最后一张
+                x = -this._pageNum * this._slideWidth;
+                this._currentIndex = this._pageNum;
+            }
+            else {
+                // 正常滑动
+                x = -index * this._slideWidth;
+                this._currentIndex = index;
+            }
         }
+        gsap.to(this._slideArea, {
+            x,
+            duration: 0.25,
+            onUpdate: () => {
+                this._setDepth();
+            },
+        });
         this.slideCallback(this._currentIndex, this._pageNum);
     }
     /** @description 开始拖动 */

package/README.md

@@ -114,6 +114,8 @@ app.stage.addChild(box);
 
 \- [LibPixiTable-数字表格](#LibPixiTable-数字表格)
 
+\- [LibPixiParticleMove-粒子移动特效](#LibPixiParticleMove-粒子移动特效)
+
 ### 方法
 
 \- [LibPixiAudio-音频播放器](#LibPixiAudio-音频播放器)
@@ -153,12 +155,39 @@ app.stage.addChild(box);
 > 自定义文本类
 
 ```ts
-const text = new LibPixiJs.Base.LibPixiText({
-  text: "Hello World!",
-  fontSize: 50,
-  fontColor: "red",
-});
+const text = new LibPixiJs.Base.LibPixiText(LibPixiTextParams);
 this.addChild(text);
+
+interface LibPixiTextParams {
+  /** 文本内容 */
+  text: string | number;
+  /**  字体大小 */
+  fontSize?: number;
+  /** 字体颜色 */
+  fontColor?: any;
+  /** 是否描边 */
+  stroke?: boolean;
+  /** 描边颜色 */
+  strokeColor?: string | number;
+  /** 描边宽度 */
+  strokeThickness?: number;
+  /** 字体样式 */
+  fontFamily?: string;
+  /** 字体粗细 */
+  fontWeight?: TextStyleFontWeight;
+  /** 是否换行 */
+  wordWrap?: boolean;
+  /** 换行宽度 */
+  wordWrapWidth?: number;
+  /** 行高 */
+  lineHeight?: number;
+  /** 对齐方式 */
+  align?: TextStyleAlign;
+  /** 缩进，单位为字数 */
+  indent?: number;
+  /** 阴影-颜色 角度 模糊度 阴影距离 */
+  shadow?: [string, number, number, number];
+}
 ```
 
 ### LibPixiBitText-位图
@@ -166,6 +195,11 @@ this.addChild(text);
 > 自定义位图文本
 
 ```ts
+/**
+* @param fontName 字体名称
+* @param defaultFontSize 默认字体大小
+*/
+
 //所有文字使用同一个字体大小
 const font = new LibPixiBitText("FontName", 16);
 const fontText = font.createText("10");
@@ -184,6 +218,12 @@ this.addChild(fontText2);
 > 自定义容器大小及背景色
 
 ```ts
+/**
+* @param width 容器宽度
+* @param height 容器高度
+* @param bgColor 背景色
+* @param overHidden 是否溢出裁剪
+*/
 const box = new LibPixiJs.Base.LibPixiContainer(100, 100, "#fff", true);
 this.addChild(box);
 ```
@@ -193,12 +233,27 @@ this.addChild(box);
 > 自定义矩形背景色
 
 ```ts
-const rect = new LibPixiRectBgColor({
-  width: 100,
-  height: 100,
-  bgColor: "red",
-});
+const rect = new LibPixiRectBgColor(LibPixiRectBgColorParams);
 this.addChild(rect);
+
+interface LibPixiRectBgColorParams {
+  /** 宽度 */
+  width: number;
+  /** 高度 */
+  height: number;
+  /** 背景颜色 */
+  bgColor?: string | number;
+  /** 透明度 */
+  alpha?: number;
+  /** 圆角半径 */
+  radius?: number | number[];
+  /** 边框宽度 */
+  borderWidth?: number;
+  /** 边框颜色 */
+  borderColor?: string;
+  /** 是否启用变色功能 */
+  enableTint?: boolean;
+}
 ```
 
 ### LibPixiSpine-动画
@@ -233,6 +288,31 @@ this.bgSpine = new LibPixiSpine("spine_buyfree", {
     },
   ],
 });
+
+interface OnUpdateParams {
+  x: number;
+  y: number;
+  rotate: number;
+  scaleX: number;
+  scaleY: number;
+}
+interface LibPixiSpineParams {
+  /** 默认是否可见 */
+  visible?: boolean;
+  /** 挂点列表 */
+  followPointList?: {
+    /** 挂点名称 */
+    boneName: string;
+    /** 跟随的精灵或容器 */
+    follow: Container;
+    /** 是否启用角度 */
+    angleFollow?: boolean;
+    /** 是否启用缩放 */
+    scaleFollow?: boolean;
+    /** 更新回调,不传则接受内置挂点更新 */
+    onUpdate?: (config: OnUpdateParams) => void;
+  }[];
+}
 ```
 
 ### LibPixiParticleMove-粒子容器
@@ -240,19 +320,139 @@ this.bgSpine = new LibPixiSpine("spine_buyfree", {
 > 利用贝塞尔曲线实现粒子移动
 
 ```ts
-const libPixiParticleMove = new LibPixiJs.Base.LibPixiParticleMove({
-  start: { x: 300, y: 600 },
-  control: [
-    { x: 600, y: 500 },
-    { x: 500, y: 100 },
-  ],
-  end: { x: 0, y: 0 },
-  json: PIXI.Assets.get("fly.json"),
-  duration: 1,
-  showControl: true,
-  ease: "power1.in",
-  loop: true,
-});
+  const libParticleMove = new LibPixiJs.Components.Base.LibPixiParticleMove({
+    start: { x: 0, y: window.innerHeight },
+    control: [
+      { x: 1000, y: 750 },
+      { x: 500, y: 250 },
+    ],
+    end: { x: 0, y: 0 },
+    container: PIXI.Assets.get("fly.png"),
+    duration: 1,
+    showControl: true,
+    ease: "power1.in",
+    particleConfig: {
+      frequency: 0.001,
+      blendMode: "add",
+      lifetime: {
+        min: 0.01,
+        max: 1,
+      },
+      alpha: {
+        start: 1,
+        end: 0,
+      },
+      color: {
+        start: "#fff96c",
+        end: "#ff837f",
+      },
+      scale: {
+        start: 2,
+        end: 3,
+      },
+      rotation: {
+        min: 0,
+        max: 360,
+      },
+      rotate: {
+        min: 0,
+        max: 360,
+      },
+      speed: {
+        start: 0,
+        end: 0,
+      },
+    },
+
+    onDestroy: (destroy) => {
+      gsap.to(libParticleMove, {
+        alpha: 0,
+        onComplete: () => {
+          destroy()
+        }
+      })
+    }
+  });
+  app.stage.addChild(libParticleMove);
+
+export interface LibPixiParticleMoveParams {
+  /** 粒子JSON资源 */
+  container: Container;
+  /** 运动时长 */
+  duration: number;
+  /** 粒子开始位置 */
+  start: { x: number; y: number };
+  /** 粒子控制点 */
+  control: { x: number; y: number }[];
+  /** 粒子结束点 */
+  end: { x: number; y: number };
+  /** 运动曲线 */
+  ease?: gsap.EaseString;
+  /** 是否显示控制点，调试使用 */
+  showControl?: boolean;
+  /** 是否循环，调试使用 */
+  loop?: boolean;
+  /** 是否启用粒子容器 */
+  enableParticleContainer?: boolean;
+  /** 粒子配置 */
+  particleConfig: {
+    /** 随机时长 */
+    lifetime: {
+      /** 最小时长 */
+      min: number;
+      /** 最大时长 */
+      max: number;
+    };
+    /** 混合模式 */
+    blendMode?: string;
+    /** 频率，秒/个 */
+    frequency?: number;
+    /** 透明度变化 */
+    alpha?: {
+      /** 开始透明度 */
+      start: number;
+      /** 结束透明度 */
+      end: number;
+    };
+    /** 颜色变化 */
+    color?: {
+      /** 开始颜色 */
+      start: string;
+      /** 结束颜色 */
+      end: string;
+    };
+    /** 随机缩放变化 */
+    scale?: {
+      /** 最小 */
+      start: number;
+      /** 最大 */
+      end: number;
+    };
+    /** 随机偏移角度变化 */
+    rotation?: {
+      /** 最小角度 */
+      min: number;
+      /** 最大角度 */
+      max: number;
+    };
+    /** 随机自身旋转角度变化 */
+    rotate?: {
+      /** 最小角度 */
+      min: number;
+      /** 最大角度 */
+      max: number;
+    };
+    /** 移动速度，像素 */
+    speed?: {
+      /** 开始速度，不能为0，可无限接近0 */
+      start: number;
+      /** 结束速度，开始速度会衰减到结束速度 */
+      end: number;
+    };
+  };
+  /** 头部粒子到达终点后触发，可在此设置隐藏动画，隐藏动画结束后调用 destroy 参数进行销毁 */
+  onDestroy?: (destroy: () => void) => void;
+}
 ```
 
 ## Custom-定制

package/Utils/LibPixiEvent.d.ts

@@ -12,5 +12,6 @@ export interface LibPixiEventParams {
  * @param eventName 事件名称
  * @param callback 回调函数
  * @returns 停止监听
+ * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiEvent-事件注册
  */
 export declare const libPixiEvent: (v: Container, eventName: keyof DisplayObjectEvents, callback: (event: FederatedPointerEvent) => void, params?: LibPixiEventParams) => () => void;

package/Utils/LibPixiEvent.js

@@ -18,6 +18,7 @@ const debounceImmediate = (func, wait) => {
  * @param eventName 事件名称
  * @param callback 回调函数
  * @returns 停止监听
+ * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiEvent-事件注册
  */
 export const libPixiEvent = (v, eventName, callback, params = {}) => {
     const { once = false, debounce = false, debounceTime = 1000 } = params;