Get Familiar with the Animation Panel

The Animation panel is used to edit and preview the animation clip of the currently selected node. When editing animation data or related properties, it will take effect immediately after mouse focus leaves.

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.

Panel Introduction

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

animation-editor

  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. Animation Property Keyframe Preview: used to display/set all keyframes on each animation property of the currently selected node.
  6. 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.

1. Menu Toolbar

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

Icon Description Shortcut
menu clips Toggle animation clips. When multiple animation clips are attached on the Animation component, this button can be used to toggle between clips. -
jump to first frame Moves the red time control line to the beginning of the current animation clip Ctrl/Cmd +
jump to previous frame Move time control line to previous frame
play/pause Play/pause current animation Ctrl/Cmd + P
jump to next frame Move the time control line to the next frame
jump to last frame Move the time control line to the end of the current animation clip Ctrl/Cmd +