Reference for the Mosaic class Effects::SlideTransition

Effects::SlideTransition
Alignment
Amplitude
Bounces
Buffered
Direction
Duration
Elasticity
Exponent
MarginBottom
MarginLeft
MarginRight
MarginTop
OpacityFadeIn
OpacityFadeOut
Oscillations
Timing
TimingCustom1
TimingCustom2
Effects::Transition
CreateDismissFader()
CreateOverlayFader()
CreatePresentFader()
CreateRestoreFader()

SEE ALSO

How to manage the dialog between user and the GUI application?

How to modify the parameters for the Slide (position) Dialog transition?

The class Effects::SlideTransition provides functionality for the fade-in/out operation affecting the position and the opacity of the given GUI component. By using the property Direction you determine in which direction the component should be moved during the fade-in/out animation (e.g. up, down, left, right, etc.). When using the transition for the fade-in operation, the GUI component starts outside of the visible area of its owner and continues moving until it reaches the predetermined (per default the center) position of its owner. When using the transition for the fade-out operation, the component is moved until it leaves the visible area of its owner component. This transition is thus ideal wherever one GUI component should smoothly slide-in/out in context of another component.

Per default when the component is displayed, it is aligned in the center of its owner. This can be modified by using the property Alignment. Furthermore, with the four properties MarginLeft, MarginRight, MarginTop and MarginBottom the area to align the component within its owner can be limited.

The transition animates the position and the opacity of the affected GUI component simultanously. If the opacity animation is not desired, you can disable it explicitly by using the properties OpacityFadeIn and OpacityFadeOut.

How long the transition should take is determined in the property Duration, which is per default 500 ms. The exact timing (easing) is configured with the property Timing. The class implements an extensive set of various timing functions. In its simplest case the animation can follow a straight line, or it can start slow and get faster afterwards. More complex timings perform realistic spring elastic and bounce animations. In its default configuration, the transition uses the 'FastIn_EaseOut' timing (it starts fast and slows down until the end position is reached).

With the property Buffered you can configure, whether the transition should additionally enable the buffering mode for the affected GUI component while it performs the animation.

property Effects::DialogAlignment Alignment = Effects::DialogAlignment[AlignHorzCenter, AlignVertCenter];

The property 'Alignment' determines how the transition should align the dialog within the boundary area of this dialog's owner. This area can additionally be limitted by specifying margins in the properties MarginLeft, MarginTop, MarginRight and MarginBottom. Based on the specified alignment and margins the transition calculates the position where the dialog should appear. If the transition is used to hide the dialog, the properties have no effect.

property float Amplitude = 0.5;

The property 'Amplitude' determines the magnitude of the retraction when Timing is configured with Effects::Timing.Back_In, Effects::Timing.Back_Out or Effects::Timing.Back_InOut.

The valid values for this property lie in the range 0.0 .. 10.0.

property int32 Bounces = 3;

The property 'Bounces' determines how often the animation should bounce on its start or/and finish position when Timing is configured with Effects::Timing.Bounce_In, Effects::Timing.Bounce_Out or Effects::Timing.Bounce_InOut.

The valid values for this property lie in the range 1 .. 10.

property bool Buffered = false;

The property 'Buffered' determines, whether the buffered mode for the affected GUI component should be enabled while the transition is performed. Enabling this mode can optimize (speed up) the screen updates. On the other hand buffering requires additional memory to store inside the actual image of the affected GUI component. It is thus intended for target systems providing sufficient RAM resources.

property Core::Direction Direction = Core::Direction.None;

The property 'Direction' controls the slide direction of the affected GUI component to apply during the fade-in or fade-out animation.

property int32 Duration = 500;

The property 'Duration' determines how long the slide transition takes. The value is expressed in milliseconds.

property float Elasticity = 0.5;

The property 'Elasticity' determines the amplitude of a bounce in relation to the just preceding bounce when Timing is configured with Effects::Timing.Bounce_In, Effects::Timing.Bounce_Out or Effects::Timing.Bounce_InOut.

The valid values for this property lie in the range 0.0 .. 1.0 whereby the value 1.0 means that the bounce is very elastic.

property float Exponent = 3.0;

The property 'Exponent' determines the exponent parameter if Timing is configured with Effects::Timing.Power_In, Effects::Timing.Power_Out, Effects::Timing.Power_InOut, Effects::Timing.Exp_In, Effects::Timing.Exp_Out, Effects::Timing.Exp_InOut.

The valid values for this property lie in the range 1.0 .. 100.0.

property int32 MarginBottom = 0;

The property 'MarginBottom' determines the gap below the area destined to display the dialog within its owner. Based on the specified margin and the actual value of the Alignment property the transition calculates the vertical position where the dialog should appear. If the transition is used to hide the dialog, the property has no effect.

property int32 MarginLeft = 0;

The property 'MarginLeft' determines the gap on the left of the area destined to display the dialog within its owner. Based on the specified margin and the actual value of the Alignment property the transition calculates the horizontal position where the dialog should appear. If the transition is used to hide the dialog, the property has no effect.

property int32 MarginRight = 0;

The property 'MarginRight' determines the gap on the right of the area destined to display the dialog within its owner. Based on the specified margin and the actual value of the Alignment property the transition calculates the horizontal position where the dialog should appear. If the transition is used to hide the dialog, the property has no effect.

property int32 MarginTop = 0;

The property 'MarginTop' determines the gap above the area destined to display the dialog within its owner. Based on the specified margin and the actual value of the Alignment property the transition calculates the vertical position where the dialog should appear. If the transition is used to hide the dialog, the property has no effect.

property bool OpacityFadeIn = true;

The property 'OpacityFadeIn' configures whether the transition should modulate the opacity of the affected GUI component when it is faded-in.

If this property is 'true' the opacity of the component is modulated regularly from 0 to 255. If this property is 'false' the component is shown with full opacity immediatelly at the beginning of the transition.

property bool OpacityFadeOut = true;

The property 'OpacityFadeOut' configures whether the transition should modulate the opacity of the affected GUI component when it is faded-out.

If this property is 'true' the opacity of the component is modulated regularly from its actual opacity to 0. If this property is 'false' the component remains fully visible during the transition and at the end of the transition it is hidden.

property int32 Oscillations = 3;

The property 'Oscillations' determines how often the animation should oscillate back and forth around its start or/and finish position when Timing is configured with Effects::Timing.Elastic_In, Effects::Timing.Elastic_Out or Effects::Timing.Elastic_InOut.

The valid values for this property lie in the range 1 .. 10.

property Effects::Timing Timing = Effects::Timing.FastIn_EaseOut;

The property 'Timing' determines the curve to interpolate between the start and the end position during the slide transition:

property float TimingCustom1 = 0.0;

The property 'TimingCustom1' controls the animation speed at the beginning of a user-defined timing function. The timing functions are based on cubic Bezier curves. Coming from a curve with a constant slope (a straight line), this property determines whether the curve should turn left (positive value) or turns right (negative value) at its beginning.

To activate the user-defined timing function, the property Timing should be initialized with the value Effects::Timing.Custom.

property float TimingCustom2 = 0.0;

The property 'TimingCustom2' controls the animation speed at the end of a user-defined timing function. The timing functions are based on cubic Bezier curves. Coming from a curve with a constant slope (a straight line), this property determines whether the curve should turn right (positive value) or turns left (negative value) at its end.

To activate the user-defined timing function, the property Timing should be initialized with the value Effects::Timing.Custom.