About Animation

Animation components and Animation clips

Cocos Creator is a componentized structure. Animation is no exception, it is a component in the Node.

Animation clips

Animation clips, however, are documents for saving animation data. Animation clips need to be mounted to Animation components to enable the engine to smoothly apply animation data to the Node.

Index of node data

path is animation component relative path. So, only one data copy of the same name node.

clip params

sample: The number of frames per second data,default 60

speed: Animation speed,default 1

duration: Animation duration ( speed = 1 )

real time: Play continued real time

wrap mode: Play Mode

Animate Editing Mode

Animation in normal mode is not allowed to edit only in movie editing mode, to be able to edit the clip. But in edit mode, the node can not be added / deleted / renamed operation.

Open edit mode

Close edit mode

Understanding animation editor

The Animation editor can be divided into 7 parts.


  1. Common button field, which displays some common functional buttons, such as: (from left to right) recording status switch, back to the first frame, last frame, play/stop, next frame, create a new animation clip and insert animation event.

  2. Timeline and event, which mainly displays timeline. The added user defined events will display here too.

  3. Node Tree management, which includes node data that can be influenced by the current animation clip.

  4. The preview field of the animation frame in nodes, which mainly displays the preview timeline of all the frames in each node.

  5. Property list, which displays the property lists of the currently chosen node that has been included in the chosen animation clip.

  6. Key frame. The frame corresponding to each property will display here.

  7. Basic properties of animation clip. After choosing the animation clip, the basic data will display here and can be modified.

Basic operation

Modify the zoom proportion of timeline

Modify the display area of timeline

Modify the currently chosen timeline node

Open/close recording status

Play/stop animation

Shortcut key

Continue on to read about Creating Animation component and animation clip.