You can access the AnimationState (and Skeleton, eg to set attachments, skins, move bones, etc) by using the success callback. For example, here is how you'd play an animation without looping:
var spinplayer = new spine.SpinePlayer(vm.$refs["animation-ball-holder"], {
jsonUrl: "img/dd12/dd12machine.json",
atlasUrl: "img/dd12/dd12machine.atlas.txt",
showControls: false ,
backgroundColor: "#00000000",
animation: "Red",
alpha: true,
// Added:
success: function (player) {
player.animationState.setAnimation(0, "Red", false); // false means don't loop
}
});
When messing with the AnimationState directly like this, we recommend using showControls: false so the player controls don't interfere.
See here for AnimationState documentation:
Applying Animations - Spine Runtimes Guide: AnimationState API
Here is how you can play two animations (jump then walk looping):
success: function (player) {
player.animationState.setAnimation(0, "jump", false);
player.animationState.addAnimation(0, "walk", true, 0);
}
Note that the viewport (the size and position the skeleton appears) by default is based on the skeleton bounds in the animation you specify for the player, animation: "Red" above. If you change the animation, the player will still use the same viewport.
We've added this to the docs:
Spine Web Player: Advanced playback
