# Creation Tips - Animation Setting ## 1.Common operation guidance (finger animation)

Finger Animation	Illustration	Steps	Screenshot
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:

Illustration of scale animation curve styles

#### ## 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](https://doc.playturbo.com/playable-tools-content-editor/content-editor-creation-tips-center/common-creation-tips/pages/bLf5EaYqbNAgA6qmBX45#id-2.-special-parameter-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.

--- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://doc.playturbo.com/playable-tools-content-editor/content-editor-creation-tips-center/common-creation-tips/creation-tips-animation-setting.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.