About Animations

Before creating an Animation, you must first add an Animation Component to the node, and mount the clip file for the component before editing. Before that, it is necessary to first understand the related concepts of an Animation Clip and Animation Component.

Animation Component

Cocos Creator is a component structure, and Animation is no exception. It is also a component on the node. Only after adding an Animation Component to the node can the node be given the ability to participate in the animation. Therefore, after clicking on the relevant node, if the node does not have an Animation Component, the Add Animation Component button will be displayed on the interface of the Animation Editor, click to add.

add-component

To use Animation, please refer to the Animation API.

Clip Animation clip

An Animation Clip is a piece of declaration data for an animation. If we mount it on an Animation Component, we can apply this animation data to a node. An Animation Component can mount multiple Animation Clips. It is not possible to edit animations on nodes without clips. After clicking on the relevant nodes, if the node has only Animation Components, but no clip files, the Animation Editor will display the Create Clip File button, click to create and assign to the component. In the animation editing mode, you can also switch to edit different Animation Clips through the clip option in the lower left corner of the Animation Editor.

Animation editing mode

Animations are not allowed to be edited in normal mode. Only in animation editing mode can animation files be edited. However, in animation editing mode, you cannot add, delete, or rename nodes.

There are two ways to open edit mode:

  • Select the node that contains the Animation Component and contains more than one clip file, and then click the Enter animation editing mode button in the Animation panel.
  • Press, Ctrl/Cmd + E

There are three ways to exit edit mode:

  • Click the exit button in the upper right corner of the Animation Editor
  • Click the close button in the upper left corner of the Scene panel
  • Press, Ctrl/Cmd + E

For more details, refer to the Animation System Design and the Script Control.md) documentation.