Change the animation playback speed in the Spine Web Player, for example, running fast or running slow.
Change the animation playback speed
"Change the animation playback speed in the Spine Web Player, for example, running fast or running slow."
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.
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
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.