# Animations

Now that you have your skeletons, its time to animate them. An animation has a list of keyframes, ie, skeleton poses and times. When you play an animation, cocos will pose your skeleton according to the current time, interpolating between the previous and next frame.

# The animator editor

Start the animation editor doing:

    tools/skeleton$ python animator.py ../../test/sample_skeleton.py --skin ../../test/sample_skin.py ../../test/SAMPLE.anim

On the top you can see the timeline with the keyframes in blue and the current position marked in yellow.

You can also see the first keyframe, with its skin and control points.

You can control the animator with the following keys:

> - S: Save the current animator
> - LEFT: move $TICK_DELTA time to the left
> - RIGHT: move $TICK_DELTA time to the right
> - PLUS: add a keyframe in the current position
> - MINUS: remove the keyframe in the current position
> - PAGE UP: Move to the previous keyframe
> - PAGE DOWN: Move to the next keyframe
> - INSERT: insert $TICK_DELTA time at the current position
> - DELETE: delete $TICK_DELTA time at the current position
> - HOME: Go to the start of the animation
> - END: Go to the end of the animation
> - SPACE: Play the animation

When standing on a keyframe you will see some control points, that you can move to edit the keyframe.

$TICK_DELTA is 1/16 of a second.

# Playing animations

You can play an animation on a skin doing:

from test/test_skeleton_anim.py:

    class TestLayer(cocos.layer.Layer):
        def __init__(self):
            super( TestLayer, self ).__init__()

            x,y = director.get_window_size()
            self.skin = skeleton.BitmapSkin(sample_skeleton.skeleton, sample_skin.skin)
            self.add( self.skin )
            x, y = director.get_window_size()
            self.skin.position = x/2, y/2
            anim = cPickle.load(open("SAMPLE.anim"))
            self.skin.do( cocos.actions.Repeat( skeleton.Animate(anim) ) )

The Animate action has the following parameters: recenter, recenter_x, recenter_y. This control how the skeleton position is moved. If you run two walk left animations without translation you will see a player move left, go to the origin and move left again. if you use translation, the player will just move left twicenas far.

Also, animations can be flipped, which makes the character look to the other side.