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 #

Flag indicating if any property was modified in the current transition. Used to determine if a tween needs to be created.

Flag indicating if the X position was modified in the current transition.

Active tween responsible for animating the X position.

Target X position value to animate towards.

Initial X position value when the transition began.

Final X position value for the current tween segment.

Flag indicating if the Y position was modified in the current transition.

Active tween responsible for animating the Y position.

Target Y position value to animate towards.

Initial Y position value when the transition began.

Final Y position value for the current tween segment.

Flag indicating if the depth was modified in the current transition.

Active tween responsible for animating the depth value.

Target depth value to animate towards.

Initial depth value when the transition began.

Final depth value for the current tween segment.

Flag indicating if the X scale was modified in the current transition.

Active tween responsible for animating the X scale.

Target X scale value to animate towards.

Initial X scale value when the transition began.

Final X scale value for the current tween segment.

Flag indicating if the Y scale was modified in the current transition.

Active tween responsible for animating the Y scale.

Target Y scale value to animate towards.

Initial Y scale value when the transition began.

Final Y scale value for the current tween segment.

Flag indicating if the X skew was modified in the current transition.

Active tween responsible for animating the X skew.

Target X skew value to animate towards.

Initial X skew value when the transition began.

Final X skew value for the current tween segment.

Flag indicating if the Y skew was modified in the current transition.

Active tween responsible for animating the Y skew.

Target Y skew value to animate towards.

Initial Y skew value when the transition began.

Final Y skew value for the current tween segment.

Flag indicating if the X anchor was modified in the current transition.

Active tween responsible for animating the X anchor point.

Target X anchor value to animate towards.

Initial X anchor value when the transition began.

Final X anchor value for the current tween segment.

Flag indicating if the Y anchor was modified in the current transition.

Active tween responsible for animating the Y anchor point.

Target Y anchor value to animate towards.

Initial Y anchor value when the transition began.

Final Y anchor value for the current tween segment.

Flag indicating if the rotation was modified in the current transition.

Active tween responsible for animating the rotation.

Target rotation value in degrees to animate towards.

Initial rotation value in degrees when the transition began.

Final rotation value in degrees for the current tween segment (adjusted for shortest path).

Flag indicating if the width was modified in the current transition.

Active tween responsible for animating the width.

Target width value to animate towards.

Initial width value when the transition began.

Final width value for the current tween segment.

Flag indicating if the height was modified in the current transition.

Active tween responsible for animating the height.

Target height value to animate towards.

Initial height value when the transition began.

Final height value for the current tween segment.

Flag indicating if the color was modified in the current transition.

Active tween responsible for animating the color using RGB interpolation.

Target color value to animate towards.

Initial color value when the transition began.

Final color value for the current tween segment.

Flag indicating if the alpha was modified in the current transition.

Active tween responsible for animating the alpha (opacity).

Target alpha value (0.0-1.0) to animate towards.

Initial alpha value when the transition began.

Final alpha value for the current tween segment.

Flag indicating if the X translation was modified in the current transition.

Active tween responsible for animating the X translation.

Target X translation value to animate towards.

Initial X translation value when the transition began.

Final X translation value for the current tween segment.

Flag indicating if the Y translation was modified in the current transition.

Active tween responsible for animating the Y translation.

Target Y translation value to animate towards.

Initial Y translation value when the transition began.

Final Y translation value for the current tween segment.

Flag indicating if the transform was modified in the current transition.

Flag indicating if a transform instance was directly assigned (vs. modified).

The transform instance that was directly assigned, if any.

Active tween responsible for animating the transform using matrix interpolation.

Target transform matrix to animate towards.

Initial transform matrix when the transition began.

Final transform matrix for the current tween segment.

Flag indicating if the transform should be set to null at the end of the transition.

Temporary transform instance used during the transition to avoid allocations.

Flag indicating if the X offset was modified in the current transition (UI plugin only).

Active tween responsible for animating the X offset (UI plugin only).

Target X offset value to animate towards (UI plugin only).

Initial X offset value when the transition began (UI plugin only).

Final X offset value for the current tween segment (UI plugin only).

Flag indicating if the Y offset was modified in the current transition (UI plugin only).

Active tween responsible for animating the Y offset (UI plugin only).

Target Y offset value to animate towards (UI plugin only).

Initial Y offset value when the transition began (UI plugin only).

Final Y offset value for the current tween segment (UI plugin only).

Flag indicating if the view width was modified in the current transition (UI plugin only).

Active tween responsible for animating the view width (UI plugin only).

Target view width value to animate towards (UI plugin only).

Initial view width value when the transition began (UI plugin only).

Final view width value for the current tween segment (UI plugin only).

Flag indicating if the view height was modified in the current transition (UI plugin only).

Active tween responsible for animating the view height (UI plugin only).

Target view height value to animate towards (UI plugin only).

Initial view height value when the transition began (UI plugin only).

Final view height value for the current tween segment (UI plugin only).

Flag indicating if the entity is a View (UI plugin only). Set during component binding.

Metadata #