第 40 课 · Tween 补间动画

⏱ 预计时长 30 分钟📊 难度入门📚 模块 第 4 部分 · UI 界面 · 动画 · 特效

🎯 本课学习目标

理解 Tween 与 AnimationPlayer 的区别
用代码补间移动/变色/缩放
实现淡入淡出与弹跳效果

Tween 是「纯代码动画」：一行代码让物体移动、变色、缩放。本课玩转 Tween。

📖 详细教学步骤

Tween vs AnimationPlayer概念

AnimationPlayer：适合复杂的多轨动画（编辑器制作）
Tween：适合简单的过渡效果（纯代码，几行搞定）

💡 多数「小动画」用 Tween 更快：淡入、滑动、弹跳、颜色渐变。

基础补间：移动代码

让节点 0.5 秒内移动到 (500, 300)：

GDSCRIPTfunc move_to(target: Vector2, duration: float = 0.5):
    var tween = create_tween()
    tween.tween_property(self, "position", target, duration)

链式动画：多个步骤代码

依次执行（排队）：

GDSCRIPTfunc combo():
    var tween = create_tween()
    tween.tween_property(self, "position", Vector2(200, 100), 0.5)
    tween.tween_property(self, "position", Vector2(400, 100), 0.5)
    tween.tween_property(self, "position", Vector2(300, 300), 0.5)

属性补间：颜色 / 缩放 / 透明代码

任何「可数字化的属性」都能补间：

GDSCRIPT@onready var sprite = $Sprite2D

func fade_out():
    var tween = create_tween()
    tween.tween_property(sprite, "modulate:a", 0.0, 0.6)   # 透明

func pop_in():
    var tween = create_tween()
    tween.tween_property(self, "scale", Vector2(1.2, 1.2), 0.15)
    tween.tween_property(self, "scale", Vector2.ONE, 0.15)   # 弹跳感

func flash_red():
    var tween = create_tween()
    tween.tween_property(sprite, "modulate", Color(1, 0.3, 0.3), 0.1)
    tween.tween_property(sprite, "modulate", Color.WHITE, 0.1)

回调：动画结束做某事代码

用 tween_callback 在结束后执行：

GDSCRIPTfunc die_with_animation():
    var tween = create_tween()
    tween.tween_property(self, "scale", Vector2(0, 0), 0.4)
    tween.tween_callback(queue_free)   # 动画结束删除自己

等待（tween_interval）与并行进阶

延迟、同时做多件事：

GDSCRIPTfunc delayed_effect():
    var tween = create_tween()
    tween.tween_interval(1.0)   # 等 1 秒
    tween.tween_property(self, "position", Vector2(100, 100), 0.3)

func parallel():
    var tween = create_tween()
    tween.set_parallel(true)     # 并行执行
    tween.tween_property(self, "position", Vector2(200, 0), 0.5)
    tween.tween_property(self, "scale", Vector2(2, 2), 0.5)

⚠️

多次调用 tween 动画叠加错乱？

create_tween 每次新建互不干扰；若要打断旧的，用 kill() 或把 tween 存变量：var t = create_tween() 再用 t.kill()。

⚠️

tween_property 的 target 写错？

第一个参数是节点对象，第二是属性名字符串，第三是目标值，第四是时长。注意属性名要与实际一致（如 position、modulate:a）。

🧪 动手试一试

🏋️ 课后练习

给金币做一个「拾取动画」：被吃时放大→缩小→消失，然后删除自己。

scale 到 1.5 → scale 到 0 → tween_callback(queue_free)。

💡

Tween 是 Godot 4 高频 API，做 UI 动画、拾取特效、摄像机抖动都用它。

💡

set_trans 可以换缓动曲线（如 TRANS_BOUNCE 弹跳、TRANS_ELASTIC 橡皮筋）。

🎓 本课小结

Tween 用代码做补间动画：tween_property 过渡任意属性，链式排队、tween_callback 回调、tween_interval 延迟、set_parallel 并行。