• Runtimes

  • webgl animation control

    영어

Hi! I'm new to this forum, couldn't find answer to my question, in advance sorry if there was already one.

I'm using spine animation in my js app, it is working perfectly fine, but! the only animation that I can put on the page is the animation that I indicated at barebones.html.

Example: my spine animation has 3 states: idle, running and dancing.
When I indicate at barebones.html smth like that:
function load () {
if (assetManager.isLoadingComplete()) {
cat = loadCat("idle", true);
lastFrameTime = Date.now() / 1000;
requestAnimationFrame(render);
} else {
requestAnimationFrame(load);
}
}

on the final page I would see cat (state = idle) and I have no idea how to control my spine animation without adding extra buttons on the page. I wanted to change states using useEffect or set some const like animationState, setAnimationState, so I could freely control the state of animation.

is it possible?

Related Discussions
...

I assume you are referring to this example? https://github.com/EsotericSoftware/spine-runtimes/blob/3.8/spine-ts/webgl/example/barebones.html

The animation that's being played back is set here: https://github.com/EsotericSoftware/spine-runtimes/blob/3.8/spine-ts/webgl/example/barebones.html#L80

I.e. animationState.setAnimation(0, "animation-name", true). You can call this function whenever you want to set a new animation to be playing.

I'd highly recommend checking out our Spine Runtimes Guide

hm, I don't get it. I'm using iframe to visualize spine animation at my page.
How do I call this function to set a new animation?

should I write smth like that:

useEffect(() => {
if (smth === Smth.smth) {
animationState.setAnimation(0, "new_animation_name", true)
}
return () => {
}
}, [animationState]);

when I tried to do so I get an error Cannot find name 'animationState'. Did you mean 'onanimationstart'?ts(2552)

sorry for the lame questions, I'm newbie at development