[SOLVED] Animation States Set to Loop Cannot Be Interrupted

Does anyone have any idea why I am unable to make these loops interruptible? Essentially I have 3 tracks that need to be able to played at any point and whenever I try to switch tracks via a button, the program waits till the end of a loop to play the next one.

Here is the graph:

And here is the script that receives the index of the animation trigger, converts it to a string (it receives it as an integer), and then sets the appropriate trigger in the state machine:

this.app.on("changePlay", function(playIndex){
   //sets trigger to the state machine
   console.log("changing play to play" + playIndex);


Are you able to share a the project or a public test project to show the issue please?

We would need to see how the transitions have been set up

1 Like

@yaustar @Elliott
Here is the isolated issue. It is currently set up for mobile so if you want to move the camera around you’ll have to use a touch input.


The basic setup of the app is that the buttons on the top signify 3 separate animations. It starts as if the first button on the left has been pushed. If you click the green or blue buttons just once at the start, it will wait till the end of the current animation and then play the next one. Not really sure why it waits till the animation is over. You can also kind of break it by spamming different buttons, but sometimes it will “queue” the animations and it will play them all in order. I’d need to do a little more testing to describe that bug perfectly though.

What I need is for the buttons to interrupt any current animation and immediately transition to the next animation. Thanks in advance.

I’ve had a quick look and it’s because exit time is defined in the transitions. This means that the transition is only active when all conditions are met AND for the frame where exit time is defined.

Removing exit time (ie setting it to 0) ‘fixes’ this issue so that the transitions are active when the conditions are met (triggers) and for the duration of the transition, it’s set to be interruptible by the interruption source.

See fork: https://playcanvas.com/editor/scene/1363679

Not 100% what your end goal here is but if you just want to transition from one state to another at will, you can use the transition API instead of building a complex state graph: https://developer.playcanvas.com/en/api/pc.AnimComponentLayer.html#transition

You can see an example here: Animation without State Graph | Learn PlayCanvas (see source https://playcanvas.com/editor/code/841793?tabs=57840987)

1 Like

Thank you that fixed it.

I didn’t know that transition API existed. Thanks!