Creating a frame animation

Previous chapters wrote about the operation of Attribute Frames, now how to create a Frame Animation.

Adding a Sprite component to a node

First, we need to allow the node to display the texture normally, so we need to add a Sprite component to the node.

After selecting the node, use the Add Component button in the Property Inspector and select UI-> Render-> Sprite.

Add a cc.Sprite.spriteFrame to the attribute list

After the node can display the texture normally, an Attribute Track needs to be created for the texture.

Click the + next to the Property List of the Animation Editor. Select cc.SpriteComponent-> spriteFrame.

Adding a Frame

First, from the Explorer, drag the texture to the Attribute Frame area and place it on the cc.Sprite.spriteFrame track.

Next, drag the texture to be displayed in the next frame to the specified position, and then click Play to preview the animation that was just created.

If you drag multiple textures to the Attribute Track at the same time, the button textures are selected in the order on the track, and they are arranged in sequence according to the number of intervals displayed on the toolbar to generate key frames.

Arranging and modifying key frame intervals

The interval frame number of frame animation is usually fixed. Sometimes after adding multiple textures, if you want to adjust the interval number, you can fill in the desired interval frame number at the top of the toolbar Then select the key frame to be arranged, click Arrange button on the toolbar or right-click on the selected key frame and select Arrange selected key frames.

Continue to the Editing Animation Curves documentation.