lyb-pixi-js 1.8.10 → 1.9.0

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.alpha = 0;
-            return;
-        }
-        this._scrollbar.alpha = 1;
         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/README.md

@@ -156,6 +156,12 @@ app.stage.addChild(box);
 
 \- [LibPixiPolygonDrawTool-多边形绘制](#LibPixiPolygonDrawTool-多边形绘制)
 
+\- [LibPixiDigitalIncreasingAnimation-递增动画](#LibPixiDigitalIncreasingAnimation-递增动画)
+
+\- [LibPixiDownScaleAnimation-按下放大](#LibPixiDownScaleAnimation-按下放大)
+
+\- [LibPixiGridLayout-网格布局](#LibPixiGridLayout-网格布局)
+
 ## Base-基础
 
 ### LibPixiText-文本
@@ -1124,3 +1130,37 @@ $bus.on("play", () => {
 ```ts
 new LibPixiPolygonDrawTool(app);
 ```
+
+### LibPixiDigitalIncreasingAnimation-递增动画
+
+> 数值递增动画
+
+```ts
+const amountAnimation = _digitalIncreasingAnimation({
+  startValue: 0,
+  value: 100,
+  duration: 1,
+  onChange: (v) => {
+    this._winAmountText.text = v;
+  },
+  onComplete: () => {
+  },
+});
+```
+
+### LibPixiDownScaleAnimation-按下放大
+
+> 鼠标按下放大
+
+```ts
+LibPixiDownScaleAnimation(sprite);
+```
+
+### LibPixiGridLayout-网格布局
+
+> 将元素按照指定的列数和间隔排列成网格布局
+
+```ts
+LibPixiGridLayout(cardList, 20, 3); //间隔20，一行三个
+```
+

package/Utils/LibPixiDigitalIncreasingAnimation.d.ts

@@ -0,0 +1,18 @@
+export interface LibPixiDigitalIncreasingAnimationParams {
+    /** 目标值 */
+    value: number;
+    /** 开始值 */
+    startValue?: number;
+    /** 动画时长 */
+    duration?: number;
+    /** 值改变时触发 */
+    onChange: (value: string) => void;
+    /** 动画完成后触发 */
+    onComplete?: () => void;
+}
+/** @description 数值递增动画
+ * @param params 动画参数
+ * @returns 设置为目标值并停止动画
+ * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiDigitalIncreasingAnimation-递增动画
+ */
+export declare const LibPixiDigitalIncreasingAnimation: (params: LibPixiDigitalIncreasingAnimationParams) => () => void;

package/Utils/LibPixiDigitalIncreasingAnimation.js

@@ -0,0 +1,25 @@
+import { libJsNumComma } from "lyb-js/Formatter/LibJsNumComma.js";
+/** @description 数值递增动画
+ * @param params 动画参数
+ * @returns 设置为目标值并停止动画
+ * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiDigitalIncreasingAnimation-递增动画
+ */
+export const LibPixiDigitalIncreasingAnimation = (params) => {
+    const { value, onChange, onComplete, startValue = 0, duration = 4 } = params;
+    // 动画递增的目标值
+    const animatedValue = { value: startValue };
+    // 使用 GSAP 创建递增动画
+    gsap.killTweensOf(animatedValue);
+    const amountAnimation = gsap.to(animatedValue, {
+        value,
+        duration,
+        ease: "linear",
+        onUpdate: () => {
+            onChange(libJsNumComma(animatedValue.value, 2));
+        },
+        onComplete: onComplete,
+    });
+    return () => {
+        amountAnimation.progress(1);
+    };
+};

package/Utils/LibPixiDownScaleAnimation.d.ts

@@ -0,0 +1,6 @@
+import { Container } from "pixi.js";
+/** @description 按下放大
+ * @param container 要放大的容器
+ * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiDownScaleAnimation-按下放大
+ */
+export declare const LibPixiDownScaleAnimation: (container: Container) => void;

package/Utils/LibPixiDownScaleAnimation.js

@@ -0,0 +1,31 @@
+import { libPixiEvent } from "./LibPixiEvent";
+/** @description 按下放大
+ * @param container 要放大的容器
+ * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiDownScaleAnimation-按下放大
+ */
+export const LibPixiDownScaleAnimation = (container) => {
+    libPixiEvent(container, "pointerdown", () => {
+        gsap.to(container, {
+            duration: 0.1,
+            pixi: {
+                scale: 1.1,
+            },
+        });
+    });
+    libPixiEvent(container, "pointerup", () => {
+        gsap.to(container, {
+            duration: 0.1,
+            pixi: {
+                scale: 1,
+            },
+        });
+    });
+    libPixiEvent(container, "pointerleave", () => {
+        gsap.to(container, {
+            duration: 0.1,
+            pixi: {
+                scale: 1,
+            },
+        });
+    });
+};

package/Utils/LibPixiGridLayout.d.ts

@@ -0,0 +1,9 @@
+import { Container } from "pixi.js";
+/**
+ * @description 将元素按照指定的列数和间隔排列成网格布局。
+ * @param items 要排列的元素数组
+ * @param gap 每个元素之间的间隔
+ * @param cols 网格的列数，默认为元素数量
+ * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiGridLayout-网格布局
+ */
+export declare const LibPixiGridLayout: (items: Container[], gap: number, cols?: number) => void;

package/Utils/LibPixiGridLayout.js

@@ -0,0 +1,22 @@
+/**
+ * @description 将元素按照指定的列数和间隔排列成网格布局。
+ * @param items 要排列的元素数组
+ * @param gap 每个元素之间的间隔
+ * @param cols 网格的列数，默认为元素数量
+ * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiGridLayout-网格布局
+ */
+export const LibPixiGridLayout = (items, gap, cols = items.length) => {
+    let lastX = 0;
+    items.forEach((item, index) => {
+        const itemWidth = item.width || 0;
+        const itemHeight = item.height || 0;
+        const colIndex = index % cols;
+        const rowIndex = Math.floor(index / cols);
+        item.x = colIndex === 0 ? 0 : lastX + gap;
+        item.y = rowIndex * (itemHeight + gap);
+        lastX = item.x + itemWidth;
+        if (colIndex === cols - 1) {
+            lastX = 0;
+        }
+    });
+};

package/libPixiJs.d.ts

@@ -193,4 +193,23 @@ export declare const Utils: {
      * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiPolygonDrawTool-多边形绘制
      */
     LibPixiPolygonDrawTool: typeof LibPixiPolygonDrawTool;
+    /** @description 数值递增动画
+     * @param params 动画参数
+     * @returns 设置为目标值并停止动画
+     * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiDigitalIncreasingAnimation-递增动画
+     */
+    LibPixiDigitalIncreasingAnimation: (params: import("./Utils/LibPixiDigitalIncreasingAnimation").LibPixiDigitalIncreasingAnimationParams) => () => void;
+    /** @description 按下放大
+     * @param container 要放大的容器
+     * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiDownScaleAnimation-按下放大
+     */
+    LibPixiDownScaleAnimation: (container: import("pixi.js").Container) => void;
+    /**
+     * @description 将元素按照指定的列数和间隔排列成网格布局。
+     * @param items 要排列的元素数组
+     * @param gap 每个元素之间的间隔
+     * @param cols 网格的列数，默认为元素数量
+     * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiGridLayout-网格布局
+     */
+    LibPixiGridLayout: (items: import("pixi.js").Container[], gap: number, cols?: number) => void;
 };

package/libPixiJs.js

@@ -33,6 +33,9 @@ import { LibPixiHtmlText } from "./Components/Base/LibPixiHtmlText";
 import { LibPixiRectangle } from "./Components/Base/LibPixiRectangle";
 import { LibPixiPolygon } from "./Components/Base/LibPixiPolygon";
 import { LibPixiCircular } from "./Components/Base/LibPixiCircular";
+import { LibPixiDigitalIncreasingAnimation } from "./Utils/LibPixiDigitalIncreasingAnimation";
+import { LibPixiDownScaleAnimation } from "./Utils/LibPixiDownScaleAnimation";
+import { LibPixiGridLayout } from "./Utils/LibPixiGridLayout";
 /** @description 组件 */
 export const Components = {
     Base: {
@@ -203,4 +206,23 @@ export const Utils = {
      * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiPolygonDrawTool-多边形绘制
      */
     LibPixiPolygonDrawTool,
+    /** @description 数值递增动画
+     * @param params 动画参数
+     * @returns 设置为目标值并停止动画
+     * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiDigitalIncreasingAnimation-递增动画
+     */
+    LibPixiDigitalIncreasingAnimation,
+    /** @description 按下放大
+     * @param container 要放大的容器
+     * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiDownScaleAnimation-按下放大
+     */
+    LibPixiDownScaleAnimation,
+    /**
+     * @description 将元素按照指定的列数和间隔排列成网格布局。
+     * @param items 要排列的元素数组
+     * @param gap 每个元素之间的间隔
+     * @param cols 网格的列数，默认为元素数量
+     * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiGridLayout-网格布局
+     */
+    LibPixiGridLayout,
 };

package/lyb-pixi.js

@@ -25751,7 +25751,7 @@ void main(void)\r
     return _isFunction(value) || _isString(value);
   }, _isTypedArray = typeof ArrayBuffer === "function" && ArrayBuffer.isView || function() {
   }, _isArray = Array.isArray, _strictNumExp = /(?:-?\.?\d|\.)+/gi, _numExp = /[-+=.]*\d+[.e\-+]*\d*[e\-+]*\d*/g, _numWithUnitExp = /[-+=.]*\d+[.e-]*\d*[a-z%]*/g, _complexStringNumExp = /[-+=.]*\d+\.?\d*(?:e-|e\+)?\d*/gi, _relExp = /[+-]=-?[.\d]+/, _delimitedValueExp = /[^,'"\[\]\s]+/gi, _unitExp = /^[+\-=e\s\d]*\d+[.\d]*([a-z]*|%)\s*$/i, _globalTimeline, _win$1, _coreInitted, _doc$1, _globals = {}, _installScope = {}, _coreReady, _install = function _install2(scope) {
-    return (_installScope = _merge(scope, _globals)) && gsap;
+    return (_installScope = _merge(scope, _globals)) && gsap$1;
   }, _missingPlugin = function _missingPlugin2(property, value) {
     return console.warn("Invalid property", property, "set to", value, "Missing plugin? gsap.registerPlugin()");
   }, _warn = function _warn2(message, suppress) {
@@ -26379,7 +26379,7 @@ void main(void)\r
         name = (name === "css" ? "CSS" : name.charAt(0).toUpperCase() + name.substr(1)) + "Plugin";
       }
       _addGlobal(name, Plugin);
-      config.register && config.register(gsap, Plugin, PropTween);
+      config.register && config.register(gsap$1, Plugin, PropTween);
     } else {
       _registerPluginQueue.push(config);
     }
@@ -26556,8 +26556,8 @@ void main(void)\r
           if (!_coreInitted && _windowExists$1()) {
             _win$1 = _coreInitted = window;
             _doc$1 = _win$1.document || {};
-            _globals.gsap = gsap;
-            (_win$1.gsapVersions || (_win$1.gsapVersions = [])).push(gsap.version);
+            _globals.gsap = gsap$1;
+            (_win$1.gsapVersions || (_win$1.gsapVersions = [])).push(gsap$1.version);
             _install(_installScope || _win$1.GreenSockGlobals || !_win$1.gsap && _win$1 || {});
             _registerPluginQueue.forEach(_createPlugin);
           }
@@ -28423,7 +28423,7 @@ void main(void)\r
       target = toArray(target);
       if (target.length > 1) {
         var setters = target.map(function(t2) {
-          return gsap.quickSetter(t2, property, unit);
+          return gsap$1.quickSetter(t2, property, unit);
         }), l2 = setters.length;
         return function(value) {
           var i2 = l2;
@@ -28446,7 +28446,7 @@ void main(void)\r
     },
     quickTo: function quickTo(target, property, vars) {
       var _merge2;
-      var tween = gsap.to(target, _merge((_merge2 = {}, _merge2[property] = "+=0.1", _merge2.paused = true, _merge2), vars || {})), func = function func2(value, start, startIsRelative) {
+      var tween = gsap$1.to(target, _merge((_merge2 = {}, _merge2[property] = "+=0.1", _merge2.paused = true, _merge2), vars || {})), func = function func2(value, start, startIsRelative) {
         return tween.resetTo(property, value, start, startIsRelative);
       };
       func.tween = tween;
@@ -28632,7 +28632,7 @@ void main(void)\r
       }
     };
   };
-  var gsap = _gsap.registerPlugin({
+  var gsap$1 = _gsap.registerPlugin({
     name: "attr",
     init: function init2(target, vars, tween, index, targets) {
       var p2, pt, v2;
@@ -28661,7 +28661,7 @@ void main(void)\r
       }
     }
   }, _buildModifierPlugin("roundProps", _roundModifier), _buildModifierPlugin("modifiers"), _buildModifierPlugin("snap", snap)) || _gsap;
-  Tween.version = Timeline$1.version = gsap.version = "3.12.5";
+  Tween.version = Timeline$1.version = gsap$1.version = "3.12.5";
   _coreReady = 1;
   _windowExists$1() && _wake();
   _easeMap.Power0;
@@ -28789,7 +28789,7 @@ void main(void)\r
       revert: _revertStyle,
       save: _saveStyle
     };
-    target._gsap || gsap.core.getCache(target);
+    target._gsap || gsap$1.core.getCache(target);
     properties && properties.split(",").forEach(function(p2) {
       return saver.save(p2);
     });
@@ -28822,7 +28822,7 @@ void main(void)\r
       _transformOriginProp = _transformProp + "Origin";
       _tempDiv.style.cssText = "border-width:0;line-height:0;position:absolute;padding:0";
       _supports3D = !!_checkPropPrefix("perspective");
-      _reverting = gsap.core.reverting;
+      _reverting = gsap$1.core.reverting;
       _pluginInitted = 1;
     }
   }, _getBBoxHack = function _getBBoxHack2(swapIfPossible) {
@@ -29696,8 +29696,8 @@ void main(void)\r
       _getMatrix
     }
   };
-  gsap.utils.checkPrefix = _checkPropPrefix;
-  gsap.core.getStyleSaver = _getStyleSaver;
+  gsap$1.utils.checkPrefix = _checkPropPrefix;
+  gsap$1.core.getStyleSaver = _getStyleSaver;
   (function(positionAndScale, rotation, others, aliases) {
     var all = _forEachName(positionAndScale + "," + rotation + "," + others, function(name) {
       _transformProps[name] = 1;
@@ -29715,8 +29715,8 @@ void main(void)\r
   _forEachName("x,y,z,top,right,bottom,left,width,height,fontSize,padding,margin,perspective", function(name) {
     _config.units[name] = "px";
   });
-  gsap.registerPlugin(CSSPlugin);
-  var gsapWithCSS = gsap.registerPlugin(CSSPlugin) || gsap;
+  gsap$1.registerPlugin(CSSPlugin);
+  var gsapWithCSS = gsap$1.registerPlugin(CSSPlugin) || gsap$1;
   gsapWithCSS.core.Tween;
   class LibPixiRectBgColor extends Graphics {
     constructor(options) {
@@ -49268,16 +49268,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);
@@ -49289,6 +49303,7 @@ void main(void)\r
       });
       libPixiEvent(this, "wheel", (event) => {
         this._onWheelScroll(event);
+        this._updateScrollbarSize();
       });
       libPixiEvent(this, "pointerupoutside", () => {
         this._onDragEnd();
@@ -49304,6 +49319,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() {
@@ -49332,8 +49348,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() {
@@ -49348,6 +49364,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) {
@@ -49365,6 +49386,9 @@ void main(void)\r
         y: y2,
         onUpdate: () => {
           this._updateScrollbar();
+        },
+        onComplete: () => {
+          this._hideScrollbar();
         }
       });
     }
@@ -49377,6 +49401,9 @@ void main(void)\r
         onUpdate: () => {
           this._limitScrollRange();
           this._updateScrollbar();
+        },
+        onComplete: () => {
+          this._hideScrollbar();
         }
       });
     }
@@ -49389,6 +49416,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) {
@@ -49400,6 +49430,9 @@ void main(void)\r
             ease: "elastic.out",
             onUpdate: () => {
               this._updateScrollbar();
+            },
+            onComplete: () => {
+              this._hideScrollbar();
             }
           });
         } else {
@@ -49408,6 +49441,9 @@ void main(void)\r
             y: 0,
             onUpdate: () => {
               this._updateScrollbar();
+            },
+            onComplete: () => {
+              this._hideScrollbar();
             }
           });
         }
@@ -49415,23 +49451,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.alpha = 0;
-        return;
-      }
-      this._scrollbar.alpha = 1;
       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) {
@@ -49464,6 +49504,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);
@@ -54984,6 +55032,69 @@ void main(void){
       this.endFill();
     }
   }
+  const libJsNumComma = (num, reserve = 2) => {
+    const str = num.toFixed(reserve).toString();
+    const reg = str.indexOf(".") > -1 ? /(\d)(?=(\d{3})+\.)/g : /(\d)(?=(?:\d{3})+$)/g;
+    return str.replace(reg, "$1,");
+  };
+  const LibPixiDigitalIncreasingAnimation = (params) => {
+    const { value, onChange, onComplete, startValue = 0, duration = 4 } = params;
+    const animatedValue = { value: startValue };
+    gsap.killTweensOf(animatedValue);
+    const amountAnimation = gsap.to(animatedValue, {
+      value,
+      duration,
+      ease: "linear",
+      onUpdate: () => {
+        onChange(libJsNumComma(animatedValue.value, 2));
+      },
+      onComplete
+    });
+    return () => {
+      amountAnimation.progress(1);
+    };
+  };
+  const LibPixiDownScaleAnimation = (container) => {
+    libPixiEvent(container, "pointerdown", () => {
+      gsap.to(container, {
+        duration: 0.1,
+        pixi: {
+          scale: 1.1
+        }
+      });
+    });
+    libPixiEvent(container, "pointerup", () => {
+      gsap.to(container, {
+        duration: 0.1,
+        pixi: {
+          scale: 1
+        }
+      });
+    });
+    libPixiEvent(container, "pointerleave", () => {
+      gsap.to(container, {
+        duration: 0.1,
+        pixi: {
+          scale: 1
+        }
+      });
+    });
+  };
+  const LibPixiGridLayout = (items, gap, cols = items.length) => {
+    let lastX = 0;
+    items.forEach((item, index) => {
+      const itemWidth = item.width || 0;
+      const itemHeight = item.height || 0;
+      const colIndex = index % cols;
+      const rowIndex = Math.floor(index / cols);
+      item.x = colIndex === 0 ? 0 : lastX + gap;
+      item.y = rowIndex * (itemHeight + gap);
+      lastX = item.x + itemWidth;
+      if (colIndex === cols - 1) {
+        lastX = 0;
+      }
+    });
+  };
   const Components = {
     Base: {
       /** @description 自定义位图文本
@@ -55151,7 +55262,26 @@ void main(void){
     /** @description 多边形绘制工具，绘制时浏览器窗口需要全屏显示，空格键控制开始和结束，开始后鼠标进行点击绘制，退格删除点，空格结束绘制，绘制结果在控制台打印，不满意可再次按空格清空并重新绘制
      * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiPolygonDrawTool-多边形绘制
      */
-    LibPixiPolygonDrawTool
+    LibPixiPolygonDrawTool,
+    /** @description 数值递增动画
+     * @param params 动画参数
+     * @returns 设置为目标值并停止动画
+     * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiDigitalIncreasingAnimation-递增动画
+     */
+    LibPixiDigitalIncreasingAnimation,
+    /** @description 按下放大
+     * @param container 要放大的容器
+     * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiDownScaleAnimation-按下放大
+     */
+    LibPixiDownScaleAnimation,
+    /**
+     * @description 将元素按照指定的列数和间隔排列成网格布局。
+     * @param items 要排列的元素数组
+     * @param gap 每个元素之间的间隔
+     * @param cols 网格的列数，默认为元素数量
+     * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiGridLayout-网格布局
+     */
+    LibPixiGridLayout
   };
   const LibPixiJs = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
     __proto__: null,

package/package.json

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