lyb-pixi-js 1.3.6 → 1.3.8

package/Components/Base/LibPixiSpine.d.ts

@@ -1,6 +1,5 @@
 import { type Container } from "pixi.js";
 import { Spine } from "@pixi-spine/runtime-3.8";
-import "pixi-spine";
 export interface OnUpdateParams {
     x: number;
     y: number;

package/Components/Base/LibPixiSpine.js

@@ -1,7 +1,6 @@
 import { Assets, Ticker } from "pixi.js";
 import { Spine } from "@pixi-spine/runtime-3.8";
 import gsap from "gsap";
-import "pixi-spine";
 /** @description 自定义 Spine 动画
  * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiSpine-动画
  */
@@ -74,10 +73,14 @@ export class LibPixiSpine extends Spine {
     /** @description 销毁动画及挂点 */
     destroyAll() {
         Ticker.system.remove(this._loopFn);
-        this.destroy();
+        this.destroy({ children: true });
     }
     /** @description 更新渲染 */
     _loop() {
+        if (this.destroyed) {
+            Ticker.system.remove(this._loopFn);
+            return;
+        }
         this.update(Ticker.system.deltaMS / 1000);
         this._updateFollowPoint();
     }

package/Components/Custom/LibPixiScrollNum.d.ts

@@ -1,5 +1,5 @@
 import { Container } from "pixi.js";
-import { LibPixiContainer } from '../Base/LibPixiContainer';
+import { LibPixiContainer } from "../Base/LibPixiContainer";
 export interface LibPixiScrollNumParams {
     /** 滚动区域宽度 */
     width: number;
@@ -53,10 +53,22 @@ export declare class LibPixiScrollNum extends LibPixiContainer {
      * @param animate 是否需要过渡动画
      */
     slideTo(index: number, animate?: boolean): void;
+    /** @description 设置滚动景深
+     * @param containerList 元素列表
+     * @param y 拖动Y坐标
+     * @param startY 内部将y - startY进行计算
+     */
+    setDepth(containerList: Container[], y: number, startY?: number): void;
     /** @description 开始拖动 */
     private _onDragStart;
     /** @description 拖动中 */
     private _onDragMove;
     /** @description 结束拖动 */
     private _onDragEnd;
+    /** @description 线性插值
+     * @param a1 当 t = 0 时，返回 a1
+     * @param a2 当 t = 1 时，返回 a2
+     * @param t 插值比例，取值范围 0~1
+     */
+    private lerp;
 }

package/Components/Custom/LibPixiScrollNum.js

@@ -1,6 +1,6 @@
 import { Graphics } from "pixi.js";
 import gsap from "gsap";
-import { LibPixiContainer } from '../Base/LibPixiContainer';
+import { LibPixiContainer } from "../Base/LibPixiContainer";
 /** @description 通过鼠标或手指拖动数字列选择数字
  * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiScrollNum-数字滑动
  */
@@ -99,6 +99,35 @@ export class LibPixiScrollNum extends LibPixiContainer {
         }
         (_a = this._slideCallback) === null || _a === void 0 ? void 0 : _a.call(this, this._currentIndex);
     }
+    /** @description 设置滚动景深
+     * @param containerList 元素列表
+     * @param y 拖动Y坐标
+     * @param startY 内部将y - startY进行计算
+     */
+    setDepth(containerList, y, startY = 0) {
+        const Y = y - startY;
+        const idx = Math.floor(Math.abs(Y) / 70);
+        const t = (Math.abs(Y) % 70) / 70;
+        const prevIdx = idx - 1;
+        const nextIdx = idx + 1;
+        const nextIdx2 = idx + 2;
+        const curItem = containerList[idx];
+        curItem.alpha = this.lerp(0.5, 1, 1 - t);
+        curItem.scale.y = this.lerp(0.85, 1, 1 - t);
+        if (nextIdx < containerList.length) {
+            const nextItem = containerList[nextIdx];
+            nextItem.alpha = this.lerp(0.5, 1, t);
+            nextItem.scale.y = this.lerp(0.85, 1, t);
+        }
+        if (nextIdx2 < containerList.length) {
+            const nextItem = containerList[nextIdx2];
+            nextItem.alpha = this.lerp(0.1, 0.5, t);
+        }
+        if (prevIdx >= 0) {
+            const prevItem = containerList[prevIdx];
+            prevItem.alpha = this.lerp(0.1, 0.5, 1 - t);
+        }
+    }
     /** @description 开始拖动 */
     _onDragStart(event) {
         this._isDragging = true;
@@ -152,4 +181,12 @@ export class LibPixiScrollNum extends LibPixiContainer {
         // 执行滑动到目标页码
         this.slideTo(this._currentIndex);
     }
+    /** @description 线性插值
+     * @param a1 当 t = 0 时，返回 a1
+     * @param a2 当 t = 1 时，返回 a2
+     * @param t 插值比例，取值范围 0~1
+     */
+    lerp(a1, a2, t) {
+        return a1 * (1 - t) + a2 * t;
+    }
 }