LittleJS Tween System Plugin
- Lightweight tweens for numbers, Vector2, Color, or any .lerp-able type
- Chainable easing, looping, and ping-pong
- Property-path helper for the common case of animating an object field
- Auto-updates via engineAddPlugin; pauses with the game by default
- Source
Classes
Members
(static, constant) Ease
Library of named easing curves and direction modifiers. All curves accept x in [0,1] and return [0,1] (with possible overshoot for ELASTIC/BACK/SPRING/BOUNCE). Curves are values you pass to setEase or compose via the IN/OUT/IN_OUT/PIECEWISE/BEZIER modifiers.
- Source
// Use a basic curve
new Tween(callback, 0, 10, 1).setEase(Ease.SINE);
// Use a modifier on a curve
new Tween(callback, 0, 10, 1).setEase(Ease.OUT(Ease.BACK));Methods
(static) tweenProperty(target, propertyPath, start, end, durationopt, optionsopt) → {Tween.<T>}
Tween a property on an object by dot-path. Returns the underlying Tween so all chaining methods (setEase, then, loop, pingPong, etc.) remain available.
start and end may be numbers, Vector2, Vector3 or Color instances, or any object with a lerp(other, percent) => sameType method.
It stops on its own once the target is destroyed, so a looping tween on an object ends with it; a tween on a value inside the object, like tweenProperty(obj.pos, 'x'), or a new Tween with its own callback, has to be stopped by the game.
| Name | Type | Attributes | Default | Description | ||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
target | Object | The object whose property is being animated | ||||||||||||||||||||||
propertyPath | string | Dot-separated path, e.g. | ||||||||||||||||||||||
start | T | Starting value | ||||||||||||||||||||||
end | T | Ending value | ||||||||||||||||||||||
duration | number | <optional> | 1 | Duration in seconds | ||||||||||||||||||||
options | Object | <optional> | Same options as the Tween constructor Properties
|
- Source
- Type:
- Tween.<T>
// Numeric: slide an object's x with an ease-out sine curve
tweenProperty(player, 'pos.x', 0, 10, 2).setEase(Ease.OUT(Ease.SINE));
// Vector2: animate a position diagonally
tweenProperty(player, 'pos', vec2(-5, 0), vec2(5, 3), 2);
// Color: pulse between two colors
tweenProperty(sprite, 'color', RED, BLUE, 1).pingPong();(static) tweenStopAll()
Stop every active tween, ending loops too, without calling their then-callbacks. Useful for resets on level transitions or when changing scenes.
- Source
(static) tweenUpdate(gameDeltaopt, realDeltaopt)
Engine plugin hook: advance every active tween by the appropriate delta. The engine calls it with no arguments on every fixed update, so it can run more than once in a rendered frame, and on paused updates too, where only real time tweens move. May also be called with (gameDelta, realDelta) to drive tweens without the engine loop, for headless tests or an engine in manual step that is not stepped; in a running game such a call adds to the engine's own update, and a delta of 0 or less does nothing.
| Name | Type | Attributes | Description |
|---|---|---|---|
gameDelta | number | <optional> | Game-time delta in seconds; default: game time since the tween's last engine update |
realDelta | number | <optional> | Real-time delta in seconds; default: real time since the tween's last engine update |
- Source