zenvin

Hi, I am using the spine web player with vuejs, currently the my animation will keep auto looping, is there any function i can use to make it only run once?

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,

});
zenvin
  • Mesajlar: 3

Mario

There's currently no way to have an animation not loop. Can you describe your use case a little? It seems that the player may be a bit of overkill for your use case. Maybe we should consider a simpler widget/view if your use case turns out to be more common.
Kullanıcı avatarı
Mario

Mario
  • Mesajlar: 3248

zenvin

Mario yazdı:There's currently no way to have an animation not loop. Can you describe your use case a little? It seems that the player may be a bit of overkill for your use case. Maybe we should consider a simpler widget/view if your use case turns out to be more common.
I want to display an animation when certain condition occur, then stop it when the animation end. What do you mean by simpler widget/view?
zenvin
  • Mesajlar: 3

Mario

The Spine web player is meant as a UI element similar to say a YouTube embed, with controls similar to a video player to scrub timelines, pause/resume, etc. As such, it may not be the best fit for your use case which appears to be playing animations based on events generated by your site.

While it is possible to hack the Spine web player to better fit your use case, it is likely easier and more in line with your needs to use pixi-spine for your use case. https://github.com/pixijs/spine
Kullanıcı avatarı
Mario

Mario
  • Mesajlar: 3248

Nate

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
Kullanıcı avatarı
Nate

Nate
  • Mesajlar: 12144

Mario

I've also added a convenience method to the player API called Player.setAnimation(animationName: string, loop: bool). You can see it in action in this example:
https://github.com/EsotericSoftware/spine-runtimes/blob/3.8/spine-ts/player/example/index.html#L44

This method will also honour your viewport configuration or recalculate it on the fly, as per the normal player behaviour.
Kullanıcı avatarı
Mario

Mario
  • Mesajlar: 3248


Dön Runtimes