Animation Editor

What is Animation Timeline

Animation Timeline is a .anim file created interactively thanks to the Timeline editor.

This is the way to give life and movement to the body of your robot.

Creating Animation Timeline

To create Animation Timeline files:

Step Action
Choose File > New > Animation Timeline.

Enter a name for your animation file and click Create button.


Your file is created in the resources directory and displayed in the Timeline Editor.


If the Robot emulator is not yet launch, a message invites you to launch it.

Click the message in order to launch the Robot emulator.

Timeline editor

Timeline editor lets you set your robot’s action for each frame. These are the key features of Timeline editor.

Index Description
Tool Bar
Actuator List
Frame Ruler
Motion Layer
Event Layer - For further details, see: Event interface.

Tool Bar

Tool Bar displays the buttons for the following functions

Index Name Description
1 Editor select

Select Keyframe or Curve editor

image30 Keyframe editor : The default editor that displays a detailed view of the Motion ruler.

image31 Curves editor: Editor that displays curves representing the evolution of the values of the selected joint(s).

2 Store actuator Store the actuator values of the robot’s current posture to the selected keyframe.
3 FPS Set the frame per second rate to play the animation.
4 Play/Stop Play/Stop the current animation set in Motion layer

Actuator List

Actuator List displays the list of Joints and Groups of Joints corresponding to the robot associated to the current Timeline.

Index Name Description
1 Actuators Select one or several joints to display in Timeline editor
2 Color Modify the color of a curve

Frame Ruler

Frame Ruler is the indicator that displays the frame numbers and you set the Start and End frames.

Index Name Description
1 Frames Shows the numbering of frames
2 Start frame The starting frame of the selected range (Green)
3 End frame The finishing frame of the selected range (Red)
4 Time cursor The current frame in the timeline (Blue)

Motion Layer

The Motion Layer is where the robot’s movements are stored in the Timeline. Each Motion keyframe on the Motion layer corresponds to a position of the robot or a part of its body.

Creating keyframe

Step Action
Right-click a frame in the grey Timeline and choose Store joints in keyframe.
Choose the joints you want to store the value of (Whole body, Head, Arms or Legs).

Selecting keyframe

Step Action
Click on a Motion keyframe and the robot will automatically take the position corresponding to this Motion keyframe.
Drag and drop Motion keyframes in the grey Timeline to select several Motion keyframes.
Right-click the grey Timeline and choose “Selection > Select” all to select all Motion keyframes.

Removing keyframe

Step Action
Select one or several Motion keyframes
Right-click it and choose Remove joints from keyframe.
Choose the joints you want to remove (Whole body, Head, Arms or Legs).

Moving keyframe

Step Action
Select one or several Motion keyframes
Drag and drop the selected Motion keyframes to the desired position.

Curves editor

Curves editor displays the change of the joint values between keyframes as curves. The editor allows you to fine-tune the joint values of your robot animation.

Curves are only displayed if connected to a robot. In fact, the curves depend on the robot configuration and joints limits.

These are the key features of Curves editor.

Index Description
Tool Bar
Actuator List (same as Timeline Editor’s)
Frame Ruler (same as Timeline Editor’s)
Motion Layer (same as Timeline Editor’s)
Event Layer (Event Layer is explained in “6.Event Interface”)

Curves editor displays the buttons for the following functions.


Index Name Description
1 Editor select / Store actuator The same functions as in Timeline editor
2 Mode Toggle between 3 modes: Selection, Zoom, Scroll
3 Interpolation modes

Set the interpolation modes of the selected Motion keyframe.

Interpolation modes : Bezier auto, Bezier smooth, Bezier symmetrical, Simplify, Show tangents, View all , Smooth, Symmetric

4 Keyframe select Select next/previous keyframe

Left/Right interpolation


Set left and right interpolation modes

Event interface


The events are not supported yet in the beta version of the Pepper SDK. Though some documentation is available for the editor tool, there is no way to deal with events on the developer side.

What is event interface

If you want your tablet to do some work while your robot is processing your animation, you can define events through Event interface. You can create Event Layers in Event Interface and each layer can have a set of events, each of which defines the task to be done in the tablet.

A sequence diagram of an Event Interface would look something like this.


By using Event Interface, you can add operations that will be carried out in the tablet side while playing your animation.

Create event

The Event Layers you define are saved in the animation file. In Event Interface, you can place your events in the appropriate animation frame when your event callback should be run. The actual task that is run should be defined in your Android source code.

To add an event, follow these steps.

Step Action
Open the animation file you want to add your event.

Click image49 button to add a layer. You can set the layer name to your preference.


After creating a layer, double click a location in the keyframe to add an event. You can set the event name to your preference.



You can delete an event by selecting the event and pressing Del key, or by clicking the delete option in the sub menu (open by right clicking the event). You can also move the keyframe of the event with drag & drop.