Anima.Group
Anima.Group class reference
This class is used to animate all the direct child of the node specified.
Syntax
Anima.Group(group: Node, items_delay: float, animation_type: int = GROUP.FROM_TOP, point := 0)
param | type | Default | Description |
---|---|---|---|
group | Node | The node of whom children we want to animate | |
items_delay | float | The incremental delay to apply for each child of the group | |
animation_type | ANIMA.GRID | ANIMA.GROUP.FROM_TOP | The order to which animate the elements |
index | int | 0 | The starting index of the animation |
Animation type
The animation type parameter is used to define how to animate the nodes inside the group or create staggered animations.
Option | Description |
---|---|
FROM_TOP | Animates the group items from top to down |
FROM_BOTTOM | Animates the group items from bottom to top |
FROM_CENTER | Animated the items from the center of the group to the top and bottom at the same time. |
TOGETHER | Animates all the items at the same time. items_delay is ignored |
ODDS_ONLY | Animates the group odd items only, starting from the top |
EVEN_ONLY | Animates the even items only, starting from the top |
RANDOM | Randomize the group starting point |
FROM_INDEX | The item index to start the animation |
Staggered Animation
Selecting the starting index is inside the range ]0, GROUP_LENGTH[
creates a staggering animation, where node starting delay depends by its absolute distance from that point.
Let’s consider the following group with 7 buttons:
And animate them from the middle using, for semplicity, a delay of 1 second between each node:
Anima.Group($Control, 1, ANIMA.GROUP.FROM_CENTER) \
.anima_fade_in()
# or
Anima.Group($Control, 1, ANIMA.GROUP.FROM_INDEX, ($Control.get_child_count() - 1) / 2) \
.anima_fade_in()
The middle node of this group is: Button4 with an index of 3, then:
- Button3 and Button5 have an absolute distance from Button4 of 1
- Button2 and Button5 have an absolute distance from Button4 of 2
- Button1 and Button5 have an absolute distance from Button4 of 3
So this is equivalent to:
- Fade in Button4
- Wait 1 second
- Fade in Button3 and Button5
- Wait 1 second
- Fade in Button2 and Button6
- Wait 1 second
- Fade in Button1 and Button7
Staggered Animation
Selecting the starting index is inside the range ]0, GROUP_LENGTH[
creates a staggering animation, where node starting delay depends by its absolute distance from that point.
Let’s consider the following group with 7 buttons:
And animate them from the middle using, for semplicity, a delay of 1 second between each node:
Anima.Grid($Control, 1, ANIMA.GROUP.FROM_CENTER) \
.anima_fade_in()
The middle node of this group is: Button4 with an index of 3, then:
- Button3 and Button5 have an absolute distance from Button4 of 1
- Button2 and Button5 have an absolute distance from Button4 of 2
- Button1 and Button5 have an absolute distance from Button4 of 3
So this is equivalent to:
- Fade in Button4
- Wait 1 second
- Fade in Button3 and Button5
- Wait 1 second
- Fade in Button2 and Button6
- Wait 1 second
- Fade in Button1 and Button7
Methods
NOTE: For commodity, all the class methods start with the anima_
prefix. This allows us to filter out all the Godot default class methods:
as_reusable
Tells Anima to keep the node in the scene after the animation completes.
Syntax
as_reusable()
anima_animation
Animates the Grid using the given animation name.
Syntax
anima_animation(animation: String, duration: float)
animation
string required- The animation name
duration
float optional- The animation duration (in seconds). If null, the default duration is used
Example
Anim.Grid(Vector2(2, 2), 0.1).anima_animation("zoomIn")
anima_animation_frames
Animates the Grid using a CSS-Style inline animation.
NOTE: For more info check the Animation Keyframes tutorial
Syntax
anima_animation_frames(frames: Dictionary, duration: float)
frames
Dictionary required- The animation frames. SeeCreate a custom keyframes animation for more information about the syntax
duration
float optional- The animation duration (in seconds). If null, the default duration is used
Example:
Anim.Grid(Vector2(2, 2), 0.1).anima_animation_frames({
from = {
opacity = 0,
x = 0,
y = 0,
},
to = {
opacity = 1,
x = 100
y = 100
},
easing = AnimaEasing.EASING.EASE_IN_OUT
})
anima_property
Animates the given property.
Compared to the other property specific fuctions, like anima_position_x
this method allows us to specify a dynamic value
Syntax
anima_property(property: String, final_value: Variant, duration: float)
property
string required
The property to animate it can be any node property that can be accessed, even exported variables. For example:
- size
- position
We can also specify the subkey of the Vector2
, Vector3
or Rect2
we want to animate, for example:
- size:x
- position:y
- size:width
Anima also recognised these built-in property names:
property | description |
---|---|
x | This is equivalent to position:x or rect_position:x |
y | This is equivalent to position:y or rect_position:x |
z | This is equivalent to position:z or rect_position:x |
width | This is equivalent to size:x or rect_size:x |
height | This is equivalent to size:y or rect_size:y |
shared_param | This will call set_shader_param |
final_value
Variant required- (Optional) The final value. If null, the current property value is used as final value
duration
float optional- The animation duration (seconds). If null, the default duration is used
Example
Anima.Grid(Vector2(2, 2), 0.1).anima_property("size:x").anima_from(100)
Anima.Grid(Vector2(2, 2), 0.1).anima_property("x", 200)
position vs rect_position
Although Godot prefixes some of the Controls properties with rect_
, we don’t need to worry about that; Anima will figure out the correct property name.
For example:
Anima.Grid($Control).anima_property("position:x", 100 ) # Animates rect_position.x
Anima.Grid($Node2D).anima_property("position:x", 100 ) # Animates position.x
anima_as_relative
Tells anima that the final value is a relative one
Syntax
anima_as_relative()
Example
Anima.Grid(Vector2(2, 2), 0.1).anima_scale_x(0.8).anima_as_relative()
anima_delay
The delay to use before starting the animation.
Syntax
anima_delay(delay: float)
NOTE: You can also use negative values to anticipate a sequential/parallel animation
Example
Anima.Grid(Vector2(2, 2), 0.1).anima_scale_x(0.8).anima_delay(0.5)
# or
Anima.Grid(Vector2(2, 2), 0.1).anima_scale_x(0.8).anima_delay(-0.5)
anima_distance_formula
The formula to use to calculate the distance between the elements.
Syntax
.anima_distance_formula(formula: ANIMA.DISTANCE)
formula
ANIMA.DISTANCE required- The formula to use to calculate the distance between the elements
Formula
enum DISTANCE {
EUCLIDIAN,
MANHATTAN,
CHEBYSHEV,
COLUMN,
ROW,
DIAGONAL,
}
To visualize the effects of different easing formulas, explore these resources:
These demonstrations will provide a clear understanding of how easing points influence animation behavior.
Example
(
Anima.Grid(Vector2(2, 2), 0.1)
.anima_distance_formula(ANIMA.DISTANCE.MANHATTAN)
.anima_fade_in()
.play()
)
anima_easing
The easing to use to animate the node.
NOTE: List of available easings
Syntax
anima_easing(easing: int)
Example
Anima.Grid(Vector2(2, 2), 0.1).anima_scale_x(0.8).anima_easing(ANIMA.EASINGS.EASE_IN_OUT)
anima_from
Set the initial value.
Syntax
anima_from(value: Variant)
value
Variant required- The initial value
Example
Anima.Grid(Vector2(2, 2), 0.1).anima_property("x").anima_from(-100)
anima_fade_in
Fades in the given element(s)
Syntax
anima_fade_in(duration: float)
duration
float optional- The animation duration (in seconds). If null, the default duration is used
Example
Anima.Grid(Vector2(2, 2), 0.1).fade_in(0.4)
anima_fade_out
Fades out the given element(s)
Syntax
anima_fade_out(duration: float)
duration
float optional- The animation duration (in seconds). If null, the default duration is used
Example
Anima.Grid(Vector2(2, 2), 0.1).fade_out(0.4)
anima_on_started
Callback to be triggered when the Grid animation starts.
Syntax
anima_on_started(callback: Funcref | Callable, on_started_value, on_backwards_completed_value = null)
callback
Callable required- The callback to call when the animation is starts
on_started_value
Variant required- The parameter to pass at the callback when the animation is played forward
on_backwards_completed_value
Variant optional- The parameter to pass at the callback when the animation is played backwards
Example
Anima.Grid(Vector2(2, 2), 0.1).anima_on_started(funcref(self, "do_something"), true, false)
func do_something(is_forward) -> void:
print(is_forward)
anima_on_completed
Callback to be triggered when the Grid animation completes.
Syntax
anima_on_completed(on_completed: Callable, on_completed_value, on_backwards_started_value = null)
on_completed
Callable required- The callback to call when the animation is completed
on_completed_value
Variant required- The parameter to pass at the callback when the animation is played forward
on_backwards_started_value
Variant optional- The parameter to pass at the callback when the animation is played backwards
Example
Anima.Grid(Vector2(2, 2), 0.1).anima_on_started(funcref(self, "do_something"), true, false)
func do_something(is_forward) -> void:
print(is_forward)
anima_pivot
The pivot point to use to animate the node.
NOTE: List of available pivot points
Syntax
anima_pivot(easing: int)
Example
Anima.Grid(Vector2(2, 2), 0.1).anima_scale_x(0.8).anima_pivot(ANIMA.PIVOT.CENTER)
anima_position
Animates the x
and y
position of the given element(s)
Syntax
anima_position(position: Vector2, duration: float)
position
Vector2 required- The final 2D position
duration
float optional- The animation duration (in seconds). If null, the default duration is used
Example
Anima.Grid(Vector2(2, 2), 0.1).anima_position(Vector2(100, 100))
Anima.Grid(Vector2(2, 2), 0.1).anima_position(Vector2(100, 100), 0.3) # duration - 0.3s
anima_position3D
Animates the x
, y
and z
position of the given element(s)
Syntax
anima_position3D(position: Vector3, duration: float)
position
Vector3 required- The final 3D position
duration
float optional- The animation duration (in seconds). If null, the default duration is used
Example
Anima.Grid(Vector2(2, 2), 0.1).anima_position3D(Vector3(100, 100, 0))
anima_position_x
Animates the global x
position of the given element(s)
Syntax
anima_position_x(x: float, duration: float)
x
float required- The global final
x
position
duration
float optional- The animation duration (in seconds). If null, the default duration is used
Example
Anima.Grid(Vector2(2, 2), 0.1).anima_position_x(100)
anima_position_y
Animates the global y
position of the given element(s)
Syntax
anima_position_y(y: float, duration: float)
y
float required- The global final
y
position
duration
float optional- The animation duration (in seconds). If null, the default duration is used
Example
Anima.Grid(Vector2(2, 2), 0.1).anima_position_y(100)
anima_position_z
Animates the global z
position of the given element(s)
Syntax
anima_position_z(z: float, duration: float)
z
float required- The global final
z
position
duration
float optional- The animation duration (in seconds). If null, the default duration is used
Example
Anima.Grid(Vector2(2, 2), 0.1).anima_position_z(-1)
anima_relative_position
Animates the relative x
and y
position of the given element(s)
Syntax
anima_relative_position(position: Vector2, duration: float)
position
Vector2 required- The relative 2D position
duration
float optional- The animation duration (in seconds). If null, the default duration is used
Example
Anima.Grid(Vector2(2, 2), 0.1).anima_relative_position(Vector2(100, 100))
anima_relative_position3D
Animates the relative x
, y
and z
position of the given element(s)
Syntax
anima_relative_position3D(position: Vector3, duration: float)
position
Vector3 required- The relative 3D position
duration
float optional- The animation duration (in seconds). If null, the default duration is used
Example
Anima.Grid(Vector2(2, 2), 0.1).anima_relative_position3D(Vector3(100, 100, 0))
anima_relative_position_x
Animates the relative x
position of the given element(s)
Syntax
anima_relative_position_x(x: float, duration: float)
x
float required- The relative
x
position
duration
float optional- The animation duration (in seconds). If null, the default duration is used
Example
Anima.Grid(Vector2(2, 2), 0.1).anima_relative_position_x(100)
anima_relative_position_y
Animates the relative y
position of the given element(s)
Syntax
anima_relative_position_y(y: float, duration: float)
y
float required- The relative
y
position
duration
float optional- The animation duration (in seconds). If null, the default duration is used
Example
Anima.Grid(Vector2(2, 2), 0.1).anima_relative_position_y(100)
anima_relative_position_z
Animates the relative z
position of the given element(s)
Syntax
anima_relative_position_z(z: float, duration: float)
z
float required- The relative
z
position
duration
float optional- The animation duration (in seconds). If null, the default duration is used
Example
Anima.Grid(Vector2(2, 2), 0.1).anima_relative_position_z(-1)
anima_rotate
Animates the 2D rotate property of the given element(s)
Syntax
anima_rotate(rotate: Vector2, duration: float)
rotate
Vector2 required- The final rotate value
duration
float optional- The animation duration (in seconds). If null, the default duration is used
Example
Anima.Grid(Vector2(2, 2), 0.1).anima_rotate(Vector2.ZERO)
anima_rotate3D
Animates the 3D rotate property of the given element(s)
Syntax
anima_rotate3D(rotate: Vector3, duration: float)
rotate
Vector3 required- The final rotate value
duration
float optional- The animation duration (in seconds). If null, the default duration is used
Example
Anima.Grid(Vector2(2, 2), 0.1).anima_rotate3D(Vector3(10, 0, -0.5))
anima_rotate_x
Animates the x
rotate property of the given element(s)
Syntax
anima_rotate_x(rotate_x: float, duration: float)
rotate_x
float required- The final rotate
x
value
duration
float optional- The animation duration (in seconds). If null, the default duration is used
Example
Anima.Grid(Vector2(2, 2), 0.1).anima_rotate_x(0.8)
anima_rotate_y
Animates the y
rotate property of the given element(s)
Syntax
anima_rotate_y(rotate_y: float, duration: float)
rotate_y
float required- The final rotate
y
value
duration
float optional- The animation duration (in seconds). If null, the default duration is used
Example
Anima.Grid(Vector2(2, 2), 0.1).anima_rotate_y(0.8)
anima_rotate_z
Animates the z
rotate property of the given element(s)
Syntax
anima_rotate_z(rotate_z: float, duration: float)
rotate_z
float required- The final rotate
z
value
duration
float optional- The animation duration (in seconds). If null, the default duration is used
Example
Anima.Grid(Vector2(2, 2), 0.1).anima_rotate_z(0.8)
anima_scale
Animates the 2D scale property of the given element(s)
Syntax
anima_scale(scale: Vector2, duration: float)
scale
Vector2 required- The final scale value
duration
float optional- The animation duration (in seconds). If null, the default duration is used
Example
Anima.Grid(Vector2(2, 2), 0.1).anima_scale(Vector2.ZERO)
anima_scale3D
Animates the 3D scale property of the given element(s)
Syntax
anima_scale3D(scale: Vector3, duration: float)
scale
Vector3 required- The final scale value
duration
float optional- The animation duration (in seconds). If null, the default duration is used
Example
Anima.Grid(Vector2(2, 2), 0.1).anima_scale3D(Vector3(10, 0, -0.5))
anima_scale_x
Animates the x
scale property of the given element(s)
Syntax
anima_scale_x(scale_x: float, duration: float)
scale_x
float required- The final scale
x
value
duration
float optional- The animation duration (in seconds). If null, the default duration is used
Example
Anima.Grid(Vector2(2, 2), 0.1).anima_scale_x(0.8)
anima_scale_y
Animates the y
scale property of the given element(s)
Syntax
anima_scale_y(scale_y: float, duration: float)
scale_y
float required- The final scale
y
value
duration
float optional- The animation duration (in seconds). If null, the default duration is used
Example
Anima.Grid(Vector2(2, 2), 0.1).anima_scale_y(0.8)
anima_scale_z
Animates the z
scale property of the given element(s)
Syntax
anima_scale_z(scale_z: float, duration: float)
scale_z
float required- The final scale
z
value
duration
float optional- The animation duration (in seconds). If null, the default duration is used
Example
Anima.Grid(Vector2(2, 2), 0.1).anima_scale_z(0.8)
anima_size
Animates the 2D size property of the given element(s)
Syntax
anima_size(size: Vector2, duration: float)
size
Vector2 required- The final size value
duration
float optional- The animation duration (in seconds). If null, the default duration is used
Example
Anima.Grid(Vector2(2, 2), 0.1).anima_size(Vector2.ZERO)
anima_size3D
Animates the 3D size property of the given element(s)
Syntax
anima_size3D(size: Vector3, duration: float)
size
Vector3 required- The final size value
duration
float optional- The animation duration (in seconds). If null, the default duration is used
Example
Anima.Grid(Vector2(2, 2), 0.1).anima_size3D(Vector3(10, 0, -0.5))
anima_size_x
Animates the x
size property of the given element(s)
Syntax
anima_size_x(size_x: float, duration: float)
size_x
float required- The final size
x
value
duration
float optional- The animation duration (in seconds). If null, the default duration is used
Example
Anima.Grid(Vector2(2, 2), 0.1).anima_size_x(0.8)
anima_size_y
Animates the y
size property of the given element(s)
Syntax
anima_size_y(size_y: float, duration: float)
size_y
float required- The final size
y
value
duration
float optional- The animation duration (in seconds). If null, the default duration is used
Example
Anima.Grid(Vector2(2, 2), 0.1).anima_size_y(0.8)
anima_size_z
Animates the z
size property of the given element(s)
Syntax
anima_size_z(size_z: float, duration: float)
size_z
float required- The final size
z
value
duration
float optional- The animation duration (in seconds). If null, the default duration is used
Example
Anima.Grid(Vector2(2, 2), 0.1).anima_size_z(0.8)
Chaining
Anima uses the anima_with
and anima_then
methods to chain multiple animations.
anima_with
Executes the next animation in parallel with the current one.
Syntax
.anima_with(new_class: AnimaDeclaration, delay = 0)
new_class
AnimaDeclaration required- The new AnimaDeclaration class to chain with the current one
delay
float optional- The delay to apply before starting the new animation. If negative, it anticipates the animation
Example
(
Anima.Grid(Vector2(2, 2), 0.1)
.anima_scale_x(0.8)
.anima_with()
.anima_fade_in()
.play()
)
This will animate the node scaling it while fading it in.
(
Anima.Grid(Vector2(2, 2), 0.1)
.anima_scale_x(0.8)
.anima_with(Anima.Grid($another_node))
.anima_fade_in()
.play()
)
This will animate the node scaling it and fade in $another_node
at the same time.
anima_then
Executes the next animation after the current one has completed.
Syntax
.anima_then(new_class: AnimaDeclaration, delay = 0)
new_class
AnimaDeclaration required- The new AnimaDeclaration class to chain with the current one
delay
float optional- The delay to apply before starting the new animation. If negative, it anticipates the animation
Example
(
Anima.Grid(Vector2(2, 2), 0.1)
.anima_fade_in()
.anima_then()
.anima_scale_x(0.8)
.play()
)
This will animate the node fading it in and then scaling it
(
Anima.Grid(Vector2(2, 2), 0.1)
.anima_scale_x(0.8)
.anima_then(Anima.Grid($another_node))
.anima_fade_in()
.play()
)
This will animate the node scaling it and then fade in $another_node
.