Skip to content

Commit 0f6fda0

Browse files
Merge branch 'dev' into pr/763
2 parents df59671 + b397439 commit 0f6fda0

File tree

9 files changed

+142
-39
lines changed

9 files changed

+142
-39
lines changed

packages/webgal/src/Core/Modules/animationFunctions.ts

Lines changed: 28 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,12 @@ import { baseTransform } from '@/store/stageInterface';
77
import { generateTimelineObj } from '@/Core/controller/stage/pixi/animations/timeline';
88
import { WebGAL } from '@/Core/WebGAL';
99
import PixiStage, { IAnimationObject } from '@/Core/controller/stage/pixi/PixiController';
10-
import { DEFALUT_FIG_IN_DURATION, DEFALUT_FIG_OUT_DURATION } from '../constants';
10+
import {
11+
DEFAULT_BG_IN_DURATION,
12+
DEFAULT_BG_OUT_DURATION,
13+
DEFAULT_FIG_IN_DURATION,
14+
DEFAULT_FIG_OUT_DURATION,
15+
} from '../constants';
1116

1217
// eslint-disable-next-line max-params
1318
export function getAnimationObject(animationName: string, target: string, duration: number, writeDefault: boolean) {
@@ -57,40 +62,46 @@ export function getEnterExitAnimation(
5762
animation: IAnimationObject | null;
5863
} {
5964
if (type === 'enter') {
60-
let duration = DEFALUT_FIG_IN_DURATION;
65+
let duration = DEFAULT_FIG_IN_DURATION;
6166
if (isBg) {
62-
duration = 1500;
67+
duration = DEFAULT_BG_IN_DURATION;
6368
}
69+
duration =
70+
webgalStore.getState().stage.animationSettings.find((setting) => setting.target === target)?.enterDuration ??
71+
duration;
6472
// 走默认动画
6573
let animation: IAnimationObject | null = generateUniversalSoftInAnimationObj(realTarget ?? target, duration);
6674

6775
const transformState = webgalStore.getState().stage.effects;
6876
const targetEffect = transformState.find((effect) => effect.target === target);
6977

70-
const animarionName = WebGAL.animationManager.nextEnterAnimationName.get(target);
71-
if (animarionName && !targetEffect) {
78+
const animationName = webgalStore
79+
.getState()
80+
.stage.animationSettings.find((setting) => setting.target === target)?.enterAnimationName;
81+
if (animationName && !targetEffect) {
7282
logger.debug('取代默认进入动画', target);
73-
animation = getAnimationObject(animarionName, realTarget ?? target, getAnimateDuration(animarionName), false);
74-
duration = getAnimateDuration(animarionName);
75-
// 用后重置
76-
WebGAL.animationManager.nextEnterAnimationName.delete(target);
83+
animation = getAnimationObject(animationName, realTarget ?? target, getAnimateDuration(animationName), false);
84+
duration = getAnimateDuration(animationName);
7785
}
7886
return { duration, animation };
7987
} else {
8088
// exit
81-
let duration = DEFALUT_FIG_OUT_DURATION;
89+
let duration = DEFAULT_FIG_OUT_DURATION;
8290
if (isBg) {
83-
duration = 1500;
91+
duration = DEFAULT_BG_OUT_DURATION;
8492
}
93+
duration =
94+
webgalStore.getState().stage.animationSettings.find((setting) => setting.target + '-off' === target)
95+
?.exitDuration ?? duration;
8596
// 走默认动画
8697
let animation: IAnimationObject | null = generateUniversalSoftOffAnimationObj(realTarget ?? target, duration);
87-
const animarionName = WebGAL.animationManager.nextExitAnimationName.get(target);
88-
if (animarionName) {
98+
const animationName = webgalStore
99+
.getState()
100+
.stage.animationSettings.find((setting) => setting.target + '-off' === target)?.exitAnimationName;
101+
if (animationName) {
89102
logger.debug('取代默认退出动画', target);
90-
animation = getAnimationObject(animarionName, realTarget ?? target, getAnimateDuration(animarionName), false);
91-
duration = getAnimateDuration(animarionName);
92-
// 用后重置
93-
WebGAL.animationManager.nextExitAnimationName.delete(target);
103+
animation = getAnimationObject(animationName, realTarget ?? target, getAnimateDuration(animationName), false);
104+
duration = getAnimateDuration(animationName);
94105
}
95106
return { duration, animation };
96107
}

packages/webgal/src/Core/Modules/animations.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,8 @@ export interface IUserAnimation {
88
export type AnimationFrame = ITransform & { duration: number; ease: string };
99

1010
export class AnimationManager {
11-
public nextEnterAnimationName: Map<string, string> = new Map();
12-
public nextExitAnimationName: Map<string, string> = new Map();
11+
// public nextEnterAnimationName: Map<string, string> = new Map();
12+
// public nextExitAnimationName: Map<string, string> = new Map();
1313
private animations: Array<IUserAnimation> = [];
1414

1515
public addAnimation(animation: IUserAnimation) {

packages/webgal/src/Core/constants.ts

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,5 +7,7 @@ export const STAGE_KEYS = {
77
};
88

99
export const WEBGAL_NONE = 'none';
10-
export const DEFALUT_FIG_IN_DURATION = 300;
11-
export const DEFALUT_FIG_OUT_DURATION = 450;
10+
export const DEFAULT_FIG_IN_DURATION = 300;
11+
export const DEFAULT_FIG_OUT_DURATION = 450;
12+
export const DEFAULT_BG_IN_DURATION = 1000;
13+
export const DEFAULT_BG_OUT_DURATION = 1500;

packages/webgal/src/Core/gameScripts/changeBg/index.ts

Lines changed: 29 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import { AnimationFrame, IUserAnimation } from '@/Core/Modules/animations';
1313
import cloneDeep from 'lodash/cloneDeep';
1414
import { getAnimateDuration } from '@/Core/Modules/animationFunctions';
1515
import { WebGAL } from '@/Core/WebGAL';
16+
import { DEFAULT_BG_OUT_DURATION } from '@/Core/constants';
1617

1718
/**
1819
* 进行背景图片的切换
@@ -24,7 +25,10 @@ export const changeBg = (sentence: ISentence): IPerform => {
2425
const unlockName = getStringArgByKey(sentence, 'unlockname') ?? '';
2526
const series = getStringArgByKey(sentence, 'series') ?? 'default';
2627
const transformString = getStringArgByKey(sentence, 'transform');
27-
let duration = getNumberArgByKey(sentence, 'duration') ?? 1000;
28+
let duration = getNumberArgByKey(sentence, 'duration') ?? DEFAULT_BG_OUT_DURATION;
29+
const enterDuration = getNumberArgByKey(sentence, 'enterDuration') ?? duration;
30+
duration = enterDuration;
31+
const exitDuration = getNumberArgByKey(sentence, 'exitDuration') ?? DEFAULT_BG_OUT_DURATION;
2832
const ease = getStringArgByKey(sentence, 'ease') ?? '';
2933

3034
const dispatch = webgalStore.dispatch;
@@ -42,21 +46,24 @@ export const changeBg = (sentence: ISentence): IPerform => {
4246
*/
4347
if (isUrlChanged) {
4448
dispatch(stageActions.removeEffectByTargetId(`bg-main`));
49+
dispatch(stageActions.removeAnimationSettingsByTarget(`bg-main`));
4550
}
4651

4752
// 处理 transform 和 默认 transform
4853
let animationObj: AnimationFrame[];
4954
if (transformString) {
5055
try {
5156
const frame = JSON.parse(transformString.toString()) as AnimationFrame;
52-
animationObj = generateTransformAnimationObj('bg-main', frame, duration, ease);
57+
animationObj = generateTransformAnimationObj('bg-main', frame, enterDuration, ease);
5358
// 因为是切换,必须把一开始的 alpha 改为 0
5459
animationObj[0].alpha = 0;
5560
const animationName = (Math.random() * 10).toString(16);
5661
const newAnimation: IUserAnimation = { name: animationName, effects: animationObj };
5762
WebGAL.animationManager.addAnimation(newAnimation);
5863
duration = getAnimateDuration(animationName);
59-
WebGAL.animationManager.nextEnterAnimationName.set('bg-main', animationName);
64+
webgalStore.dispatch(
65+
stageActions.updateAnimationSettings({ target: 'bg-main', key: 'enterAnimationName', value: animationName }),
66+
);
6067
} catch (e) {
6168
// 解析都错误了,歇逼吧
6269
applyDefaultTransform();
@@ -75,20 +82,36 @@ export const changeBg = (sentence: ISentence): IPerform => {
7582
const newAnimation: IUserAnimation = { name: animationName, effects: animationObj };
7683
WebGAL.animationManager.addAnimation(newAnimation);
7784
duration = getAnimateDuration(animationName);
78-
WebGAL.animationManager.nextEnterAnimationName.set('bg-main', animationName);
85+
webgalStore.dispatch(
86+
stageActions.updateAnimationSettings({ target: 'bg-main', key: 'enterAnimationName', value: animationName }),
87+
);
7988
}
8089

8190
// 应用动画的优先级更高一点
8291
const enterAnimation = getStringArgByKey(sentence, 'enter');
8392
const exitAnimation = getStringArgByKey(sentence, 'exit');
8493
if (enterAnimation) {
85-
WebGAL.animationManager.nextEnterAnimationName.set('bg-main', enterAnimation);
94+
webgalStore.dispatch(
95+
stageActions.updateAnimationSettings({ target: 'bg-main', key: 'enterAnimationName', value: enterAnimation }),
96+
);
8697
duration = getAnimateDuration(enterAnimation);
8798
}
8899
if (exitAnimation) {
89-
WebGAL.animationManager.nextExitAnimationName.set('bg-main-off', exitAnimation);
100+
webgalStore.dispatch(
101+
stageActions.updateAnimationSettings({ target: 'bg-main', key: 'exitAnimationName', value: exitAnimation }),
102+
);
90103
duration = getAnimateDuration(exitAnimation);
91104
}
105+
if (enterDuration >= 0) {
106+
webgalStore.dispatch(
107+
stageActions.updateAnimationSettings({ target: 'bg-main', key: 'enterDuration', value: enterDuration }),
108+
);
109+
}
110+
if (exitDuration >= 0) {
111+
webgalStore.dispatch(
112+
stageActions.updateAnimationSettings({ target: 'bg-main', key: 'exitDuration', value: exitDuration }),
113+
);
114+
}
92115

93116
/**
94117
* 背景状态后处理

packages/webgal/src/Core/gameScripts/changeFigure.ts

Lines changed: 28 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import { logger } from '@/Core/util/logger';
1212
import { getAnimateDuration } from '@/Core/Modules/animationFunctions';
1313
import { WebGAL } from '@/Core/WebGAL';
1414
import { baseBlinkParam, baseFocusParam, BlinkParam, FocusParam } from '@/Core/live2DCore';
15-
import { DEFALUT_FIG_IN_DURATION, WEBGAL_NONE } from '../constants';
15+
import { DEFAULT_FIG_IN_DURATION, DEFAULT_FIG_OUT_DURATION, WEBGAL_NONE } from '../constants';
1616
/**
1717
* 更改立绘
1818
* @param sentence 语句
@@ -87,10 +87,13 @@ export function changeFigure(sentence: ISentence): IPerform {
8787
// 其他参数
8888
const transformString = getStringArgByKey(sentence, 'transform');
8989
const ease = getStringArgByKey(sentence, 'ease') ?? '';
90-
let duration = getNumberArgByKey(sentence, 'duration') ?? DEFALUT_FIG_IN_DURATION;
90+
let duration = getNumberArgByKey(sentence, 'duration') ?? DEFAULT_FIG_IN_DURATION;
9191
const enterAnimation = getStringArgByKey(sentence, 'enter');
9292
const exitAnimation = getStringArgByKey(sentence, 'exit');
9393
let zIndex = getNumberArgByKey(sentence, 'zIndex') ?? -1;
94+
const enterDuration = getNumberArgByKey(sentence, 'enterDuration') ?? duration;
95+
duration = enterDuration;
96+
const exitDuration = getNumberArgByKey(sentence, 'exitDuration') ?? DEFAULT_FIG_OUT_DURATION;
9497

9598
const dispatch = webgalStore.dispatch;
9699

@@ -145,6 +148,7 @@ export function changeFigure(sentence: ISentence): IPerform {
145148
*/
146149
if (isUrlChanged) {
147150
webgalStore.dispatch(stageActions.removeEffectByTargetId(id));
151+
webgalStore.dispatch(stageActions.removeAnimationSettingsByTarget(id));
148152
const oldStageObject = WebGAL.gameplay.pixiStage?.getStageObjByKey(id);
149153
if (oldStageObject) {
150154
oldStageObject.isExiting = true;
@@ -164,7 +168,9 @@ export function changeFigure(sentence: ISentence): IPerform {
164168
const newAnimation: IUserAnimation = { name: animationName, effects: animationObj };
165169
WebGAL.animationManager.addAnimation(newAnimation);
166170
duration = getAnimateDuration(animationName);
167-
WebGAL.animationManager.nextEnterAnimationName.set(key, animationName);
171+
webgalStore.dispatch(
172+
stageActions.updateAnimationSettings({ target: key, key: 'enterAnimationName', value: animationName }),
173+
);
168174
} catch (e) {
169175
// 解析都错误了,歇逼吧
170176
applyDefaultTransform();
@@ -183,17 +189,33 @@ export function changeFigure(sentence: ISentence): IPerform {
183189
const newAnimation: IUserAnimation = { name: animationName, effects: animationObj };
184190
WebGAL.animationManager.addAnimation(newAnimation);
185191
duration = getAnimateDuration(animationName);
186-
WebGAL.animationManager.nextEnterAnimationName.set(key, animationName);
192+
webgalStore.dispatch(
193+
stageActions.updateAnimationSettings({ target: key, key: 'enterAnimationName', value: animationName }),
194+
);
187195
}
188196

189197
if (enterAnimation) {
190-
WebGAL.animationManager.nextEnterAnimationName.set(key, enterAnimation);
198+
webgalStore.dispatch(
199+
stageActions.updateAnimationSettings({ target: key, key: 'enterAnimationName', value: enterAnimation }),
200+
);
191201
duration = getAnimateDuration(enterAnimation);
192202
}
193203
if (exitAnimation) {
194-
WebGAL.animationManager.nextExitAnimationName.set(key + '-off', exitAnimation);
204+
webgalStore.dispatch(
205+
stageActions.updateAnimationSettings({ target: key, key: 'exitAnimationName', value: exitAnimation }),
206+
);
195207
duration = getAnimateDuration(exitAnimation);
196208
}
209+
if (enterDuration >= 0) {
210+
webgalStore.dispatch(
211+
stageActions.updateAnimationSettings({ target: key, key: 'enterDuration', value: enterDuration }),
212+
);
213+
}
214+
if (exitDuration >= 0) {
215+
webgalStore.dispatch(
216+
stageActions.updateAnimationSettings({ target: key, key: 'exitDuration', value: exitDuration }),
217+
);
218+
}
197219
};
198220

199221
function postFigureStateSet() {

packages/webgal/src/Core/gameScripts/setTransition.ts

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { IPerform } from '@/Core/Modules/perform/performInterface';
33
import { webgalStore } from '@/store/store';
44
import cloneDeep from 'lodash/cloneDeep';
55
import { getStringArgByKey } from '@/Core/util/getSentenceArg';
6-
import { setStage } from '@/store/stageReducer';
6+
import { setStage, stageActions } from '@/store/stageReducer';
77
import { WebGAL } from '@/Core/WebGAL';
88

99
/**
@@ -16,10 +16,14 @@ export const setTransition = (sentence: ISentence): IPerform => {
1616
const enterAnimation = getStringArgByKey(sentence, 'enter');
1717
const exitAnimation = getStringArgByKey(sentence, 'exit');
1818
if (enterAnimation) {
19-
WebGAL.animationManager.nextEnterAnimationName.set(key, enterAnimation);
19+
webgalStore.dispatch(
20+
stageActions.updateAnimationSettings({ target: key, key: 'enterAnimationName', value: enterAnimation }),
21+
);
2022
}
2123
if (exitAnimation) {
22-
WebGAL.animationManager.nextExitAnimationName.set(key + '-off', exitAnimation);
24+
webgalStore.dispatch(
25+
stageActions.updateAnimationSettings({ target: key, key: 'exitAnimationName', value: exitAnimation }),
26+
);
2327
}
2428
return {
2529
performName: 'none',

packages/webgal/src/store/stageInterface.ts

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -71,6 +71,22 @@ export interface IEffect {
7171
transform?: ITransform; // 变换
7272
}
7373

74+
export interface IStageAnimationSetting {
75+
target: string;
76+
enterAnimationName?: string;
77+
exitAnimationName?: string;
78+
enterDuration?: number;
79+
exitDuration?: number;
80+
}
81+
82+
export type StageAnimationSettingUpdatableKey = Exclude<keyof IStageAnimationSetting, 'target'>;
83+
84+
export interface IUpdateAnimationSettingPayload {
85+
target: string;
86+
key: StageAnimationSettingUpdatableKey;
87+
value: IStageAnimationSetting[StageAnimationSettingUpdatableKey];
88+
}
89+
7490
/**
7591
* 基本变换预设
7692
*/
@@ -203,6 +219,7 @@ export interface IStageState {
203219
miniAvatar: string; // 小头像 文件地址(相对或绝对)
204220
GameVar: IGameVar; // 游戏内变量
205221
effects: Array<IEffect>; // 应用的变换
222+
animationSettings: Array<IStageAnimationSetting>;
206223
bgTransform: string;
207224
bgFilter: string;
208225
PerformList: Array<IRunPerform>; // 要启动的演出列表

packages/webgal/src/store/stageReducer.ts

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,9 @@ import {
1515
IRunPerform,
1616
ISetGameVar,
1717
ISetStagePayload,
18+
IStageAnimationSetting,
1819
IStageState,
20+
IUpdateAnimationSettingPayload,
1921
} from '@/store/stageInterface';
2022
import { createSlice, PayloadAction } from '@reduxjs/toolkit';
2123
import cloneDeep from 'lodash/cloneDeep';
@@ -56,6 +58,7 @@ export const initState: IStageState = {
5658
transform: baseTransform,
5759
},
5860
],
61+
animationSettings: [],
5962
bgFilter: '', // 现在不用,先预留
6063
bgTransform: '', // 现在不用,先预留
6164
PerformList: [], // 要启动的演出列表
@@ -135,6 +138,27 @@ const stageSlice = createSlice({
135138
state.effects.splice(index, 1);
136139
}
137140
},
141+
updateAnimationSettings: (state, action: PayloadAction<IUpdateAnimationSettingPayload>) => {
142+
const { target, key, value } = action.payload;
143+
const animationIndex = state.animationSettings.findIndex((a) => a.target === target);
144+
if (animationIndex >= 0) {
145+
state.animationSettings[animationIndex] = {
146+
...state.animationSettings[animationIndex],
147+
[key]: value,
148+
};
149+
} else {
150+
state.animationSettings.push({
151+
target,
152+
[key]: value,
153+
});
154+
}
155+
},
156+
removeAnimationSettingsByTarget: (state, action: PayloadAction<string>) => {
157+
const index = state.animationSettings.findIndex((a) => a.target === action.payload);
158+
if (index >= 0) {
159+
state.animationSettings.splice(index, 1);
160+
}
161+
},
138162
addPerform: (state, action: PayloadAction<IRunPerform>) => {
139163
// 先检查是否有重复的,全部干掉
140164
const dupPerformIndex = state.PerformList.findIndex((p) => p.id === action.payload.id);

yarn.lock

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3676,9 +3676,9 @@ js-binary-schema-parser@^2.0.3:
36763676
integrity sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==
36773677

36783678
js-yaml@^4.1.0:
3679-
version "4.1.0"
3680-
resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-4.1.0.tgz#c1fb65f8f5017901cdd2c951864ba18458a10602"
3681-
integrity sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==
3679+
version "4.1.1"
3680+
resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-4.1.1.tgz#854c292467705b699476e1a2decc0c8a3458806b"
3681+
integrity sha512-qQKT4zQxXl8lLwBtHMWwaTcGfFOZviOJet3Oy/xmGk2gZH677CJM9EvtfdSkgWcATZhj/55JZ0rmy3myCT5lsA==
36823682
dependencies:
36833683
argparse "^2.0.1"
36843684

0 commit comments

Comments
 (0)