Browse Source

[ts][webcomponents] holdDurationLastAnimation to repeatDelay.

Davide Tantillo 3 tháng trước cách đây
mục cha
commit
335d0ed17f

+ 2 - 2
spine-ts/spine-webcomponents/example/tutorial.html

@@ -767,11 +767,11 @@
                     <li><code>mixDuration</code>: the mix duration between this animation and the previous one (not used for the first animation on a track)</li>
                 </ol>
 
-                <p>To loop a track once it reaches the end, add the special group <code>[loop, trackNumber, holdDurationLastAnimation]</code>, where:</p>
+                <p>To loop a track once it reaches the end, add the special group <code>[loop, trackNumber, repeatDelay]</code>, where:</p>
                 <ul>
                     <li><code>loop</code>: identifies this as a loop instruction</li>
                     <li><code>trackNumber</code>: the number of the track to loop</li>
-                    <li><code>holdDurationLastAnimation</code>: the number of seconds to wait after the last animation is completed before repeating the loop</li>
+                    <li><code>repeatDelay</code>: the number of seconds to wait after the last animation is completed before repeating the loop</li>
                 </ul>
 
                 <p>The parameters of the first group on each track are passed to the <code>setAnimation</code> method, while the remaining groups use <code>addAnimation</code>.</p>

+ 4 - 4
spine-ts/spine-webcomponents/src/SpineWebComponentSkeleton.ts

@@ -60,7 +60,7 @@ export type OffScreenUpdateBehaviourType = "pause" | "update" | "pose";
 export type FitType = "fill" | "width" | "height" | "contain" | "cover" | "none" | "scaleDown" | "origin";
 export type AnimationsInfo = Record<string, {
 	cycle?: boolean,
-	holdDurationLastAnimation?: number;
+	repeatDelay?: number;
 	animations: Array<AnimationsType>
 }>;
 export type AnimationsType = { animationName: string | "#EMPTY#", loop?: boolean, delay?: number, mixDuration?: number };
@@ -1027,7 +1027,7 @@ export class SpineWebComponentSkeleton extends HTMLElement implements Disposable
 			state.data.defaultMix = defaultMix;
 
 			if (animationsInfo) {
-				for (const [trackIndexString, { cycle, animations, holdDurationLastAnimation }] of Object.entries(animationsInfo)) {
+				for (const [trackIndexString, { cycle, animations, repeatDelay }] of Object.entries(animationsInfo)) {
 					const cycleFn = () => {
 						const trackIndex = Number(trackIndexString);
 						for (const [index, { animationName, delay, loop, mixDuration }] of animations.entries()) {
@@ -1051,8 +1051,8 @@ export class SpineWebComponentSkeleton extends HTMLElement implements Disposable
 							if (cycle && index === animations.length - 1) {
 								track.listener = {
 									complete: () => {
-										if (holdDurationLastAnimation)
-											setTimeout(() => cycleFn(), 1000 * holdDurationLastAnimation);
+										if (repeatDelay)
+											setTimeout(() => cycleFn(), 1000 * repeatDelay);
 										else
 											cycleFn();
 										delete track.listener?.complete;

+ 7 - 7
spine-ts/spine-webcomponents/src/wcUtils.ts

@@ -102,7 +102,7 @@ function castToAnimationsInfo (value: string | null): AnimationsInfo | undefined
 	if (!matches) return undefined;
 
 	return matches.reduce((obj, group) => {
-		const [trackIndexStringOrLoopDefinition, animationNameOrTrackIndexStringCycle, loopOrHoldDurationLastAnimation, delayString, mixDurationString] = group.slice(1, -1).split(',').map(v => v.trim());
+		const [trackIndexStringOrLoopDefinition, animationNameOrTrackIndexStringCycle, loopOrRepeatDelay, delayString, mixDurationString] = group.slice(1, -1).split(',').map(v => v.trim());
 
 		if (trackIndexStringOrLoopDefinition === "loop") {
 			if (!Number.isInteger(Number(animationNameOrTrackIndexStringCycle))) {
@@ -111,12 +111,12 @@ function castToAnimationsInfo (value: string | null): AnimationsInfo | undefined
 			const animationInfoObject = obj[animationNameOrTrackIndexStringCycle] ||= { animations: [] };
 			animationInfoObject.cycle = true;
 
-			if (loopOrHoldDurationLastAnimation !== undefined) {
-				const holdDurationLastAnimation = Number(loopOrHoldDurationLastAnimation);
-				if (Number.isNaN(holdDurationLastAnimation)) {
-					throw new Error(`If present, duration of last animation of cycle in ${group} must be a positive integer number, instead it is ${loopOrHoldDurationLastAnimation}. Original value: ${value}`);
+			if (loopOrRepeatDelay !== undefined) {
+				const repeatDelay = Number(loopOrRepeatDelay);
+				if (Number.isNaN(repeatDelay)) {
+					throw new Error(`If present, duration of last animation of cycle in ${group} must be a positive integer number, instead it is ${loopOrRepeatDelay}. Original value: ${value}`);
 				}
-				animationInfoObject.holdDurationLastAnimation = holdDurationLastAnimation;
+				animationInfoObject.repeatDelay = repeatDelay;
 			}
 
 			return obj;
@@ -146,7 +146,7 @@ function castToAnimationsInfo (value: string | null): AnimationsInfo | undefined
 		const animationInfoObject = obj[trackIndexStringOrLoopDefinition] ||= { animations: [] };
 		animationInfoObject.animations.push({
 			animationName: animationNameOrTrackIndexStringCycle,
-			loop: loopOrHoldDurationLastAnimation.trim().toLowerCase() === "true",
+			loop: loopOrRepeatDelay.trim().toLowerCase() === "true",
 			delay,
 			mixDuration,
 		});