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 3D 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.

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.

Opening edit mode:

• Select the node that contains the Animation Component and contains more than one clip file. Click the button to enter the animation editing mode in the upper left corner of the Animation Editor.
• Press, Ctrl/Cmd+E

Exiting edit mode:

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

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

Continue to the Animation Editor documentation.