From 335d0ed17fecd2880283d3f4b1bfc65c1ac99f56 Mon Sep 17 00:00:00 2001 From: Davide Tantillo Date: Tue, 20 May 2025 17:21:13 +0200 Subject: [PATCH] [ts][webcomponents] holdDurationLastAnimation to repeatDelay. --- spine-ts/spine-webcomponents/example/tutorial.html | 4 ++-- .../src/SpineWebComponentSkeleton.ts | 8 ++++---- spine-ts/spine-webcomponents/src/wcUtils.ts | 14 +++++++------- 3 files changed, 13 insertions(+), 13 deletions(-) diff --git a/spine-ts/spine-webcomponents/example/tutorial.html b/spine-ts/spine-webcomponents/example/tutorial.html index 90a3449d0..6fdbbf9d0 100644 --- a/spine-ts/spine-webcomponents/example/tutorial.html +++ b/spine-ts/spine-webcomponents/example/tutorial.html @@ -767,11 +767,11 @@
  • mixDuration: the mix duration between this animation and the previous one (not used for the first animation on a track)
  • -

    To loop a track once it reaches the end, add the special group [loop, trackNumber, holdDurationLastAnimation], where:

    +

    To loop a track once it reaches the end, add the special group [loop, trackNumber, repeatDelay], where:

    The parameters of the first group on each track are passed to the setAnimation method, while the remaining groups use addAnimation.

    diff --git a/spine-ts/spine-webcomponents/src/SpineWebComponentSkeleton.ts b/spine-ts/spine-webcomponents/src/SpineWebComponentSkeleton.ts index e4dcab519..34d17dba0 100644 --- a/spine-ts/spine-webcomponents/src/SpineWebComponentSkeleton.ts +++ b/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 }>; 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; diff --git a/spine-ts/spine-webcomponents/src/wcUtils.ts b/spine-ts/spine-webcomponents/src/wcUtils.ts index ebc46966e..69b05474f 100644 --- a/spine-ts/spine-webcomponents/src/wcUtils.ts +++ b/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, });