Animation - Layer Parameters
Animation parameters do not distinguish between asset types
Last updated
Animation parameters do not distinguish between asset types
Last updated
What is Animation? Why Add Animation?
Animation refers to adding transitions or emphasis effects to static images, making them appear as if they are in motion.
When creating playable materials, we almost always use static images. By adding animations for these static images, the visuals can become more vivid and instructive, thereby enhancing the content's appeal and the user's trial experience. For example, animation can simulate dynamic effects such as the movement, scaling, and rotation of objects to achieve more expressive visual effects.
1οΌSelect the single layer or group layer where you want to add animation.
2οΌClick on "+Add Animation" and choose the appropriate animation from the four types available.
3οΌFurther adjust the animation parameters to complete the animation settings.
1οΌClick the icon button or "Play" to preview the current single animation within the canvas.
2οΌIf there are multiple animations on the same layer, click "Play all animation" to preview all animations on that layer within the canvas.
3οΌClick "Stop" or "Stop all animation" to pause the animation preview, and the animation will return to its initial state.
Clicking the icon button allows you to replace the current animation type or delete the animation.
1-1) Copying a single animation: Click the icon button to copy the current individual animation.
1-2) Copying multiple animations: Select the layers with animations and click the copy button.
2οΌThen, select the layer where you want to apply the animation >>> Paste >>> Paste the layer animation only.
By clicking the icon button "Apply to all layers within the group," you can conveniently copy and paste all animations from the currently selected layer to all layers at the same hierarchical level.
(When you need to create the same animation for multiple layers at the same hierarchical level, this feature allows for quick reuse.)
The animation includes four types: "Approach animation", "Exit animation", "Emphasize animation", and "Universal animation". Different animations have different parameters.
Loop Times
Support 3 cycle modes:
Play 1 time
One-way cycle
Two-way loop
β Play 1 time: The animation plays only once and stops when finished.
Delay
The duration of delay before the animation appears/plays.
Once enter the scene where the animation is located, the timer will start automatically.
Duration
The total time required for a complete playthrough of the animation.
For the same animation, a longer duration results in slower playback speed, and vice versa.
Autoplay
Default: Autoplay enabled.
Supports disabling autoplay.
β Autoplay: The animation starts playing automatically upon entering the scene where it is located.
(please note: If the initial state of the layer where the animation is located is set to "hidden," the animation will automatically play when the layer is first displayed.)
β‘Disable Autoplay: After disabling autoplay, the animation won't play by default and needs to be controlled through event settings.
Name
Supports customizing the animation name.
Tip: When there are multiple animations in a project, renaming them can help with easy reference when setting up events.
Opacity
Requires setting "Start" and "End" values.
Value range: 0% to 100%.
0%: Fully transparent.
100%: Fully visible.
Scale
Requires setting "Start Scale" and "End Scale" values.
Supports setting start/end scale to current value.
Scale X: Horizontal scale of the layer.
Scale Y: Vertical scale of the layer.
Displacement
β Requires setting the
displacement offset on the X and Y axes: Positive values represent downward/rightward displacements, while negative values represent upward/leftward displacements.
Use the red arrow icon to fine-tune the
displacement offset.
β‘Supports quick setting of the end position: Click "Show End Position" and drag the semi-transparent layer in the canvas to the target position, then click "Hide End Position."
β’Displacement offset supports separate settings for portrait and landscape orientations: By default, it is selected. When selected, the displacement offset need to be adjusted separately for portrait and landscape orientations (displacement offset set in portrait mode will not be applied in landscape mode).
Deselecting it means that the same displacement offset is used for both portrait and landscape orientations without the need for switching adjustments.
Rotation
Requires setting "Start" and "End" values.
No specific requirements for values; any angle can be set.
Color Change
Requires setting "Start Color" and "End Color".
Select colors from the color palette or use the color picker for quick selection.
"Universal" category animations additionally support editing the animation's curve.
"Curve" allows for custom and fine-tuned editing of animations. If the preset animations cannot meet your production needs, you can create more advanced and complex animations by customizing the curve.
1οΌClick on the curve thumbnail to open the Curve editor:
The horizontal axis represents time, and the vertical axis represents various variables corresponding to animation (displacement, alpha, spin, scale, color, etc.);
The starting point (0, 0) is the default initial state of the animation movement, and the end point (1, 1) is the default end state of the animation movement;
Moving the anchor point laterally will directly change the movement time of the object, and adjusting the slope of the curve will directly change the distribution of the movement speed of the object (the steeper the curve, the faster the speed, the smoother the curve, the slower the speed);
2οΌEdit curve style:
Choose curve templates: The Curve editor provides six preset curve styles that you can select and use.
Customize curve style:
Double-click anywhere on the curve to add keyframes.
Select a keyframe and drag the handle or use the options on the right to adjust the curve's curvature.
Adjust the position by selecting and dragging the keyframe.
Delete the current keyframe by selecting it.
For customized curve styles, you can click "Save current curve," edit the name, and save it as a template for future use.
After setting up the curve, click "Save" for the changes to take effect.
Take Displacement Easing as an example, the horizontal axis represents time, and the vertical axis represents displacement distance.Below are two common adjustment methods for animations:
a. After the object stays at the starting point for a period of time, it starts to move
b. The object stays at the beginning and end for a period of time and moves back and forth
Move the starting point of the curve to the right (delay the animation start time), and the object will complete the movement within the red frame time period;
β [cycles] select: two-way loop;
β‘ Move the start point of the curve to the right, and move the end point of the curve to the left (delay the animation start time and end the animation early), the object will complete the movement within the red frame time period;
For more commonly used animation setup methods, please refer to Creation Tips - Animation Setting
The asset type determines whether it supports adding and using animations. Here are the details:
Image
β
Text
β
Sequence
β
Particle
β
DragonBone
β
Group layer
β
Interactive area
Γ
Video
Γ
Sound effects
Γ
Background music
Γ
Scene
Γ
πRecommended ReadingοΌ Animation Issues Creation Tips - Animation Setting
β‘One-way cycle: Repeat the animation of K1~K3 β’Two-way loop: After K1 to K3, then from K3 to K1, and continue.
