Creation Tips - Animation Setting
#Content Editor
1.Common operation guidance (finger animation)
On-spot clicking
Finger Image: Add animation - Universal - Scale Easing. Set the parameters as shown in Image 1 on the right.
Click Effect Image (optional):
Add animation - Universal - Scale Easing & Alpha Easing. Set the parameters as shown in Image 2&3 on the right.
If you want to create a double-layered halo effect, you can duplicate another halo layer and set the "Delay Time" of both animations to 0.2s.
Moving click
Finger Image: Add animation - Universal - Displacement Easing. Set the parameters as shown in the image on the right.
Choose one of the two options
Finger Image: Add animation - Universal - Displacement Easing & Scale Easing. Set the parameters as shown in Image 1&2 on the right.
Option Buttons:
option_A: Add animation - Universal - Scale Easing. Set the parameters as shown in Image 3 on the right.
option_B: Duplicate the animation to option_B image and adjust the animation curve to the opposite direction. Set the parameters as shown in Image 4 on the right.
Choose one of the four options
Finger Image(horizontal movement): Add animation - Universal - Displacement Easing. Set the parameters as shown in image 1 on the right.
Optional: Add animation - Universal - Scale Easing & Alpha Easing. Set the parameters as shown in Image 2&3 on the right.
Finger Image Group(vertical movement): Add animation - Universal - Displacement Easing. Set the parameters as shown in image 4 on the right.
Option Buttons: Add animation - Universal - Scale Easing to the four options in sequence.
Left-Right Swipe
Finger Image: Add animation - Universal - Displacement Easing. Set the parameters as shown in the image on the right.
Swipe Cut
Finger Image Group：Add animation - Universal - Displacement Easing & Alpha Easing. Set the parameters as shown in the image 1&2 on the right.
Trail Effect (optional): You can directly place the trail image within the finger group, and it will move along with the group animation.
Figure-Eight Swipe
Finger Image(horizontal movement): Add animation - Universal - Displacement Easing. Set the parameters as shown in image 1 on the right.
Finger Image Group(vertical movement): Add animation - Universal - Displacement Easing. Set the parameters as shown in image 2 on the right.
Drag from point A to point B
Finger Image: Add animation - Universal - Displacement Easing. Set the parameters as shown in image 1 on the right.
Opacity Fade-In/Fade-Out Effect (optional): Add two animations - Universal - Displacement Easing to the finger group. Set the parameters as shown in Images 2&3 on the right.
2.How to set up a breathing animation for a character
Select the character layer and modify the pivot to (50, 100).
Add animation - Universal - Scale Easing to the character layer. Set the parameters as follows.
Note: Adjust the "End Scale" parameter according to your specific needs to control the magnitude of the character's scaling.
3.How to create a progress bar
Prepare two images: background image and progress bar image.
Select the progress bar layer, modify the pivot to (0, 50), and adjust it to the desired position.
Add animation - Universal - Scale Easing to the progress bar layer. Important parameter settings are as follows:
Play 1 time
Set the initial Scale X to 0, while keeping the Scale Y at the default value of 1.
Keep the end scale at the default value of 1.
4.How to create a blood bar
Prepare two images: background image and blood bar image.
Select the blood bar layer, modify the pivot to (0, 50), and adjust it to the desired position.
Add animation - Universal - Scale Easing to the blood bar layer. Important parameter settings are as follows:
Play 1 time
Keep the initial scale and the end scale Y unchanged at the default value of 1.
Adjust only the end scale X value, which represents the final blood value.
5.How to create an effect of "assets rotating around a specific origin"?
Taking a example of the screw puzzle gameplay, let's achieve the effect of rotating a wooden board 180° to the right with the screw as the origin.
1）Click on an empty area to create a new group layer with no content.
2）Move the position of the group to the location of the screw, which is the rotation origin (you can use the copy-paste function to quickly reuse the screw's position).
3）Select the group and add a "Spin Easing" animation.
4）Refer to the image below for the rotation animation parameter settings. Adjust the parameters according to your specific needs.
5）Drag the wooden board layer into the group, and the setup is complete.
6.How to create a "Character Running Back and Forth" Effect
Example: I have a sequence of frames for a character running in place. How can I create the effect of the character running back and forth?
Core Logic for Animation Setup: Use position animation combined with scale animation. When the character reaches the end point, change the scale values from (1,1) to (-1,1). The specific parameter settings are as follows:
7.Displacement Animation – Irregular/Curved Motion Path
To create non-linear displacement animations, the process is: group the object image, then set displacement animations on both the image and the group layer (one for horizontal movement, the other for vertical movement). The two animations play together to achieve the desired effect.
Note: The specific motion path of the object depends on the settings of the curve for the displacement.
🌟 Example with the finger guidance animation above:
Add a displacement animation to the finger image [gf_hand] to create the horizontal motion path.
Add a displacement animation to the group layer [group_hand] to create the vertical motion path.
Additional assets and animations can be added to enrich the guidance effect.
Last updated