VisualTransition

A component that enables smooth property transitions for Visual objects.

VisualTransition provides a declarative API for animating multiple visual properties simultaneously with automatic interpolation and easing. It handles the complexity of managing multiple concurrent tweens while providing a clean, chainable interface.

Key features:

• Animate multiple properties in a single transition
• Automatic handling of transform interpolation
• Smart rotation with shortest-path calculation
• Property change detection to avoid unnecessary tweens
• Support for custom easing per transition
• "Eager" mode for immediate first-frame updates

Example usage:

// Using the static extension method
myVisual.transition(EASE_IN_OUT, 0.5, props -> {
    props.x = 200;
    props.y = 100;
    props.scale(2.0);
    props.alpha = 0.5;
    props.rotation = 180;
});

// Or as a component
var transition = new VisualTransition(ELASTIC_EASE_OUT, 0.3);
myVisual.component('transition', transition);

transition.run(null, 0.5, props -> {
    props.pos(100, 200);
    props.size(300, 200);
});

Supported properties:

• Position: x, y, pos()
• Size: width, height, size()
• Scale: scaleX, scaleY, scale()
• Rotation: rotation (with shortest path)
• Transform: transform, translateX/Y, skewX/Y
• Appearance: alpha, color
• Anchor: anchorX, anchorY, anchor()
• Depth: depth
• View properties (when UI plugin is enabled)

Static Members #

Static extension method to run a transition on any Visual.

Creates a transition component if needed and runs the transition. This is the most convenient way to use transitions:

myVisual.transition(EASE_OUT, 0.5, props -> {
    props.x = 100;
    props.alpha = 0;
});

Static extension method to run an eager transition on any Visual.

Same as transition() but updates on the first frame.

Instance Members #

The Visual entity this transition component is attached to. Set automatically when used as a component.

Default easing function for transitions. Can be overridden per transition in run() or eagerRun().

Default duration for transitions in seconds. Can be overridden per transition in run() or eagerRun().

Run a transition with the specified properties.

The callback receives a properties object where you can set the target values for the transition. Only properties that change from their current values will be animated.

Run an "eager" transition that updates on the first frame.

Same as run() but ensures the visual updates immediately instead of waiting for the next frame. Useful for preventing visual "pops" when starting transitions.

Create a new visual transition component.

Private Members #

Metadata #