Curvas de tween
Cinco quadrados atravessando a tela, um por curva de transição. O jeito mais rápido de ver o que cada easing faz.
O editor acima está rodando este projeto. Mude uma linha e ele recarrega.
Classes do Godot usadas
TweenPolygon2DLabel
O 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