Unit Effects: Effects::SlideTransition

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()

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:

Effects::Timing.Linear : the animation will follow a straight line. The values will be linearly interpolated.
Effects::Timing.Power_In : the animation starts slow and then accelerates using the power function f(t)=t^Exponent. The exponent is determined by the property Exponent. To achieve an effect like the jQuery 'easeInQuad', 'easeInCube', 'easeInQuart' and 'easeInQuint' set the Exponent to the corresponding value 2.0, 3.0, 4.0 or 5.0.
Effects::Timing.Power_Out : the animation starts fast and then decelerates using the power function f(t)=t^Exponent. The exponent is determined by the property Exponent. To achieve an effect like the jQuery 'easeOutQuad', 'easeOutCube', 'easeOutQuart' and 'easeOutQuint' set the Exponent to the corresponding value 2.0, 3.0, 4.0 or 5.0.
Effects::Timing.Power_InOut : the animation starts slow, accelerates and then decelerates again using the power function f(t)=t^Exponent. The exponent is determined by the property Exponent. To achieve an effect like the jQuery 'easeInOutQuad', 'easeInOutCube', 'easeInOutQuart' and 'easeInOutQuint' set the Exponent to the corresponding value 2.0, 3.0, 4.0 or 5.0.
Effects::Timing.Exp_In : the animation starts slow and then accelerates using the formula f(t)=(exp(Exponent*t)-1.0)/(exp(Exponent)-1.0). The exponent is determined by the property Exponent. To achieve an effect like the jQuery 'easeInExpo' set the Exponent to the value 7.0.
Effects::Timing.Exp_Out : the animation starts fast and then decelerates using the formula f(t)=(exp(Exponent*t)-1.0)/(exp(Exponent)-1.0). The exponent is determined by the property Exponent. To achieve an effect like the jQuery 'easeOutExpo' set the Exponent to the value 7.0.
Effects::Timing.Exp_InOut : the animation starts slow, accelerates and then decelerates again using the formula f(t)=(exp(Exponent*t)-1.0)/(exp(Exponent)-1.0). The exponent is determined by the property Exponent. To achieve an effect like the jQuery 'easeInOutExpo' set the Exponent to the value 7.0.
Effects::Timing.Sine_In : the animation starts slow and then accelerates using the sine function f(t)=sin(t*90).
Effects::Timing.Sine_Out : the animation starts fast and then decelerates using the sine function f(t)=sin(t*90).
Effects::Timing.Sine_InOut : the animation starts slow, accelerates and then decelerates again using the sine function f(t)=sin(t*90).
Effects::Timing.Circle_In : the animation starts slow and then accelerates using the circular function f(t)=1-sqrt(1-t^2).
Effects::Timing.Circle_Out : the animation starts fast and then decelerates using the circular function f(t)=1-sqrt(1-t^2).
Effects::Timing.Circle_InOut : the animation starts slow, accelerates and then decelerates again using the circular function f(t)=1-sqrt(1-t^2).
Effects::Timing.Back_In : at the begin the animation retracts slightly and then it accelerates again towards the finish. The amplitude of the retraction is determined by the property Amplitude. This timing is based on the formula f(t)=t^3-t*Amplitude*sin(t*180).
Effects::Timing.Back_Out : at the begin the animation decelerates again towards the finish and then swings slightly over the final position. The amplitude of the retraction at the final position is determined by the property Amplitude. This timing is based on the formula f(t)=t^3-t*Amplitude*sin(t*180).
Effects::Timing.Back_InOut : at the begin the animation retracts slightly and then it accelerates again. At the half time the animation decelerates and once reached the final position it swings slightly over it. The amplitude of the retractions at the start and the end position is determined by the property Amplitude. This timing is based on the formula f(t)=t^3-t*Amplitude*sin(t*180).
Effects::Timing.Elastic_In : similarly to a spring this animation oscillates back and forth around its start position increasing with every oscillation its amplitude. The total number of oscillations is determined by the property Oscillations. With the end of the last oscillation the animation reaches its final position. This timing is based on the formula f(t)=t^3*sin(t*90*(1+4*Oscillations)).
Effects::Timing.Elastic_Out : similarly to a spring this animation oscillates back and forth around its finish position decreasing with every oscillation its amplitude. The total number of oscillations is determined by the property Oscillations. With the end of the last oscillation the animation reaches its final position. This timing is based on the formula f(t)=t^3*sin(t*90*(1+4*Oscillations)).
Effects::Timing.Elastic_InOut : this animation oscillates back and forth around its start position increasing with every oscillation its amplitude. Then from the halftime the animation oscillates around its finish position decelerating again its amplitude with every oscillation. How often the animation oscillates around the start and finish position is determined by the property Oscillations. With the end of the last oscillation the animation reaches its final position. This timing is based on the formula f(t)=t^3*sin(t*90*(1+4*Oscillations)).
Effects::Timing.Bounce_In : this animation bounces on its start position increasing with every bounce its amplitude. The total number of bounces is determined by the property Bounces. How much the amplitude is increased is determined by the property Elasticity. With the end of the last bounce the animation reaches its final position.
Effects::Timing.Bounce_Out : this animation bounces on its finish position decreasing with every bounce its amplitude. The total number of bounces is determined by the property Bounces. How much the amplitude is decreased is determined by the property Elasticity. With the end of the last bounce the animation reaches its final position.
Effects::Timing.Bounce_InOut : this animation bounces on its start position increasing with every bounce its amplitude. Then from the halftime this animation bounces on its finish position decreasing again its amplitude with every bounce. How often the animation bounces on the start and on the finish position is determined by the property Bounces. How much the amplitude is increased/decreased is determined by the property Elasticity. With the end of the last bounce the animation reaches its final position.
Effects::Timing.EaseIn_FastOut : the animation starts slow and then accelerates. This mode corresponds to Effects::Timing.Power_In with property Exponent set to 3.0.
Effects::Timing.FastIn_EaseOut : the animation starts fast and then decelerates. This mode corresponds to Effects::Timing.Power_Out with property Exponent set to 3.0.
Effects::Timing.FastIn_FastOut : the animation starts fast, decelerates and then accelerates again.
Effects::Timing.EaseIn_EaseOut : the animation starts slow, accelerates and then decelerates again.
Effects::Timing.Custom : The animation curve is determined by properties TimingCustom1 and TimingCustom2.

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.