Get Familiar with the Animation Panel

The Animation panel is already included in the default layout of Cocos Creator, or open the Animation panel by clicking Panel -> Animation -> Animation Editor in the main menu above the editor.

The Animation panel can be divided into the following main sections.

1. Toolbar: some common function buttons, such as play/pause/stop animation, add event frame, save animation, quit editing, etc.
2. Node List: used to display/set the currently selected node and its child nodes.
3. Animation timeline and Keyframe Preview: used to display/set the event frames added to the current node (and its children) and the preview of all keyframes on the added animation property.
4. Animation Property List: used to display/set all animation properties included in the currently edited animation clip for the currently selected node.
5. Related properties of the current animation clip: used to set the playback mode, playback speed, etc. of the current animation clip.

For specific content, please refer to the following introduction.

The function buttons in the Menu toolbar are, from left to right.

2. Node list

This area shows the currently selected animation nodes and their children, arranged in a way that corresponds to the node tree in the Hierarchy panel. Click on the top button to hide/show nodes without animation data, or just type the node name in the input box to quickly find the node.

Currently, it is possible to right-click on a node to clear, migrate, copy and paste node data. For details, please refer to the documentation.

The animation timeline is mainly used to display/set the custom event frames added to the current node, the (blue diamond) of all animation properties added to the node (and its children) and to show the preview.

The time control line (red vertical line) indicates the time the current animation is at, and the currently selected time can be changed in several ways:

• Drag and drop the time control line directly
• Double click on the keyframe
• Using the relevant move control buttons in the menu toolbar
• Use shortcut keys, which can be found in the Shortcuts section below

• Click anywhere in the upper area of the animation timeline

  

If the time control line is moved, the nodes in the Scene panel will also move accordingly to the animation track.

Scale unit display of the timeline

The button in the Toolbar can be used to toggle the way the scale unit of the timeline is displayed. The value in the input box will change with the movement of the time control line. Manual input is supported, and the time control line will be automatically positioned to the corresponding position after the input is finished.

The following three display methods are currently supported:

• Time: 0-00 (default): the animation timeline scale is displayed as a combination of seconds and frames. The value in front of the input box means seconds, and the value after it means frames, for example means 1 second and 5 frames.

  

• Frame: 0: display the scale of the animation timeline in terms of frames.

The frame rate (Sample) is generally used to indicate how many frames a second is to be divided into, which can be adjusted in the Sample option at the bottom of the Animation panel. This is affected to a different extent when the scale unit of the timeline is displayed in different ways.

When the scale unit is set to Frame, it is in frames and is not affected by the frame rate.
When set to Time or Time(s), the same scale represents a different point in time as the frame rate changes, and the conversion between the two is calculated as follows:

For example, if the frame rate is set to 30 and a keyframe is added to the scale, the keyframe will be at frame 35 after the animation starts. Changing the frame rate to 10, the total number of frames where the keyframe is located does not change, it is still at frame 35 after the start of the animation, and the scale reading at the keyframe location becomes , which translates to exactly 3 times the previous time (s).

Changing the animation timeline scale

If the Animation panel display is too small and needs to be enlarged for more keyframes to be displayed within the editor, Just simply scroll the mouse wheel in either Animation Timeline and Animation Property Keyframe Preview area to scale the timeline up or down.

Moving the animation timeline display area

Drag and drop the middle/right mouse button in any area of the Animation Timeline or Animation Property Keyframe preview to see the hidden keyframes on the left/right side of the animation timeline that are outside the display area.

4. List of animation property

This area is mainly used to display/add/set the animation property of the currently selected node in the current Animation Clip. The animation properties include the node’s own properties, component properties (including those in user-defined script components), and the animation properties are added by clicking the + button in the upper right corner. Component properties are prefixed with the name of the component, e.g.: .

Right-click on the animation property or click button to the right of the animation property to select Remove Prop Track, Clear Keyframe Data, or Copy Prop Track. For details, please refer to the Common operations on animation property data documentation.

This area is mainly used to display the specific keyframe settings of the currently selected node on each animation property, and is also the main area for keyframe editing. Keyframes can be added by right-clicking on the animation property on the right side. This area also supports the ability to move, copy, and paste keyframes by checking and tapping on them. For details, please refer to the documentation.

When clicking on a keyframe, it will turn from blue to white and information about it will be displayed above the area, and double-clicking on the keyframe will move the time control line to its location.

6. Related properties of the current animation clip

The properties of the current Animation Clip that can be set directly on the Animation panel include: WrapMode, Sample, Speed and Duration. For details, please refer to the documentation.

The dividers between the node list and the timeline, and between the property list and the timeline are available for dragging and dropping to change the layout. By dragging and dropping it is possible to freely adjust the Animation panel to a layout effect suitable for editing.

Click on the menu toolbar’s button in the menu toolbar to open the shortcuts panel:

Shortcuts can be customized in the Animation panel. Directly click the shortcut key combination of the function to be modified. A prompt will appear as shown below.