• Runtimes

  • Are transitions possible with the spine-widget.js?

Related Discussions
...

Pretty much wondering exactly what the subject suggests. I've got the animations running nicely and can switch between them, but I was hoping to be able to smoothly transition from one to the other. Is that something that is possible?

Yes, that should be very easy! Can you show me the code you use to queue up multiple animations?

Very easy?? I want to know it too!

Awesome! I've got this feeding into a div:

<script>
new spine.SpineWidget("spine-widget", {
    json: "assets/Clone_Guy1.json",
    atlas: "assets/Clone_Guy1.atlas",
    animation: "idleWave",
    backgroundColor: "#00000000",
    debug: false,
        fitToCanvas: true,
        premultipliedAlpha: "true",
    success: function (widget) {
        var animIndex = 0;
        widget.canvas.onclick = function () {
            animIndex++;

        var customAnimationList = ["idleWave","Idle1", "Idle2", "godzillaStomp", "run1", "skip2", "walk1", "tipToe1", "walk2"];
        if (animIndex >= customAnimationList.length) animIndex = 0;
        widget.setAnimation(customAnimationList[animIndex]);


    }
}
});
</script>

Thanks!

Sorry to nudge. Any update on this?

Sorry for the late reply.

I've created an example using our Spineboy here https://rawgit.com/EsotericSoftware/spine-runtimes/3.7-beta-cpp/spine-ts/widget/example/transitions.html

You can just right-click and "View source". The code that governs how animations are mixed is this:

widget.state.data.defaultMix = 0.2;
widget.state.data.setMix("jump", "run", 1)

widget.state gives you an AnimationState. That's the thing with which you can set/queue animations (it's what widget.setAnimation() uses internally).

That animation state has an AnimationStateData, which we can get via widget.state.data. It has a property called defaultMix that we set to 0.2 (seconds) in the first line. It means "state, when i set a new animation, please mix it with the currently playing one for 0.2 seconds". That's what the first line does: set the mix duration between every pair of possible animations.

The second line lets you specialize the mix duration between two animations. Again we use the AnimationStateData object via widget.state.data. This time we call a method called setMix(). It takes the names of 2 animations and a mix duration. Say currently "jump" is played back. Now you call setAnimation("run"). The AnimationState will then check if for that pair "jump" -> "run" there's a mix duration in the AnimationStateData. Which there is in this case, because we called setMix("jump", "run", 1), so the two animations get mixed for 1 second. If no such mix duration is found, the defaultMix value is used.

Hope that helps!

THAT IS AWESOME! I"m going to give it a shot. Thanks so much.

Just tested and it works beautifully. Thanks again! And so easy to implement!