lyb-pixi-js 1.5.0 → 1.5.2

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;

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-数字滑动
  */
@@ -105,8 +105,8 @@ export class LibPixiScrollNum extends LibPixiContainer {
      */
     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 idx = Math.floor(Math.abs(Y) / this._slideHeight);
+        const t = (Math.abs(Y) % this._slideHeight) / this._slideHeight;
         const prevIdx = idx - 1;
         const nextIdx = idx + 1;
         const nextIdx2 = idx + 2;

package/Components/Custom/LibPixiSlider.d.ts

@@ -1,5 +1,21 @@
 import { Container } from "pixi.js";
-import { LibPixiContainer } from '../Base/LibPixiContainer';
+import { LibPixiContainer } from "../Base/LibPixiContainer";
+interface LibPixiSliderParams {
+    /** 滑动区域宽度 */
+    width: number;
+    /** 滑动区域高度 */
+    height: number;
+    /** 滑动页列表 */
+    slideList: Container[];
+    /** 是否启用景深 */
+    enableDepth?: boolean;
+    /** 景深透明度 */
+    depthAlpha?: number;
+    /** 景深缩放 */
+    depthScale?: number;
+    /** 滑动回调 */
+    slideCallback: (pageIndex: number, _pageNum: number) => void;
+}
 /** @description 类似轮播图，但是不会自动轮播
  * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiSlider-横向滑动图
  */
@@ -8,6 +24,8 @@ export declare class LibPixiSlider extends LibPixiContainer {
     private _currentIndex;
     /** 滑动区域宽度 */
     private _slideWidth;
+    /** 滑动区域高度 */
+    private _slideHeight;
     /** 记录拖动开始时的X坐标 */
     private _startX;
     /** 偏移量 */
@@ -19,6 +37,14 @@ export declare class LibPixiSlider extends LibPixiContainer {
     private _isDragging;
     /** 滑动内容 */
     private _slideArea;
+    /** 是否启用景深 */
+    private _enableDepth;
+    /** 景深透明度 */
+    private _depthAlpha;
+    /** 景深缩放 */
+    private _depthScale;
+    /** 滑动容器列表 */
+    private _slideList;
     /** @description 滑动回调 */
     private slideCallback;
     /**
@@ -27,7 +53,7 @@ export declare class LibPixiSlider extends LibPixiContainer {
      * @param content 内容
      * @param slideCallback 滑动结束回调
      */
-    constructor(width: number, height: number, content: Container, slideCallback: (pageIndex: number, _pageNum: number) => void);
+    constructor(params: LibPixiSliderParams);
     /** @description 上一页 */
     prev(): void;
     /** @description 下一页 */
@@ -42,4 +68,12 @@ export declare class LibPixiSlider extends LibPixiContainer {
     private _onDragMove;
     /** @description 结束拖动 */
     private _onDragEnd;
+    /** @description 设置滚动景深
+     * @param containerList 元素列表
+     * @param y 拖动Y坐标
+     * @param startY 内部将y - startY进行计算
+     */
+    private _setDepth;
+    lerp(a1: number, a2: number, t: number): number;
 }
+export {};

package/Components/Custom/LibPixiSlider.js

@@ -1,6 +1,7 @@
+import { Container } from "pixi.js";
 import gsap from "gsap";
 import { libPixiOverflowHidden } from "../../Utils/LibPixiOverflowHidden";
-import { LibPixiContainer } from '../Base/LibPixiContainer';
+import { LibPixiContainer } from "../Base/LibPixiContainer";
 /** @description 类似轮播图，但是不会自动轮播
  * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiSlider-横向滑动图
  */
@@ -11,12 +12,15 @@ export class LibPixiSlider extends LibPixiContainer {
      * @param content 内容
      * @param slideCallback 滑动结束回调
      */
-    constructor(width, height, content, slideCallback) {
+    constructor(params) {
+        const { width, height, slideList, slideCallback, enableDepth = false, depthAlpha = 0.5, depthScale = 0.5, } = params;
         super(width, height);
         /** 当前幻灯片索引 */
         this._currentIndex = 0;
         /** 滑动区域宽度 */
         this._slideWidth = 0;
+        /** 滑动区域高度 */
+        this._slideHeight = 0;
         /** 记录拖动开始时的X坐标 */
         this._startX = 0;
         /** 偏移量 */
@@ -28,11 +32,22 @@ export class LibPixiSlider extends LibPixiContainer {
         /* 是否正在拖动 */
         this._isDragging = false;
         libPixiOverflowHidden(this);
+        this._slideArea = new Container();
         this._slideWidth = width;
-        this._slideArea = content;
+        this._slideHeight = height;
+        this._slideList = slideList;
+        this._enableDepth = enableDepth;
+        this._depthAlpha = depthAlpha;
+        this._depthScale = depthScale;
         this.slideCallback = slideCallback;
-        this._pageNum = Math.floor(content.width / this._slideWidth) - 1;
-        this.addChild(content);
+        this._pageNum = slideList.length - 1;
+        this._slideList.forEach((item, index) => {
+            this._slideArea.addChild(item);
+            item.x = index * width + this._slideWidth / 2;
+            item.y = this._slideHeight / 2;
+            item.pivot.set(this._slideWidth / 2, this._slideHeight / 2);
+        });
+        this.addChild(this._slideArea);
         // 监听拖动事件
         this.eventMode = "static";
         this.cursor = "pointer";
@@ -54,7 +69,13 @@ export class LibPixiSlider extends LibPixiContainer {
     _slideTo(index) {
         if (index < 0) {
             // 回弹到第一张
-            gsap.to(this._slideArea, { x: 0, duration: 0.25 });
+            gsap.to(this._slideArea, {
+                x: 0,
+                duration: 0.25,
+                onUpdate: () => {
+                    this._setDepth();
+                },
+            });
             this._currentIndex = 0;
         }
         else if (index > this._pageNum) {
@@ -62,6 +83,9 @@ export class LibPixiSlider extends LibPixiContainer {
             gsap.to(this._slideArea, {
                 x: -this._pageNum * this._slideWidth,
                 duration: 0.5,
+                onUpdate: () => {
+                    this._setDepth();
+                },
             });
             this._currentIndex = this._pageNum;
         }
@@ -71,6 +95,9 @@ export class LibPixiSlider extends LibPixiContainer {
             gsap.to(this._slideArea, {
                 x: -this._currentIndex * this._slideWidth,
                 duration: 0.25,
+                onUpdate: () => {
+                    this._setDepth();
+                },
             });
         }
         this.slideCallback(this._currentIndex, this._pageNum);
@@ -89,6 +116,7 @@ export class LibPixiSlider extends LibPixiContainer {
             return;
         const moveX = event.pageX - this._startX;
         this._slideArea.x = this._offsetX + moveX;
+        this._setDepth();
     }
     /** @description 结束拖动 */
     _onDragEnd(event) {
@@ -108,4 +136,34 @@ export class LibPixiSlider extends LibPixiContainer {
         }
         this._slideTo(this._currentIndex);
     }
+    /** @description 设置滚动景深
+     * @param containerList 元素列表
+     * @param y 拖动Y坐标
+     * @param startY 内部将y - startY进行计算
+     */
+    _setDepth() {
+        if (!this._enableDepth)
+            return;
+        const Y = this._slideArea.x;
+        const idx = Math.floor(Math.abs(Y) / this._slideWidth);
+        const t = (Math.abs(Y) % this._slideWidth) / this._slideWidth;
+        const prevIdx = idx - 1;
+        const nextIdx = idx + 1;
+        const curItem = this._slideList[idx];
+        curItem.alpha = this.lerp(this._depthAlpha, 1, 1 - t);
+        curItem.scale.set(this.lerp(this._depthScale, 1, 1 - t));
+        if (nextIdx < this._slideList.length) {
+            const nextItem = this._slideList[nextIdx];
+            nextItem.alpha = this.lerp(this._depthAlpha, 1, t);
+            nextItem.scale.set(this.lerp(this._depthScale, 1, t));
+        }
+        if (prevIdx >= 0) {
+            const prevItem = this._slideList[prevIdx];
+            prevItem.alpha = this.lerp(this._depthAlpha, 1, 1 - t);
+            prevItem.scale.set(this.lerp(this._depthScale, 1, 1 - t));
+        }
+    }
+    lerp(a1, a2, t) {
+        return a1 * (1 - t) + a2 * t;
+    }
 }