跳到正文
cccskills
免费在 GitHub 公开

tween-animation

Use when implementing tweens — property animation, method tweening, chaining, parallel sequences, easing, and common UI/gameplay motion recipes

中文简介正在准备中。当前显示原文说明。

查看安装方法

包含的文件(5)

  • SKILL.md13.9 KB
  • references/common-recipes.md5.6 KB
  • references/lifecycle.md1.8 KB
  • references/looping-and-signals.md1.7 KB
  • references/property-tweener-modifiers.md1.6 KB

SKILL.md(原文)

安装前可以查看交给 AI 代理的指令内容。

Tweens in Godot 4.3+

All examples target Godot 4.3+ with no deprecated APIs. GDScript is shown first, then C#.

Related skills: animation-system for AnimationPlayer/AnimationTree (keyframe-based), godot-ui for UI transitions, shader-basics for tweening shader parameters, camera-system for camera shake and transitions, math-essentials for easing curves and interpolation math, particles-vfx for code-driven VFX timing and sequencing.


1. Core Concepts

Tween vs AnimationPlayer

FeatureTween (code-driven)AnimationPlayer (data-driven)
SetupCode only — no editor neededAnimation panel with keyframes
Best forProcedural motion, UI transitions, VFXComplex multi-track, artist-driven clips
ReusabilityRecreated per use — lightweightSaved as resources, reusable across scenes
BlendingNo — one tween per property at a timeYes — AnimationTree supports blending
Method callstween_callback() at any pointCall Method tracks at keyframed times

Rule of thumb: Use Tweens for one-off procedural animations (fade in, bounce, slide). Use AnimationPlayer for repeating, artist-tuned animations (walk cycle, attack sequence).

Creating a Tween

Tweens are created from any Node and auto-bind to it. When the node is freed, the tween stops automatically.

# Creates a tween bound to this node
var tween := create_tween()
tween.tween_property(self, "position", Vector2(400, 300), 1.0)
var tween = CreateTween();
tween.TweenProperty(this, "position", new Vector2(400, 300), 1.0f);

Important: Each call to create_tween() creates a new tween. Previous tweens on the same property are not automatically killed — they compete. Kill old tweens before creating new ones on the same property if you don't want conflicts.


2. Tweener Types

tween_property() — Animate any property

var tween := create_tween()
# Animate position over 0.5 seconds
tween.tween_property($Sprite2D, "position", Vector2(200, 100), 0.5)
# Animate modulate alpha (fade out)
tween.tween_property($Sprite2D, "modulate:a", 0.0, 0.3)
var tween = CreateTween();
tween.TweenProperty(GetNode("Sprite2D"), "position", new Vector2(200, 100), 0.5);
tween.TweenProperty(GetNode("Sprite2D"), "modulate:a", 0.0f, 0.3);

Sub-property access: Use : to target individual components — "position:x", "modulate:a", "scale:y".

tween_callback() — Call a method at a point in the sequence

var tween := create_tween()
tween.tween_property(self, "position", Vector2.ZERO, 0.5)
tween.tween_callback(func(): print("Arrived!"))
tween.tween_callback(queue_free)
var tween = CreateTween();
tween.TweenProperty(this, "position", Vector2.Zero, 0.5f);
tween.TweenCallback(Callable.From(() => GD.Print("Arrived!")));
tween.TweenCallback(Callable.From(QueueFree));

tween_interval() — Wait/delay between steps

var tween := create_tween()
tween.tween_property(self, "modulate:a", 0.0, 0.3)  # fade out
tween.tween_interval(1.0)                             # wait 1 second
tween.tween_property(self, "modulate:a", 1.0, 0.3)  # fade back in
var tween = CreateTween();
tween.TweenProperty(this, "modulate:a", 0.0f, 0.3);
tween.TweenInterval(1.0f);
tween.TweenProperty(this, "modulate:a", 1.0f, 0.3);

tween_method() — Animate a custom method with interpolated values

# Animate a method that receives interpolated float values
func _ready() -> void:
    var tween := create_tween()
    tween.tween_method(_set_health_bar, 100.0, 0.0, 2.0)

func _set_health_bar(value: float) -> void:
    $HealthBar.value = value
    $HealthLabel.text = "%d%%" % int(value)
public override void _Ready()
{
    var tween = CreateTween();
    tween.TweenMethod(Callable.From<float>(SetHealthBar), 100.0f, 0.0f, 2.0f);
}

private void SetHealthBar(float value)
{
    GetNode<ProgressBar>("HealthBar").Value = value;
    GetNode<Label>("HealthLabel").Text = $"{(int)value}%";
}

3. Sequencing — Chain vs Parallel

Sequential (Default)

By default, tweeners run sequentially — each waits for the previous to finish.

var tween := create_tween()
tween.tween_property(self, "position:x", 300.0, 0.5)   # Step 1
tween.tween_property(self, "position:y", 200.0, 0.5)   # Step 2 (after Step 1)
tween.tween_property(self, "rotation", PI, 0.3)         # Step 3 (after Step 2)

Parallel — Run tweeners simultaneously

Option 1: set_parallel(true) — All tweeners run at once

var tween := create_tween().set_parallel(true)
tween.tween_property(self, "position", Vector2(300, 200), 0.5)
tween.tween_property(self, "rotation", PI, 0.5)
tween.tween_property(self, "modulate:a", 0.5, 0.5)
var tween = CreateTween().SetParallel(true);
tween.TweenProperty(this, "position", new Vector2(300, 200), 0.5f);
tween.TweenProperty(this, "rotation", Mathf.Pi, 0.5f);
tween.TweenProperty(this, "modulate:a", 0.5f, 0.5f);

Option 2: chain() — Switch back to sequential mid-tween

var tween := create_tween().set_parallel(true)
# These two run at the same time
tween.tween_property(self, "position", Vector2(300, 200), 0.5)
tween.tween_property(self, "scale", Vector2(2, 2), 0.5)
# Switch back to sequential for the next step
tween.chain().tween_property(self, "modulate:a", 0.0, 0.3)
tween.tween_callback(queue_free)
var tween = CreateTween().SetParallel(true);
tween.TweenProperty(this, "position", new Vector2(300, 200), 0.5f);
tween.TweenProperty(this, "scale", new Vector2(2, 2), 0.5f);
tween.Chain().TweenProperty(this, "modulate:a", 0.0f, 0.3f);
tween.TweenCallback(Callable.From(QueueFree));

Option 3: parallel() — Make the next tweener parallel with the previous

var tween := create_tween()
tween.tween_property(self, "position", Vector2(300, 200), 0.5)
# This runs at the same time as position, not after
tween.parallel().tween_property(self, "rotation", PI, 0.5)
# This runs after both finish (back to sequential)
tween.tween_callback(func(): print("done"))

4. Easing & Transitions

Setting Easing

var tween := create_tween()
# Set defaults for the entire tween
tween.set_trans(Tween.TRANS_CUBIC).set_ease(Tween.EASE_OUT)
tween.tween_property(self, "position", Vector2(400, 300), 0.6)
var tween = CreateTween();
tween.SetTrans(Tween.TransitionType.Cubic).SetEase(Tween.EaseType.Out);
tween.TweenProperty(this, "position", new Vector2(400, 300), 0.6f);

Per-Tweener Override

var tween := create_tween()
# This tweener uses bounce, overriding the tween default
tween.tween_property(self, "position:y", 0.0, 0.5) \
    .set_trans(Tween.TRANS_BOUNCE).set_ease(Tween.EASE_OUT)
var tween = CreateTween();
tween.TweenProperty(this, "position:y", 0.0f, 0.5f)
    .SetTrans(Tween.TransitionType.Bounce)
    .SetEase(Tween.EaseType.Out);

Transition Types

TransitionCharacterCommon Use
TRANS_LINEARConstant speedProgress bars, timers
TRANS_SINEGentle accelerationSubtle UI animations
TRANS_QUADModerate curveGeneral movement
TRANS_CUBICSmooth curveMost UI transitions
TRANS_QUARTStrong curveDramatic entrances
TRANS_QUINTVery strong curveEmphasis effects
TRANS_EXPOExponential — sharp start/stopSnap-to-position
TRANS_CIRCCircular — smooth decelerationNatural motion
TRANS_BACKOvershoots target slightlyBouncy UI buttons
TRANS_ELASTICSpring oscillationPlayful/cartoon effects
TRANS_BOUNCEBounces at the endDropping objects, landing

Ease Types

EaseBehavior
EASE_INSlow start, fast end
EASE_OUTFast start, slow end (most natural)
EASE_IN_OUTSlow at both ends
EASE_OUT_INFast at both ends (rarely used)

Most common combo: TRANS_CUBIC + EASE_OUT for natural-feeling UI transitions. TRANS_BACK + EASE_OUT for playful bounce-in effects.


5. PropertyTweener Modifiers

Each tween_property() call returns a PropertyTweener you can chain modifiers on: .from(value) for a custom start, .from_current() to capture current value, .as_relative() to add (not replace), .set_delay(seconds) to delay this tweener's start.

See references/property-tweener-modifiers.md for full code examples of each modifier.


6. Looping and Signals

tween.set_loops(N) repeats N times (0 = infinite). Signals: finished (whole tween done), step_finished(idx) (one step done), loop_finished(loop_count) (one full cycle done; not emitted after the last loop, where finished fires).

See references/looping-and-signals.md for loop-count semantics and signal wiring.


7. Tween Lifecycle

Tweens are owned by their host SceneTree. Kill running tweens with tween.kill() before starting a new one to avoid stacking. Use set_pause_mode, set_speed_scale and (Godot 4.4+) set_ignore_time_scale for runtime control.

See references/lifecycle.md for kill/replace patterns, pause modes, speed scale, ignore-time-scale.

has_tweeners() (Godot 4.7+)

Tween.has_tweeners() (const) returns true if any Tweener has been added to the tween and the tween is valid — useful when tweeners are appended dynamically and the tween can end up empty. Killing an empty tween before it starts prevents errors.

var tween := create_tween()
_add_intro_steps(tween)  # may append zero tweeners
if not tween.has_tweeners():
    tween.kill()
var tween = CreateTween();
AddIntroSteps(tween); // may append zero tweeners
if (!tween.HasTweeners())
    tween.Kill();

8. Common Recipes

The patterns most projects need: fade in/out, UI panel slide in/out, button press bounce, damage number popup, pulsing/breathing effect, screen shake, shader parameter animation.

See references/common-recipes.md for ready-to-use code for each recipe.


9. Common Pitfalls

SymptomCauseFix
Tween jumps or jittersMultiple tweens competing on the same propertyKill the old tween before creating a new one
Tween does nothingNode was freed before tween finishedCheck is_valid() or use tween_callback instead of await
Tween runs or stops during pauseDefault TWEEN_PAUSE_BOUND follows the bound node's process_modeTWEEN_PAUSE_STOP to always pause, TWEEN_PAUSE_PROCESS to keep running
from() value ignoredThe from() value is applied only when that tweener startsSet the property to the start value first if it must show earlier
Tween doesn't loop smoothlyEnd value doesn't match start for seamless loopUse as_relative() for rotation, or match start/end values
Relative tween drifts over loopsas_relative() accumulates each loopUse absolute values for looping; relative for one-shot moves
Callback fires at wrong timeCallback added to parallel sectionUse chain() to switch back to sequential before the callback
Tween property path not foundTypo or wrong path formatUse "property:component" — e.g., "position:x", "modulate:a"
Tween faster/slower than expectedEngine.time_scale affects tweenUse set_ignore_time_scale() (4.4+) for UI tweens during slow-mo

10. Implementation Checklist

  • Old tweens are killed before creating new ones on the same property
  • Tween references are stored in variables when they need to be killed later
  • Easing is set (TRANS_CUBIC + EASE_OUT for natural motion, not default TRANS_LINEAR)
  • set_parallel(true) is used when multiple properties should animate simultaneously
  • chain() is used to switch back to sequential after parallel sections
  • from() or from_current() is used when the start value matters (not just the end value)
  • as_relative() is used for incremental movement instead of computing absolute targets
  • Looping tweens use set_loops() — not manual recreation
  • Tweens that must run during pause use set_pause_mode(TWEEN_PAUSE_PROCESS)
  • tween_callback(queue_free) is used at the end of fire-and-forget sequences (damage numbers, particles)

评价

还没有评价。欢迎分享你的使用感受。

评论

无需登录即可发表。欢迎分享使用感受、提问,或说明在哪些环境下无法运行。

还没有评论。来写第一条吧。

提交后会立即公开。请勿填写邮箱、电话等个人信息。URL 最多 2 个。

0 / 1000 字

此表单受 reCAPTCHA 保护,适用 Google 的隐私权政策和服务条款。

同一仓库的技能

Use when working with 2D-specific systems — TileMaps, parallax scrolling, 2D lights and shadows, canvas layers, particles 2D, custom drawing, and 2D meshes in Godot 4.3+

中文简介正在准备中。当前显示原文说明。

jame581/GodotPrompter8622026年10月22日 更新

Use when working with 3D-specific systems — materials, lighting, shadows, environment, global illumination, fog, LOD, occlusion culling, and decals in Godot 4.3+

中文简介正在准备中。当前显示原文说明。

jame581/GodotPrompter8622026年10月22日 更新

Use when building character abilities — Resource-based abilities with cost/cooldown/cast, buffs/debuffs, stat modifiers, gameplay tags, and HUD binding

中文简介正在准备中。当前显示原文说明。

jame581/GodotPrompter8622026年10月22日 更新

Use when creating Godot editor plugins — EditorPlugin, @tool scripts, custom inspectors, and dock panels

中文简介正在准备中。当前显示原文说明。

jame581/GodotPrompter8622026年10月22日 更新

Use when implementing AI movement — NavigationAgent2D/3D, steering behaviors, behavior trees, and patrol patterns

中文简介正在准备中。当前显示原文说明。

jame581/GodotPrompter8622026年10月22日 更新

Use when implementing animations — AnimationPlayer, AnimationTree, blend trees, state machines, sprite animation, and code-driven animation

中文简介正在准备中。当前显示原文说明。

jame581/GodotPrompter8622026年10月22日 更新

查看 jame581 的全部技能

报告此技能的问题