Creation Tips - Animation Setting
#Content Editor
Last updated
#Content Editor
Last updated
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.
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.
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.
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.
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.
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:
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.
π 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.
Note: The specific motion path of the object depends on the settings of the for the displacement.
