Skip to content

fix: duration args not work on enter animation and exit animation whe… #716

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 1 commit into from
Closed

fix: duration args not work on enter animation and exit animation whe… #716

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
90 changes: 63 additions & 27 deletions packages/webgal/src/Core/gameScripts/changeBg/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,52 @@ import cloneDeep from 'lodash/cloneDeep';
import { getAnimateDuration } from '@/Core/Modules/animationFunctions';
import { WebGAL } from '@/Core/WebGAL';

function applyTransformAnimation({
duration,
ease,
transformString,
}: {
duration: number;
ease: string;
transformString?: string;
}) {
let frame: AnimationFrame | {} = {};
if (transformString) {
frame = JSON.parse(transformString.toString()) as AnimationFrame;
} else {
frame = {};
}

const animationObj = generateTransformAnimationObj('bg-main', frame as AnimationFrame, duration, ease);
// 因为是切换，必须把一开始的 alpha 改为 0
animationObj[0].alpha = 0;
const animationName = (Math.random() * 10).toString(16);
const newAnimation: IUserAnimation = { name: animationName, effects: animationObj };
WebGAL.animationManager.addAnimation(newAnimation);
WebGAL.animationManager.nextEnterAnimationName.set('bg-main', animationName);

const oldExitAnimation = WebGAL.animationManager.nextExitAnimationName.get(`bg-main-off`);
if (oldExitAnimation) {
WebGAL.animationManager.nextExitAnimationName.set(`bg-main-off-temp`, oldExitAnimation);
}

const frame2 = { ...frame };
const exitAnimationObj = generateTransformAnimationObj(`bg-main-off`, frame2 as AnimationFrame, duration, ease);
exitAnimationObj.reverse();
exitAnimationObj[exitAnimationObj.length - 1].alpha = 0;
exitAnimationObj[exitAnimationObj.length - 1].duration = exitAnimationObj[0].duration;
exitAnimationObj[0].duration = 0;
const exitAnimationName = (Math.random() * 10).toString(16);
const newExitAnimation: IUserAnimation = { name: exitAnimationName, effects: exitAnimationObj };
WebGAL.animationManager.addAnimation(newExitAnimation);
WebGAL.animationManager.nextExitAnimationName.set(`bg-main-off`, exitAnimationName);

if (oldExitAnimation) {
WebGAL.animationManager.nextExitAnimationName.set(`bg-main-off`, oldExitAnimation);
WebGAL.animationManager.nextExitAnimationName.delete(`bg-main-off-temp`);
}
}

/**
* 进行背景图片的切换
* @param sentence 语句
Expand Down Expand Up @@ -42,42 +88,32 @@ export const changeBg = (sentence: ISentence): IPerform => {

// 处理 transform 和 默认 transform
const transformString = getSentenceArgByKey(sentence, 'transform');
let duration = getSentenceArgByKey(sentence, 'duration');
let durationFromArg = getSentenceArgByKey(sentence, 'duration');
let ease = getSentenceArgByKey(sentence, 'ease')?.toString() ?? '';
if (!duration || typeof duration !== 'number') {
duration = 1000;
let duration = 1000;
if (typeof durationFromArg === 'number' && !isNaN(durationFromArg)) {
duration = durationFromArg;
}
let animationObj: AnimationFrame[];
if (transformString) {
try {
const frame = JSON.parse(transformString.toString()) as AnimationFrame;
animationObj = generateTransformAnimationObj('bg-main', frame, duration, ease);
// 因为是切换，必须把一开始的 alpha 改为 0
animationObj[0].alpha = 0;
const animationName = (Math.random() * 10).toString(16);
const newAnimation: IUserAnimation = { name: animationName, effects: animationObj };
WebGAL.animationManager.addAnimation(newAnimation);
duration = getAnimateDuration(animationName);
WebGAL.animationManager.nextEnterAnimationName.set('bg-main', animationName);
applyTransformAnimation({
duration,
ease,
transformString: transformString.toString(),
});
} catch (e) {
// 解析都错误了，歇逼吧
applyDefaultTransform();
applyTransformAnimation({
duration,
ease,
});
}
} else {
applyDefaultTransform();
}

function applyDefaultTransform() {
// 应用默认的
const frame = {};
animationObj = generateTransformAnimationObj('bg-main', frame as AnimationFrame, duration, ease);
// 因为是切换，必须把一开始的 alpha 改为 0
animationObj[0].alpha = 0;
const animationName = (Math.random() * 10).toString(16);
const newAnimation: IUserAnimation = { name: animationName, effects: animationObj };
WebGAL.animationManager.addAnimation(newAnimation);
duration = getAnimateDuration(animationName);
WebGAL.animationManager.nextEnterAnimationName.set('bg-main', animationName);
applyTransformAnimation({
duration,
ease,
});
}

// 应用动画的优先级更高一点
Expand Down
98 changes: 64 additions & 34 deletions packages/webgal/src/Core/gameScripts/changeFigure.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,61 @@ import { IFreeFigure, IStageState, ITransform } from '@/store/stageInterface';
import { AnimationFrame, IUserAnimation } from '@/Core/Modules/animations';
import { generateTransformAnimationObj } from '@/Core/controller/stage/pixi/animations/generateTransformAnimationObj';
import { assetSetter, fileType } from '@/Core/util/gameAssetsAccess/assetSetter';
import { logger } from '@/Core/util/logger';
import { getAnimateDuration } from '@/Core/Modules/animationFunctions';
import { WebGAL } from '@/Core/WebGAL';

function applyTransformAnimation({
key,
duration,
ease,
transformString,
}: {
key: string;
duration: number;
ease: string;
transformString?: string;
}) {
let frame: AnimationFrame | {} = {};
try {
if (transformString) {
frame = JSON.parse(transformString.toString()) as AnimationFrame;
}
} catch (e) {
// 解析失败，使用空帧
frame = {};
}

const animationObj = generateTransformAnimationObj(key, frame as AnimationFrame, duration, ease);
// 因为是切换，必须把一开始的 alpha 改为 0
animationObj[0].alpha = 0;
const animationName = (Math.random() * 10).toString(16);
const newAnimation: IUserAnimation = { name: animationName, effects: animationObj };
WebGAL.animationManager.addAnimation(newAnimation);
WebGAL.animationManager.nextEnterAnimationName.set(key, animationName);

const frame2 = { ...frame };

// 在设置新立绘的退出动画之前，先保存旧立绘的退出动画
const oldExitAnimation = WebGAL.animationManager.nextExitAnimationName.get(`${key}-off`);
if (oldExitAnimation) {
WebGAL.animationManager.nextExitAnimationName.set(`${key}-off-temp`, oldExitAnimation);
}

const exitAnimationObj = generateTransformAnimationObj(`${key}-off`, frame2 as AnimationFrame, duration, ease);
exitAnimationObj.reverse();
exitAnimationObj[exitAnimationObj.length - 1].alpha = 0;
exitAnimationObj[exitAnimationObj.length - 1].duration = exitAnimationObj[0].duration;
exitAnimationObj[0].duration = 0;
const exitAnimationName = (Math.random() * 10).toString(16);
const newExitAnimation: IUserAnimation = { name: exitAnimationName, effects: exitAnimationObj };
WebGAL.animationManager.addAnimation(newExitAnimation);
WebGAL.animationManager.nextExitAnimationName.set(`${key}-off`, exitAnimationName);

if (oldExitAnimation) {
WebGAL.animationManager.nextExitAnimationName.set(`${key}-off`, oldExitAnimation);
WebGAL.animationManager.nextExitAnimationName.delete(`${key}-off-temp`);
}
}
/**
* 更改立绘
* @param sentence 语句
Expand Down Expand Up @@ -165,47 +217,24 @@ export function changeFigure(sentence: ISentence): IPerform {
dispatch(stageActions.setFigureMetaData([deleteKey, 'zIndex', 0, true]));
dispatch(stageActions.setFigureMetaData([deleteKey2, 'zIndex', 0, true]));
}

const setAnimationNames = (key: string, sentence: ISentence) => {
// 处理 transform 和 默认 transform
const transformString = getSentenceArgByKey(sentence, 'transform');
const durationFromArg = getSentenceArgByKey(sentence, 'duration');
const ease = getSentenceArgByKey(sentence, 'ease')?.toString() ?? '';
if (durationFromArg && typeof durationFromArg === 'number') {

if (typeof durationFromArg === 'number' && !isNaN(durationFromArg)) {
duration = durationFromArg;
}
let animationObj: AnimationFrame[];
if (transformString) {
console.log(transformString);
try {
const frame = JSON.parse(transformString.toString()) as AnimationFrame;
animationObj = generateTransformAnimationObj(key, frame, duration, ease);
// 因为是切换，必须把一开始的 alpha 改为 0
animationObj[0].alpha = 0;
const animationName = (Math.random() * 10).toString(16);
const newAnimation: IUserAnimation = { name: animationName, effects: animationObj };
WebGAL.animationManager.addAnimation(newAnimation);
duration = getAnimateDuration(animationName);
WebGAL.animationManager.nextEnterAnimationName.set(key, animationName);
} catch (e) {
// 解析都错误了，歇逼吧
applyDefaultTransform();
}
} else {
applyDefaultTransform();
}

function applyDefaultTransform() {
// 应用默认的
const frame = {};
animationObj = generateTransformAnimationObj(key, frame as AnimationFrame, duration, ease);
// 因为是切换，必须把一开始的 alpha 改为 0
animationObj[0].alpha = 0;
const animationName = (Math.random() * 10).toString(16);
const newAnimation: IUserAnimation = { name: animationName, effects: animationObj };
WebGAL.animationManager.addAnimation(newAnimation);
duration = getAnimateDuration(animationName);
WebGAL.animationManager.nextEnterAnimationName.set(key, animationName);
}
applyTransformAnimation({
key,
duration,
ease,
transformString: transformString?.toString(),
});

const enterAnim = getSentenceArgByKey(sentence, 'enter');
const exitAnim = getSentenceArgByKey(sentence, 'exit');
if (enterAnim) {
Expand All @@ -217,6 +246,7 @@ export function changeFigure(sentence: ISentence): IPerform {
duration = getAnimateDuration(exitAnim.toString());
}
};

if (isFreeFigure) {
/**
* 下面的代码是设置自由立绘的
Expand Down