Curvas de tween
Cinco cuadrados cruzando la pantalla, uno por curva de transición. La forma más rápida de ver qué hace cada easing.
El editor de arriba está ejecutando este proyecto. Cambia una línea y se recarga.
Clases de Godot usadas
TweenPolygon2DLabel
El código
scripts/main.gd
extends Node
const DURATION: float = 1.4
const SIZE: Vector2 = Vector2(56, 56)
const CURVES: Array = [
{name = 'LINEAR', trans = Tween.TRANS_LINEAR},
{name = 'SINE', trans = Tween.TRANS_SINE},
{name = 'BACK', trans = Tween.TRANS_BACK},
{name = 'ELASTIC', trans = Tween.TRANS_ELASTIC},
{name = 'BOUNCE', trans = Tween.TRANS_BOUNCE},
]
func _ready() -> void:
_add_background()
var view: Vector2 = get_viewport().get_visible_rect().size
var margin: float = 120.0
var spacing: float = view.y / (CURVES.size() + 1)
for i in CURVES.size():
var row: float = spacing * (i + 1)
_add_label(CURVES[i].name, Vector2(margin, row - SIZE.y))
var square: Polygon2D = _make_square(Color('#8da5f3'))
square.position = Vector2(margin, row)
add_child(square)
var tween: Tween = create_tween().set_loops()
tween.tween_property(square, 'position:x', view.x - margin, DURATION).set_trans(CURVES[i].trans).set_ease(Tween.EASE_IN_OUT)
tween.tween_property(square, 'position:x', margin, DURATION).set_trans(CURVES[i].trans).set_ease(Tween.EASE_IN_OUT)
func _add_background() -> void:
var background: ColorRect = ColorRect.new()
background.color = Color('#12141a')
add_child(background)
background.set_anchors_and_offsets_preset(Control.PRESET_FULL_RECT)
func _add_label(text: String, at: Vector2) -> void:
var label: Label = Label.new()
label.text = text
label.position = at
label.add_theme_color_override('font_color', Color('#999999'))
add_child(label)
func _make_square(color: Color) -> Polygon2D:
var square: Polygon2D = Polygon2D.new()
square.polygon = PackedVector2Array(
[
-SIZE * 0.5,
Vector2(SIZE.x, -SIZE.y) * 0.5,
SIZE * 0.5,
Vector2(-SIZE.x, SIZE.y) * 0.5,
]
)
square.color = color
return square