In the previous article, we introduced the description of the function panel related to the animation editor. Interested friends can go and read: CocosCreator3.8 Research Notes (23) CocosCreator Animation System - Description of the Function Panel Related to the Animation Editor .
Once you are familiar with the basic operations of the animation editor, it will be relatively simple to use the animation editor to create animations.
Today, we will introduce a practical case of animation editor to achieve dynamic watermark effect with key frame animation.
Before proceeding with the actual operation, we need to know what are keyframes? How to use keyframes?
1. The concept of key frames
Before understanding key frames, we need to understand a concept first - what is a frame?
1. What is a frame?
A frame is the smallest unit of a single picture in animation, which is equivalent to each frame of footage on a film. On the timeline of the animation editor, a frame is represented as a frame or a mark.
As shown below:
The time control line is the 10th frame. Counting forward, there are 10 grids, each of which is 1 frame.
2. What are key frames?
Key frame - as the name suggests, refers to the frame where the key action occurs when an object changes or moves. It plays a very critical role in producing more detailed animation effects. It is a function often used in animation or video production.
For example: Frames 1, 4, and 9 in the picture below are all key frames.
2. Use of key frames
1. Add keyframes
There are many ways to add keyframes:
-
Select the animation properties and use the shortcut key K to add keyframes at the location of the time control line.
For example, the following picture:
We select the attribute postion of the Label-001 node, and then press the shortcut key k at the 10th frame of the time control line to add a key frame.
- Move the time control line to the position where you need to add a keyframe, and click the keyframe button on the right side of the animation attribute to add a keyframe to the current animation attribute track.
As shown in the picture below, we move the time control line to the position of frame 8, and then press the diamond button on the right side of the attribute postion:
Also added keyframes:
-
In the property track of the animation properties, right-click the location where you want to add a keyframe, and select Add Keyframe in the pop-up menu.
As shown in the picture:
At frame 7, right-click to pop up the menu and select Add Keyframe.
2. Select keyframes
The selected keyframe will change from white to blue. There are several ways to select the keyframe:
- Click a keyframe on the Animation Properties track to select it
- Double-click the keyframe to select the keyframe and move the time control line to the location of the current keyframe.
- Supports multiple keyframe selection, hold down ctrl and select multiple keyframes, and select multiple keyframes by box
After selecting the animation properties, hold down ctrl+a to select all keyframes:
3. Move keyframes
Drag while selecting the keyframe to move the keyframe to the desired location.
- When dragging a single keyframe, a small white box will appear below the keyframe, showing the number of frames during the movement and the distance moved.
As shown below, select the key frame of frame 4 and drag it to the position of frame 14:
- When dragging multiple keyframes, the left and right sides of the box will display the number of frames in the animation timeline of the first and last keyframes during the movement.
4. Zoom keyframes
When multiple keyframes are selected, two control auxiliary bars will be displayed on the first and last keyframes. Drag any control bar to move the selected keyframes to scale the entire selected keyframe.
As shown in the picture, pull back the control auxiliary lever to zoom in to frame 17.
5. Arrange key frames at intervals
After selecting multiple keyframes, click the Arrange Keyframes at intervals button in the menu bar above. The selected keyframes will be arranged in sequence based on the first keyframe and the number of interval frames set in the Interval Number input box.
6. Copy and paste keyframes
How to copy and paste keyframe data:
- After selecting the keyframe (multiple selections possible), use the shortcut keys Ctrl + C and Ctrl + V to copy and paste. It should be noted that the position where the shortcut key is pasted will be based on the position of the current time control line as the starting point.
As shown in the figure, select the 9th, 10th, and 11th keyframes, press Ctrl + C, and then press Ctrl + V at the control line of the 15th frame to achieve the effect:
- After selecting the keyframe (multiple selections possible), right-click (any) keyframe, select Copy Keyframe in the pop-up menu , then right-click on the target animation attribute track, and select Paste Keyframe to copy the keyframe to the current animation attribute track. Paste keyframes on.
7. Delete key frames
- Select the keyframes that need to be deleted (multiple selections possible) and press the Delete key (Windows) or Cmd + Backspace (macOS)
- Select the keyframes that need to be deleted (multiple selections are allowed), then right-click and select Remove Keyframes in the pop-up menu .
Drag the time control line to the position of the keyframe that needs to be removed or double- click the keyframe directly, and then click the diamond button to the right of the corresponding animation attribute in the animation attribute list.
3. Practical cases
We will use the example of making Label moving animation to achieve dynamic watermark effect as an example.
Suppose we want to achieve the following animation effect:
The text moves from the upper left corner to the upper right corner, then from the upper right corner to the lower right corner, then from the lower right corner to the lower left corner, and finally from the lower left corner back to the upper right corner.
The first step is to select the Label-001 node and add the position attribute in the attribute list.
The second step is to add a keyframe at frame 0 on the attribute event axis and set the position in the attribute inspector: (-400, -500)
The third step is to add a keyframe at frame 10 on the attribute event axis and set the position in the attribute inspector: (400, 500)
The fourth step is to add a keyframe at frame 20 on the attribute event axis and set the position in the attribute inspector: (400, -500)
The fifth step is to add a keyframe at frame 30 on the attribute event axis and set the position in the attribute inspector: (-400, -500)
The sixth step is to add a keyframe at frame 40 on the attribute event axis and set the position in the attribute inspector: (-400, 500)
Okay, now, the keyframe dynamic watermark effect is completed. Click the play button to preview the effect.
Of course, the demonstration effect is relatively fast, and the position of the key frames can be adjusted to achieve better effects.
