lyb-pixi-js 1.10.1 → 1.10.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -10,16 +10,21 @@ interface Params {
|
|
|
10
10
|
}
|
|
11
11
|
/** @description 弹窗组件 */
|
|
12
12
|
export declare class LibPixiDialog extends LibPixiBaseContainer {
|
|
13
|
+
/** 黑色背景透明度 */
|
|
14
|
+
static bgAlpha: number;
|
|
15
|
+
/** 动画时长 */
|
|
16
|
+
static durationIn: number;
|
|
17
|
+
static durationOut: number;
|
|
13
18
|
/** 蒙版UI */
|
|
14
|
-
private
|
|
19
|
+
private _maskUI;
|
|
15
20
|
/** 内容容器 */
|
|
16
|
-
private
|
|
21
|
+
private _dialogContainer;
|
|
17
22
|
/** 当前大小 */
|
|
18
|
-
private
|
|
23
|
+
private _size;
|
|
19
24
|
/** 竖版初始大小 */
|
|
20
|
-
private
|
|
25
|
+
private _initialSize;
|
|
21
26
|
/** 是否处于关闭动画状态 */
|
|
22
|
-
private
|
|
27
|
+
private _isCloseAnimating;
|
|
23
28
|
constructor(params?: Params);
|
|
24
29
|
/** @description 设置弹窗内容 */
|
|
25
30
|
setDialogContent(content: Container): void;
|
|
@@ -17,100 +17,105 @@ export class LibPixiDialog extends LibPixiBaseContainer {
|
|
|
17
17
|
constructor(params) {
|
|
18
18
|
super();
|
|
19
19
|
/** 当前大小 */
|
|
20
|
-
this.
|
|
20
|
+
this._size = 1;
|
|
21
21
|
/** 是否处于关闭动画状态 */
|
|
22
|
-
this.
|
|
22
|
+
this._isCloseAnimating = false;
|
|
23
23
|
const { size = 1, onClickMask, needBg = true } = params || {};
|
|
24
|
-
this.
|
|
24
|
+
this._initialSize = size;
|
|
25
25
|
//蒙版
|
|
26
|
-
this.
|
|
26
|
+
this._maskUI = new LibPixiRectBgColor({
|
|
27
27
|
width: 2700,
|
|
28
28
|
height: 1080,
|
|
29
29
|
bgColor: "#000",
|
|
30
30
|
});
|
|
31
|
-
this.addChild(this.
|
|
32
|
-
this.
|
|
33
|
-
this.
|
|
34
|
-
this.
|
|
31
|
+
this.addChild(this._maskUI);
|
|
32
|
+
this._maskUI.alpha = 0;
|
|
33
|
+
this._maskUI.eventMode = "static";
|
|
34
|
+
this._maskUI.visible = needBg;
|
|
35
35
|
if (onClickMask) {
|
|
36
|
-
libPixiEvent(this.
|
|
37
|
-
if (this.
|
|
36
|
+
libPixiEvent(this._maskUI, "pointertap", () => {
|
|
37
|
+
if (this._isCloseAnimating)
|
|
38
38
|
return;
|
|
39
39
|
onClickMask === null || onClickMask === void 0 ? void 0 : onClickMask();
|
|
40
40
|
});
|
|
41
41
|
}
|
|
42
42
|
//弹窗内容容器
|
|
43
|
-
this.
|
|
44
|
-
this.addChild(this.
|
|
45
|
-
this.
|
|
43
|
+
this._dialogContainer = new Container();
|
|
44
|
+
this.addChild(this._dialogContainer);
|
|
45
|
+
this._dialogContainer.eventMode = "static";
|
|
46
46
|
}
|
|
47
47
|
/** @description 设置弹窗内容 */
|
|
48
48
|
setDialogContent(content) {
|
|
49
|
-
this.
|
|
50
|
-
const w = this.
|
|
51
|
-
const h = this.
|
|
52
|
-
this.
|
|
53
|
-
this.
|
|
54
|
-
this.
|
|
55
|
-
gsap.to(this.
|
|
56
|
-
duration:
|
|
57
|
-
alpha:
|
|
49
|
+
this._dialogContainer.addChild(content);
|
|
50
|
+
const w = this._dialogContainer.width / 2;
|
|
51
|
+
const h = this._dialogContainer.height / 2;
|
|
52
|
+
this._dialogContainer.pivot.set(w, h);
|
|
53
|
+
this._dialogContainer.scale.set(0);
|
|
54
|
+
this._dialogContainer.alpha = 0;
|
|
55
|
+
gsap.to(this._maskUI, {
|
|
56
|
+
duration: LibPixiDialog.durationIn,
|
|
57
|
+
alpha: LibPixiDialog.bgAlpha,
|
|
58
58
|
});
|
|
59
|
-
gsap.to(this.
|
|
60
|
-
duration:
|
|
59
|
+
gsap.to(this._dialogContainer, {
|
|
60
|
+
duration: LibPixiDialog.durationIn,
|
|
61
61
|
alpha: 1,
|
|
62
62
|
});
|
|
63
63
|
this._onResize((w, h) => {
|
|
64
64
|
const halfW = 1920 / 2;
|
|
65
65
|
const halfH = 1080 / 2;
|
|
66
66
|
if (w > h) {
|
|
67
|
-
this.
|
|
68
|
-
this.
|
|
69
|
-
this.
|
|
70
|
-
this.
|
|
71
|
-
if (this.
|
|
72
|
-
this.
|
|
67
|
+
this._maskUI.renderBg(2700, 1080);
|
|
68
|
+
this._maskUI.x = -(2700 - 1920) / 2;
|
|
69
|
+
this._dialogContainer.position.set(halfW, halfH);
|
|
70
|
+
this._size = 1;
|
|
71
|
+
if (this._dialogContainer.scale.x === this._initialSize) {
|
|
72
|
+
this._dialogContainer.scale.set(1);
|
|
73
73
|
}
|
|
74
74
|
}
|
|
75
75
|
else {
|
|
76
|
-
this.
|
|
77
|
-
this.
|
|
78
|
-
this.
|
|
79
|
-
this.
|
|
80
|
-
if (this.
|
|
81
|
-
this.
|
|
76
|
+
this._maskUI.renderBg(1080, 2700);
|
|
77
|
+
this._maskUI.x = 0;
|
|
78
|
+
this._dialogContainer.position.set(halfH, halfW);
|
|
79
|
+
this._size = this._initialSize;
|
|
80
|
+
if (this._dialogContainer.scale.x === 1) {
|
|
81
|
+
this._dialogContainer.scale.set(this._initialSize);
|
|
82
82
|
}
|
|
83
83
|
}
|
|
84
|
-
gsap.to(this.
|
|
85
|
-
duration:
|
|
84
|
+
gsap.to(this._dialogContainer.scale, {
|
|
85
|
+
duration: LibPixiDialog.durationIn,
|
|
86
86
|
ease: "back.out",
|
|
87
|
-
x: this.
|
|
88
|
-
y: this.
|
|
87
|
+
x: this._size,
|
|
88
|
+
y: this._size,
|
|
89
89
|
});
|
|
90
90
|
});
|
|
91
91
|
}
|
|
92
92
|
/** @description 关闭 */
|
|
93
93
|
close() {
|
|
94
94
|
return __awaiter(this, void 0, void 0, function* () {
|
|
95
|
-
if (this.
|
|
95
|
+
if (this._isCloseAnimating)
|
|
96
96
|
return;
|
|
97
|
-
this.
|
|
98
|
-
gsap.to(this.
|
|
99
|
-
duration:
|
|
97
|
+
this._isCloseAnimating = true;
|
|
98
|
+
gsap.to(this._dialogContainer.scale, {
|
|
99
|
+
duration: LibPixiDialog.durationOut,
|
|
100
100
|
ease: "back.in",
|
|
101
101
|
x: 0,
|
|
102
102
|
y: 0,
|
|
103
103
|
});
|
|
104
|
-
gsap.to(this.
|
|
105
|
-
duration:
|
|
106
|
-
delay:
|
|
104
|
+
gsap.to(this._dialogContainer, {
|
|
105
|
+
duration: LibPixiDialog.durationOut,
|
|
106
|
+
delay: LibPixiDialog.durationOut / 2,
|
|
107
107
|
alpha: 0,
|
|
108
108
|
});
|
|
109
|
-
yield gsap.to(this.
|
|
110
|
-
duration:
|
|
111
|
-
delay:
|
|
109
|
+
yield gsap.to(this._maskUI, {
|
|
110
|
+
duration: LibPixiDialog.durationOut,
|
|
111
|
+
delay: LibPixiDialog.durationOut / 2,
|
|
112
112
|
alpha: 0,
|
|
113
113
|
});
|
|
114
114
|
});
|
|
115
115
|
}
|
|
116
116
|
}
|
|
117
|
+
/** 黑色背景透明度 */
|
|
118
|
+
LibPixiDialog.bgAlpha = 0.5;
|
|
119
|
+
/** 动画时长 */
|
|
120
|
+
LibPixiDialog.durationIn = 0.5;
|
|
121
|
+
LibPixiDialog.durationOut = 0.5;
|