Animating in Spine is done by using "key frames", which are also known as simply "keys". Keys define the start and end values of a transition. For any position between the keys, the value can be interpolated or "tweened". The art of animating a skeleton comes down to the poses defined by the keys and the positions of the keys on the timeline.
Before keys can be set, be sure Spine is in animate mode and that the visibility dot set in the tree for the animation you will be editing.
In animate mode, the skeleton's pose comes from the keys and the current timeline position. The timeline is found in the dopesheet view.
Each second of time is represented on the timeline as 30 frames. Clicking a frame on the timeline will set a new timeline position. Once keys are set they will appear in the dopesheet below the timeline. See the dopesheet for more information on working with both the timeline and dopesheet.
When changes are made to a skeleton in animate mode, they are not automatically stored. If the timeline position is changed, the changes are lost. To keep the changes, they need to be stored as a key by clicking the appropriate key button in the toolbar or tree.
The color of a key button is green if there is no key at the current frame, orange if a change has been made but not yet keyed, and red if there is a key at the current frame.
A key for rotation, translation, or scale is set by clicking the key button next to the numeric input for the respective tool in the toolbar.
Additionally, when a bone's transform has any unkeyed changes a orange key button appears next to the bone in the tree. Clicking this button creates a key only for the unkeyed changes.
It is currently not possible to key X and Y separately for translation or scale, X and Y are always keyed together.
When rotation is keyed, the direction the rotation takes is always the shortest path. To rotate more than 180 degrees, more than one key is needed.
For example, to rotate 360 degrees, 3 keys are needed.
To rotate by
360°, a bone needs to be keyed in 3 positions. If a complete spin takes
360°, each key needs to add
120° to the previous one. An example to rotate clockwise would be to go from
240° and lastly
0° again to loop the animation. To spin in the opposite direction the second and third key need to be inverted.
The keys need to be equally spaced on the dopesheet to make for a constant speed of rotation, therefore place the first and last frame, then the second frame needs to be at 1/3 of the spin, and the third frame at 2/3.
To key which attachment is visible for a slot, first show or hide the desired attachment in the tree by clicking the visibility dot next to the attachment. This will cause the slot's key button to turn orange and clicking the button will set a key.
To key the slot color, click the key button next to color button in the tree.
The key button next to the
Draw Order node in the tree will set a key for the current draw order. See draw order for more information.
The key buttons for setting event keys are next to each event the tree. The event's properties can be changed before setting a key. See events for more information.
To set a key for the vertex positions of a mesh, click the key button next to mesh in the tree. See meshes for more information.
To set a key for the vertex positions of a bounding box, click the key button next to bounding box in the tree. See bounding boxes for more information.
To set a key for the vertex positions of a path, click the key button next to path in the tree. See paths for more information.
To set a key for an IK constraint's mix and bend direction, click the key button next to the IK constraint in the tree. Both the mix and bend direction are keyed together. See IK constraints for more information.
To set a key for any of a transform constraint's mixes, click the key button next to the transform constraint in the tree. All the mixes are keyed together. See transform constraints for more information.
To set a key for a path constraint, click the key button next to the respective slider for the path constraint in the tree properties. See path constraints for more information.
The Dopesheet default behaviour locks scrubbing and key creation on frames. Hold
shift while clicking or dragging to set the timeline position between frames. This is especially useful while scrubbing to see the animation interpolate smoothly, and it allows key creation in between two frames.
This can be useful to mask transitions in the animation. For example there are two ways to animate the
Position property of a closed Path Constraint to create two complete loops.
One is to key the value
0 on frame
0 and manually type
200 on the last frame of the animation.
Another one is to key the value
100 at half of the animation, hold
shift and select the smallest distance possible, key the value
0, then key the value
100 at the end of the animation. If the animation is 30 frames long, the first key will go on frame
0, the second frame with the value
100 will go on frame
15, the third frame with the value
0 will go on frame
15.01, the last frame with the value
100 will go on frame
K on the keyboard is the hotkey for
Key Edited, which sets a key for all changes that are not yet keyed.
Auto Key is enabled in the dopesheet view, a key will be set automatically any time a change is made. See Auto key for more information.
If a skeleton has been posed at the wrong timeline position and has not yet been keyed, the pose is lost when the timeline position is changed. To recover the pose at the new timeline position, invoke undo by pressing
cmd+Z on Mac). However, if there is change to redo (
cmd+shift+Z on Mac) when the timeline position changed, then the pose cannot be recovered.
Clean Up button in the tree properties for an animation deletes all unnecessary keys. These are keys which can be safely deleted without affecting the poses in the animation. This includes keying the same thing multiple times in a row, keying the same values as the setup pose, and many other scenarios.
Often it is convenient to set keys liberally when designing an animation, then use
Clean Up at the end. Having fewer keys in the dopesheet makes it easier to work on an animation and fewer keys makes the data size of the animation smaller, especially when deform keys are removed. Also, when entire timelines can be removed, applying the animation at runtime uses slightly less CPU.
Multiple animations can be selected in the tree and
Clean Up will apply to all of them at once.
While most of the time
Clean Up should be used, there may be some scenarios when using it is undesirable. The most common scenario is when an animation is intended to be applied on a higher AnimationState track. In that case, keys may need to be set to override the animations of tracks below. There may be other, rare scenarios such as when AnimationState is not used at runtime or if runtime code is used to find a key and change its value.
Now is a great time to explore firsthand how keying works in Spine. If you haven't yet set up your own skeleton, you can open one of the example projects that come with Spine and create a new animation by clicking the
Animation node in the tree, then
New Animation. In animate mode, pose the skeleton at frame 0 and set keys (for example, by pressing
K). Next, click frame 30, pose the skeleton differently, and set keys. Scrub the timeline by dragging or click play to see your animation in action.