lyb-pixi-js 1.12.35 → 1.12.36

package/Utils/LibPixiDialogManager/ui/LibPixiDialog.d.ts

@@ -3,10 +3,10 @@ import { LibPixiBaseContainer } from "./LibPixiBaseContainer";
 interface Params {
     /** 是否需要显示黑色背景 */
     needBg?: boolean;
-    /** 竖版初始大小 */
-    size?: number;
     /** 点击蒙版回调 */
     onClickMask?: () => void;
+    /** 竖版缩放大小 */
+    vScale?: number;
 }
 /** @description 弹窗组件 */
 export declare class LibPixiDialog extends LibPixiBaseContainer {
@@ -21,18 +21,20 @@ export declare class LibPixiDialog extends LibPixiBaseContainer {
     private _maskUI;
     /** 内容容器 */
     private _dialogContainer;
-    /** 当前大小 */
-    private _size;
-    /** 竖版初始大小 */
-    private _initialSize;
+    /** 竖版缩放大小 */
+    private _vScale;
+    /** 上一次是否为横版 */
+    private _lastIsH?;
     /** 停止监听窗口 */
     private _offResize?;
     constructor(params?: Params);
     /** @description 设置弹窗内容 */
     setDialogContent(content: Container): void;
-    /** @description 重绘弹窗 */
-    redraw(w: number, h: number): void;
+    /** @description 设置弹窗容器锚点 */
+    updatePivot(): void;
     /** @description 关闭 */
     close(): Promise<void>;
+    /** @description 重绘弹窗 */
+    private _redraw;
 }
 export {};

package/Utils/LibPixiDialogManager/ui/LibPixiDialog.js

@@ -17,10 +17,10 @@ import { LibPixiBaseContainer } from "./LibPixiBaseContainer";
 export class LibPixiDialog extends LibPixiBaseContainer {
     constructor(params) {
         super();
-        /** 当前大小 */
-        this._size = 1;
-        const { size = 1, onClickMask, needBg = true } = params || {};
-        this._initialSize = size;
+        /** 竖版缩放大小 */
+        this._vScale = 1;
+        const { onClickMask, vScale = 1, needBg = true } = params || {};
+        this._vScale = vScale;
         //蒙版
         this._maskUI = new LibPixiRectangle(2700, 1080, "#000");
         this.addChild(this._maskUI);
@@ -41,64 +41,39 @@ export class LibPixiDialog extends LibPixiBaseContainer {
         this.addChild(this._dialogContainer);
         this._dialogContainer.eventMode = "static";
         const resize = new LibJsResizeWatcher(LibPixiDialog.adaptation);
-        this._offResize = resize.on(this.redraw.bind(this));
+        this._offResize = resize.on(this._redraw.bind(this), false);
     }
     /** @description 设置弹窗内容 */
     setDialogContent(content) {
         this._dialogContainer.addChild(content);
-        if (LibPixiDialog.adaptation === "h") {
-            this.redraw(1920, 1080);
-        }
-        else if (LibPixiDialog.adaptation === "v") {
-            this.redraw(1080, 1920);
-        }
-        else {
-            this.redraw(window.innerWidth, window.innerHeight);
-        }
-        this._dialogContainer.scale.set(0);
         this._dialogContainer.alpha = 0;
-        gsap.to(this._maskUI, {
-            duration: LibPixiDialog.durationIn,
-            alpha: LibPixiDialog.bgAlpha,
-        });
-        gsap.to(this._dialogContainer, {
-            duration: LibPixiDialog.durationIn,
-            alpha: 1,
+        requestAnimationFrame(() => {
+            this.updatePivot();
+            if (LibPixiDialog.adaptation === "h") {
+                this._redraw(1920, 1080);
+            }
+            else if (LibPixiDialog.adaptation === "v") {
+                this._redraw(1080, 1920);
+            }
+            else {
+                this._redraw(window.innerWidth, window.innerHeight);
+            }
+            gsap.to(this._maskUI, {
+                duration: LibPixiDialog.durationIn,
+                alpha: LibPixiDialog.bgAlpha,
+            });
+            gsap.to(this._dialogContainer, {
+                duration: LibPixiDialog.durationIn,
+                alpha: 1,
+            });
         });
     }
-    /** @description 重绘弹窗 */
-    redraw(w, h) {
+    /** @description 设置弹窗容器锚点 */
+    updatePivot() {
         const dialogW = this._dialogContainer.width / 2;
         const dialogH = this._dialogContainer.height / 2;
         this._dialogContainer.pivot.set(dialogW, dialogH);
-        const halfW = 1920 / 2;
-        const halfH = 1080 / 2;
-        if (w > h) {
-            this._maskUI.width = 2700;
-            this._maskUI.height = 1080;
-            this._maskUI.x = -(2700 - 1920) / 2;
-            this._dialogContainer.position.set(halfW, halfH);
-            this._size = 1;
-            if (this._dialogContainer.scale.x === this._initialSize) {
-                this._dialogContainer.scale.set(1);
-            }
-        }
-        else {
-            this._maskUI.width = 1080;
-            this._maskUI.height = 2700;
-            this._maskUI.x = 0;
-            this._dialogContainer.position.set(halfH, halfW);
-            this._size = this._initialSize;
-            if (this._dialogContainer.scale.x === 1) {
-                this._dialogContainer.scale.set(this._initialSize);
-            }
-        }
-        gsap.to(this._dialogContainer.scale, {
-            duration: LibPixiDialog.durationIn,
-            ease: "back.out",
-            x: this._size,
-            y: this._size,
-        });
+        console.log(this._dialogContainer.width, this._dialogContainer.height);
     }
     /** @description 关闭 */
     close() {
@@ -124,6 +99,36 @@ export class LibPixiDialog extends LibPixiBaseContainer {
             });
         });
     }
+    /** @description 重绘弹窗 */
+    _redraw(w, h) {
+        if (this._lastIsH === w > h)
+            return;
+        this._lastIsH = w > h;
+        let scale = 0;
+        const halfW = 1920 / 2;
+        const halfH = 1080 / 2;
+        if (w > h) {
+            this._maskUI.width = 2700;
+            this._maskUI.height = 1080;
+            this._maskUI.x = -(2700 - 1920) / 2;
+            this._dialogContainer.position.set(halfW, halfH);
+            scale = 1;
+        }
+        else {
+            this._maskUI.width = 1080;
+            this._maskUI.height = 2700;
+            this._maskUI.x = 0;
+            this._dialogContainer.position.set(halfH, halfW);
+            scale = this._vScale;
+        }
+        this._dialogContainer.scale.set(0);
+        gsap.to(this._dialogContainer.scale, {
+            duration: LibPixiDialog.durationIn,
+            ease: "back.out",
+            x: scale,
+            y: scale,
+        });
+    }
 }
 /** 黑色背景透明度 */
 LibPixiDialog.bgAlpha = 0.5;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lyb-pixi-js",
-  "version": "1.12.35",
+  "version": "1.12.36",
   "description": "自用Pixi.JS方法库",
   "license": "ISC",
   "exports": {