How to restart the Anim State?

I am currently working on Anim State and have encountered some issues. I want to trigger animations with some simple keyboard keys, and each animation is non looping. I am not sure how to execute the animation from the first frame again with a keyboard keys.
To add, ‘execute the animation from the first frame again with a keyboard key’ means that I want to restart the animation using the same keyboard button. For example, if key 1 starts animation 1, then when animation 1 is completed, I can use key 1 to restart it again
One more question:Can animations be set to reverse by script?


Anim State Graph Test - PLAYCANVAS

var TestAsgcontrol = pc.createScript('testAsgcontrol');

TestAsgcontrol.attributes.add('targetEntity', {
    type: 'entity'
});

// initialize code called once per entity
TestAsgcontrol.prototype.initialize = function () {
    this.graphNum = 0;
};

// update code called every frame
TestAsgcontrol.prototype.update = function (dt) {
    if (this.app.keyboard.wasPressed(pc.KEY_1)) {
        this.targetEntity.anim.setBoolean('asgc1', false);
        this.targetEntity.anim.setBoolean('asgc2', false);
        this.targetEntity.anim.setBoolean('asgc1', true);
        this.graphNum = 1;
    }
    if (this.app.keyboard.wasPressed(pc.KEY_2)) {
        this.targetEntity.anim.setBoolean('asgc1', false);
        this.targetEntity.anim.setBoolean('asgc2', false);
        this.targetEntity.anim.setBoolean('asgc2', true);
        this.graphNum = 2;
    }
    if (this.app.keyboard.wasPressed(pc.KEY_P)) {
        // pause
        this.targetEntity.anim.speed = 0;
    }
    if (this.app.keyboard.wasPressed(pc.KEY_S)) {
        // start
        this.targetEntity.anim.speed = 1;
    }
    // restart
    if (this.app.keyboard.wasPressed(pc.KEY_R)) {
        
    }
};

// swap method called for script hot-reloading
// inherit your script state here
// TestAsgcontrol.prototype.swap = function(old) { };

// to learn more about script anatomy, please read:
// https://developer.playcanvas.com/en/user-manual/scripting/

somebody help me? :disappointed_relieved:

Well… actually you could do something like described in this post to “reset” your animation to the initial state. But as you can see it comes with certain… caveats.

Edit: If you read down in that post you will find that it was all expected behavior actually. And you prob could use a similar setup if you just keep that in mind.

I reset my animation to the initial state,then active next animation,it works.
But I found another quertion:if I set state speed to -1 ,the animation only work one time

var IsAnim = pc.createScript('isAnim');

// initialize code called once per entity
IsAnim.prototype.initialize = function () {
    this.s2State = false;
    this.s3State = false;
    this.entity.anim.on('s2Done', () => {
        this.s2State = true;
    })
    this.entity.anim.on('s3Done', () => {
        this.s3State = true;
    })
};

// update code called every frame
IsAnim.prototype.update = function (dt) {
    if (this.app.keyboard.wasPressed(pc.KEY_1)) {
        this.entity.anim.setTrigger('isDefault');
    }
    if (this.app.keyboard.wasPressed(pc.KEY_2)) {
        if (this.s2State == true) {
            this.entity.anim.setTrigger('isDefault');
            this.s2State = false;
        }
        setTimeout(() => {
            this.entity.anim.setTrigger('isS2', true);
        }, 200);

    }
    if (this.app.keyboard.wasPressed(pc.KEY_3)) {
        if (this.s3State == true) {
            this.entity.anim.setTrigger('isDefault');
            this.s3State = false;
        }
        setTimeout(() => {
            this.entity.anim.setTrigger('isS3', true);
        }, 200);
    }
};

If using the graph editor, I would use the ANY state and add transitions between that to every state with a trigger param for each transition.

Then I would set the trigger with single frame enabled (see [SOLVED] Anim: triggering initial state leads to unexpected behaviour - #14 by yaustar) and also set the activeTime of the layer to 0 to ‘reset’ it. https://developer.playcanvas.com/en/api/pc.AnimComponentLayer.html#activeStateCurrentTime

No, they would need to be separate states ideally. Or you set the activeStateCurrentTime to the end and set the anim component speed to -1.

1 Like

When I press the keyboard button again, setting activeTime to 0 can drive the animation to execute again, right?

Yes. It’s been a while since I’ve tried it but that should work

Okay, I’ll give it a try :smiley: