lyb-pixi-js 1.8.9 → 1.8.11

package/Components/Custom/LibPixiScrollContainerY.d.ts

@@ -70,10 +70,14 @@ export declare class LibPixiScrollContainerY extends LibPixiContainer {
     private _limitScrollRange;
     /** @description 更新滚动位置 */
     private _updateScrollbar;
+    /** @description 更新滚动条大小 */
+    private _updateScrollbarSize;
     /** @description 滚动条按下 */
     private _onScrollbarDragStart;
     /** @description 滚动条移动 */
     private _onScrollbarDragMove;
     /** @description 滚动条松开 */
     private _onScrollbarDragEnd;
+    /** @description 滚动结束一秒后隐藏滚动条 */
+    private _hideScrollbar;
 }

package/Components/Custom/LibPixiScrollContainerY.js

@@ -1,8 +1,8 @@
 import { Container } from "pixi.js";
+import { gsap } from "gsap";
+import { LibPixiRectangle } from "../Base/LibPixiRectangle";
 import { libPixiEvent } from "../../Utils/LibPixiEvent";
 import { LibPixiContainer } from "../Base/LibPixiContainer";
-import { LibPixiRectangle } from "../Base/LibPixiRectangle";
-import { gsap } from "gsap";
 /** @description 支持鼠标滚轮滚动、鼠标拖动、手指滑动，支持惯性滚动及回弹
  * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiScrollContainerY-Y 轴滚动容器
  */
@@ -41,13 +41,28 @@ export class LibPixiScrollContainerY extends LibPixiContainer {
         this._scrollbar.x = width - (scrollbarRgiht || scrollbarWidth);
         this.addChild(this._scrollbar);
         this._scrollbar.visible = scrollbar;
-        this._updateScrollbar();
+        this._scrollbar.alpha = 0;
+        this._updateScrollbarSize();
+        //是否已经离开滚动条
         libPixiEvent(this._scrollbar, "pointerdown", this._onScrollbarDragStart.bind(this));
+        libPixiEvent(this._scrollbar, "pointerenter", () => {
+            gsap.killTweensOf(this._scrollbar);
+            this._scrollbar.alpha = 1;
+            this._updateScrollbarSize();
+        });
+        libPixiEvent(this._scrollbar, "pointerleave", () => {
+            gsap.to(this._scrollbar, {
+                duration: 0.5,
+                alpha: 0,
+                delay: 1,
+            });
+        });
         // 添加事件监听
         this.eventMode = "static";
         this.on("pointerdown", this._onDragStart, this);
         libPixiEvent(this, "pointerdown", (event) => {
             this._onDragStart(event);
+            this._updateScrollbarSize();
         });
         libPixiEvent(this, "pointermove", (event) => {
             this._onScrollbarDragMove(event);
@@ -59,6 +74,7 @@ export class LibPixiScrollContainerY extends LibPixiContainer {
         });
         libPixiEvent(this, "wheel", (event) => {
             this._onWheelScroll(event);
+            this._updateScrollbarSize();
         });
         libPixiEvent(this, "pointerupoutside", () => {
             this._onDragEnd();
@@ -75,6 +91,7 @@ export class LibPixiScrollContainerY extends LibPixiContainer {
         this._maskGraphics.drawRect(0, 0, width, height);
         this._maskGraphics.endFill();
         this.setSize(width, height);
+        this._scrollbar.x = width - 50;
     }
     /** @description 返回顶部 */
     scrollToTop() {
@@ -103,8 +120,8 @@ export class LibPixiScrollContainerY extends LibPixiContainer {
             const position = event.getLocalPosition(this);
             const newPosition = position.y - this._startY;
             this._content.y = newPosition;
+            this._updateScrollbar();
         }
-        this._updateScrollbar();
     }
     /** @description 拖动结束 */
     _onDragEnd() {
@@ -122,6 +139,11 @@ export class LibPixiScrollContainerY extends LibPixiContainer {
             this._velocity = 0;
         }
         this._limitScrollRange();
+        gsap.to(this._scrollbar, {
+            duration: 0.5,
+            alpha: 0,
+            delay: 0.25,
+        });
     }
     /** @description 滚轮滚动 */
     _onWheelScroll(event) {
@@ -144,6 +166,9 @@ export class LibPixiScrollContainerY extends LibPixiContainer {
             onUpdate: () => {
                 this._updateScrollbar();
             },
+            onComplete: () => {
+                this._hideScrollbar();
+            },
         });
     }
     /** @description 惯性动画 */
@@ -156,6 +181,9 @@ export class LibPixiScrollContainerY extends LibPixiContainer {
                 this._limitScrollRange();
                 this._updateScrollbar();
             },
+            onComplete: () => {
+                this._hideScrollbar();
+            },
         });
     }
     /** @description 限制滚动范围 */
@@ -169,6 +197,9 @@ export class LibPixiScrollContainerY extends LibPixiContainer {
                 onUpdate: () => {
                     this._updateScrollbar();
                 },
+                onComplete: () => {
+                    this._hideScrollbar();
+                },
             });
         }
         // 如果滚动距离大于内容高度减去遮罩高度
@@ -184,6 +215,9 @@ export class LibPixiScrollContainerY extends LibPixiContainer {
                     onUpdate: () => {
                         this._updateScrollbar();
                     },
+                    onComplete: () => {
+                        this._hideScrollbar();
+                    },
                 });
             }
             // 否则静止不动
@@ -194,29 +228,36 @@ export class LibPixiScrollContainerY extends LibPixiContainer {
                     onUpdate: () => {
                         this._updateScrollbar();
                     },
+                    onComplete: () => {
+                        this._hideScrollbar();
+                    },
                 });
             }
         }
     }
     /** @description 更新滚动位置 */
     _updateScrollbar() {
+        this._scrollbar.alpha = 1;
+        gsap.killTweensOf(this._scrollbar);
         const viewHeight = this._maskGraphics.height;
         const contentHeight = this._content.height;
-        if (contentHeight <= viewHeight) {
-            this._scrollbar.visible = false;
-            return;
-        }
-        this._scrollbar.visible = true;
         const ratio = viewHeight / contentHeight;
         const barHeight = viewHeight * ratio;
         const maxScrollY = contentHeight - viewHeight;
         const scrollY = Math.min(Math.max(-this._content.y, 0), maxScrollY);
         const barY = (scrollY / maxScrollY) * (viewHeight - barHeight);
+        this._scrollbar.y = barY;
+    }
+    /** @description 更新滚动条大小 */
+    _updateScrollbarSize() {
+        const viewHeight = this._maskGraphics.height;
+        const contentHeight = this._content.height;
+        const ratio = viewHeight / contentHeight;
+        const barHeight = viewHeight * ratio;
         this._scrollbar.clear();
         this._scrollbar.beginFill(this._scrollbarColor);
         this._scrollbar.drawRect(0, 0, 10, barHeight);
         this._scrollbar.endFill();
-        this._scrollbar.y = barY;
     }
     /** @description 滚动条按下 */
     _onScrollbarDragStart(event) {
@@ -246,4 +287,12 @@ export class LibPixiScrollContainerY extends LibPixiContainer {
         event.stopPropagation();
         this._scrollbarDragging = false;
     }
+    /** @description 滚动结束一秒后隐藏滚动条 */
+    _hideScrollbar() {
+        gsap.to(this._scrollbar, {
+            duration: 0.5,
+            alpha: 0,
+            delay: 0.25,
+        });
+    }
 }

package/lyb-pixi.js

@@ -49292,16 +49292,30 @@ void main(void)\r
       this._scrollbar.x = width - (scrollbarRgiht || scrollbarWidth);
       this.addChild(this._scrollbar);
       this._scrollbar.visible = scrollbar;
-      this._updateScrollbar();
+      this._scrollbar.alpha = 0;
+      this._updateScrollbarSize();
       libPixiEvent(
         this._scrollbar,
         "pointerdown",
         this._onScrollbarDragStart.bind(this)
       );
+      libPixiEvent(this._scrollbar, "pointerenter", () => {
+        gsapWithCSS.killTweensOf(this._scrollbar);
+        this._scrollbar.alpha = 1;
+        this._updateScrollbarSize();
+      });
+      libPixiEvent(this._scrollbar, "pointerleave", () => {
+        gsapWithCSS.to(this._scrollbar, {
+          duration: 0.5,
+          alpha: 0,
+          delay: 1
+        });
+      });
       this.eventMode = "static";
       this.on("pointerdown", this._onDragStart, this);
       libPixiEvent(this, "pointerdown", (event) => {
         this._onDragStart(event);
+        this._updateScrollbarSize();
       });
       libPixiEvent(this, "pointermove", (event) => {
         this._onScrollbarDragMove(event);
@@ -49313,6 +49327,7 @@ void main(void)\r
       });
       libPixiEvent(this, "wheel", (event) => {
         this._onWheelScroll(event);
+        this._updateScrollbarSize();
       });
       libPixiEvent(this, "pointerupoutside", () => {
         this._onDragEnd();
@@ -49328,6 +49343,7 @@ void main(void)\r
       this._maskGraphics.drawRect(0, 0, width, height);
       this._maskGraphics.endFill();
       this.setSize(width, height);
+      this._scrollbar.x = width - 50;
     }
     /** @description 返回顶部 */
     scrollToTop() {
@@ -49356,8 +49372,8 @@ void main(void)\r
         const position = event.getLocalPosition(this);
         const newPosition = position.y - this._startY;
         this._content.y = newPosition;
+        this._updateScrollbar();
       }
-      this._updateScrollbar();
     }
     /** @description 拖动结束 */
     _onDragEnd() {
@@ -49372,6 +49388,11 @@ void main(void)\r
         this._velocity = 0;
       }
       this._limitScrollRange();
+      gsapWithCSS.to(this._scrollbar, {
+        duration: 0.5,
+        alpha: 0,
+        delay: 0.25
+      });
     }
     /** @description 滚轮滚动 */
     _onWheelScroll(event) {
@@ -49389,6 +49410,9 @@ void main(void)\r
         y: y2,
         onUpdate: () => {
           this._updateScrollbar();
+        },
+        onComplete: () => {
+          this._hideScrollbar();
         }
       });
     }
@@ -49401,6 +49425,9 @@ void main(void)\r
         onUpdate: () => {
           this._limitScrollRange();
           this._updateScrollbar();
+        },
+        onComplete: () => {
+          this._hideScrollbar();
         }
       });
     }
@@ -49413,6 +49440,9 @@ void main(void)\r
           ease: "elastic.out",
           onUpdate: () => {
             this._updateScrollbar();
+          },
+          onComplete: () => {
+            this._hideScrollbar();
           }
         });
       } else if (Math.abs(this._content.y) >= this._content.height - this._maskGraphics.height) {
@@ -49424,6 +49454,9 @@ void main(void)\r
             ease: "elastic.out",
             onUpdate: () => {
               this._updateScrollbar();
+            },
+            onComplete: () => {
+              this._hideScrollbar();
             }
           });
         } else {
@@ -49432,6 +49465,9 @@ void main(void)\r
             y: 0,
             onUpdate: () => {
               this._updateScrollbar();
+            },
+            onComplete: () => {
+              this._hideScrollbar();
             }
           });
         }
@@ -49439,23 +49475,27 @@ void main(void)\r
     }
     /** @description 更新滚动位置 */
     _updateScrollbar() {
+      this._scrollbar.alpha = 1;
+      gsapWithCSS.killTweensOf(this._scrollbar);
       const viewHeight = this._maskGraphics.height;
       const contentHeight = this._content.height;
-      if (contentHeight <= viewHeight) {
-        this._scrollbar.visible = false;
-        return;
-      }
-      this._scrollbar.visible = true;
       const ratio = viewHeight / contentHeight;
       const barHeight = viewHeight * ratio;
       const maxScrollY = contentHeight - viewHeight;
       const scrollY = Math.min(Math.max(-this._content.y, 0), maxScrollY);
       const barY = scrollY / maxScrollY * (viewHeight - barHeight);
+      this._scrollbar.y = barY;
+    }
+    /** @description 更新滚动条大小 */
+    _updateScrollbarSize() {
+      const viewHeight = this._maskGraphics.height;
+      const contentHeight = this._content.height;
+      const ratio = viewHeight / contentHeight;
+      const barHeight = viewHeight * ratio;
       this._scrollbar.clear();
       this._scrollbar.beginFill(this._scrollbarColor);
       this._scrollbar.drawRect(0, 0, 10, barHeight);
       this._scrollbar.endFill();
-      this._scrollbar.y = barY;
     }
     /** @description 滚动条按下 */
     _onScrollbarDragStart(event) {
@@ -49488,6 +49528,14 @@ void main(void)\r
       event.stopPropagation();
       this._scrollbarDragging = false;
     }
+    /** @description 滚动结束一秒后隐藏滚动条 */
+    _hideScrollbar() {
+      gsapWithCSS.to(this._scrollbar, {
+        duration: 0.5,
+        alpha: 0,
+        delay: 0.25
+      });
+    }
   }
   const LibJsLerp = (start, end, value) => {
     const t2 = Math.min(Math.max(value, 0), 1);

package/package.json

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