Ce site est optimisé pour être consulté depuis un navigateur moderne dans lequel JavaScript est activé.

Change the animation playback speed

xiaoxiong

Change the animation playback speed in the Spine Web Player, for example, running fast or running slow.

Misaki

xiaoxiong You can change the playback speed of an animation by changing the timeScale of the TrackEntry object that is returned when you set the animation to an AnimationState track.

You can write something like the following:

var trackEntry = player.animationState.setAnimation(0, "run", true);
trackEntry.timeScale = 0.5; // slow down the run animation.

For more information on how to play using animationState, please see the Spine Web Player documentation: https://zh.esotericsoftware.com/spine-player#%E9%AB%98%E7%BA%A7%E5%9B%9E%E6%94%BE%E8%AE%BE%E7%BD%AE

Davide

xiaoxiong
I just want to add another piece of information on how to control the animations speed on the web player.
When the player UI is not hidden - that means showControls: true - you can control the speed by pressing the gear button and moving the speed slider.

If the UI is hidden (showControls: false), you can still control that value by code. Once you create the player, you can set the speed by changing the speed property.

const player = new spine.SpinePlayer("player-container", { ... });
player.speed = 2;

Be aware that this is a high level way of modifying the animation speed. If you want a finer control, you can access the animationState as Misaki suggested.

xiaoxiong

"Change the animation playback speed in the Spine Web Player, for example, running fast or running slow."

Spinebot

To change the animation playback speed in the Spine Web Player, you can use the timeScale property of the TrackEntry object. This allows you to control the speed of a particular animation. Here is an example of how you can achieve this:

<script>
new spine.SpinePlayer("player-container", {
   jsonUrl: "path/to/your/skeleton.json",
   atlasUrl: "path/to/your/atlas.atlas",
   animation: "run",
   success: function (player) {
      // Access the animation state
      var animationState = player.animationState;
      // Set the animation with a specific time scale
      var trackEntry = animationState.setAnimation(0, "run", true);
      trackEntry.timeScale = 2.0; // Speed up the animation (2x speed)
   },
   error: function (player, reason) {
      alert(reason);
   }
});
</script>

In this example, the timeScale is set to 2.0, which means the animation will play at twice the normal speed. You can adjust the timeScale value to make the animation run faster or slower. For instance, setting timeScale to 0.5 will make the animation play at half the normal speed.

For more detailed control, you can refer to the Spine Web Player documentation.