First started animating using @react-spring/three's useSpring()
, and then got useSprings()
working, but only for one animation at a time still.
- How do I queue one animation after another?
- Is there a better way to detect when an animation is done than
.idle
and!.isAnimating
? - How to avoid manually queueing the animations?
Currently viewable at https://demo.robotjs.org/
Setup Springs:
const [springs, api] = useSprings(
1,
() => ({
jointAngles: jointAngles,
config: {
easing: easings.easeInOutQuad
}
}),
[]
)
Start a robot animation:
api.start({
jointAngles: randomJointAngles()
})
Check if it is done:
if ( springs[0].jointAngles.idle ) {
// end animation trigger
}
This is how I think it should be setup, but not sure how to trigger the different moves move[i]
without api.start()
.
const moves = [
...
]
const [springs, api] = useSprings(
moves.length,
i => (
{
jointAngles: moves[i],
config: {
easing: easings.easeInOutQuad
}
}
),
[]
)
My intuition tells me to handle the animation states outside of useSprings()
, or try out useChain()
.