Key Frames

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.

Timeline

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.

Setting keys

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.

Transforms

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.

Rotation

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.

Attachments

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.

Color

To key the slot color, click the key button next to color button in the tree.

Draw order

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.

Events

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.

Meshes

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.

Bounding boxes

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.

Paths

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.

IK constraints

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.

Transform constraints

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.

Path constraints

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.

Shortcuts

Pressing K on the keyboard is the hotkey for Key Edited, which sets a key for all changes that are not yet keyed.

When 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 ctrl+Z (cmd+Z on Mac). However, if there is change to redo (ctrl+shift+Z, cmd+shift+Z on Mac) when the timeline position changed, then the pose cannot be recovered.

Clean Up

The 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.

Explore keying

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.

Video

Part 1:

Part 2:

Next: Animating Previous: Tools