Reference for the Mosaic unit Effects

Class Overview
Effects::BoolEffect
Effects::Effect
Effects::ColorEffect
Effects::FloatEffect
Effects::Int32Effect
Effects::PointEffect
Effects::RectEffect
Effects::Fader
Effects::OpacityFader
Effects::PositionFader
Effects::VisibilityFader
Effects::WarpFader
Effects::Transition
Effects::FadeInOutTransition
Effects::ScaleTransition
Effects::ShowHideTransition
Effects::SlideTransition
Enumerations
Effects::Timing
Sets
Effects::DialogAlignment
Auto Objects
Effects::FadeInOutCentered
Effects::ScaleCentered
Effects::ShowHideCentered
Effects::SlideDownCentered
Effects::SlideLeftCentered
Effects::SlideRightCentered
Effects::SlideUpCentered

The unit 'Effects' provides a set of smart objects useful to enrich the GUI application with additional fancy and eye candy animations. These effects can simply be placed within a GUI component and configured by modifying their properties. For example, the effect Effects::ColorEffect performs the color fade animation. Effects::RectEffect in contrast can animate the position and the size of a GUI component, etc.

Besides the effects, the unit provides diverse fader and transition classes and objects intended to be used when your application consists of several dialogs and you what to show/hide and switch between the dialogs by using animation effects. For example the class Effects::FadeInOutTransition and the corresponding autoobject Effects::FadeInOutCentered take care of a transition between two dialogs by performing a fade-in/out animation.

enum Timing
{
item Linear;
item Power_In;
item Power_Out;
item Power_InOut;
item Exp_In;
item Exp_Out;
item Exp_InOut;
item Sine_In;
item Sine_Out;
item Sine_InOut;
item Circle_In;
item Circle_Out;
item Circle_InOut;
item Back_In;
item Back_Out;
item Back_InOut;
item Elastic_In;
item Elastic_Out;
item Elastic_InOut;
item Bounce_In;
item Bounce_Out;
item Bounce_InOut;
item EaseIn_FastOut;
item FastIn_EaseOut;
item EaseIn_EaseOut;
item FastIn_FastOut;
item Custom;
}

The definition Effects::Timing determines the available timing functions for animation effects. Except the 'Custom' item, all items of this definition represent build-in timing functions. These can be simply selected in the effect property Timing.

Items Description
Back_In The timing function 'EaseBack_In' defines an animation, which at the begin retracts slightly and then it accelerates again towards the finish. The amplitude of the retraction can be determined. This timing is based of the formula f(t)=t^3-t*Amplitude*sin(t*180). The parameter 'Amplitude' can be configured.
Back_InOut The timing function 'EaseBack_InOut' defines an animation, which at the begin 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 can be determined. This timing is based of the formula f(t)=t^3-t*Amplitude*sin(t*180). The parameter 'Amplitude' can be configured.
Back_Out The timing function 'EaseBack_Out' defines an animation, which at the begin decelerates again towards the finish and then swings slightly over the final position. The amplitude of the retraction at the final position can be determined. This timing is based of the formula f(t)=t^3-t*Amplitude*sin(t*180). The parameter 'Amplitude' can be configured.
Bounce_In The timing function 'EaseBounce_In' defines an animation, which bounces on its start position increasing with every bounce its amplitude. The total number of bounces and how much the amplitude is increased can be determined. With the end of the last bounce the animation reaches its final position. The number of bounces and the bounce amplitude can be configured.
Bounce_InOut The timing function 'EaseBounce_InOut' defines an animation, which 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 and how much the amplitude is increased/decreased can be determined. With the end of the last bounce the animation reaches its final position. The number of bounces and the bounce amplitude can be configured.
Bounce_Out The timing function 'EaseBounce_Out' defines an animation, which bounces on its finish position decreasing with every bounce its amplitude. The total number of bounces and how much the amplitude is decreased can be determined. With the end of the last bounce the animation reaches its final position. The number of bounces and the bounce amplitude can be configured.
Circle_In The timing function 'EaseCircle_In' defines an animation, which starts slow and then accelerates using the circular function f(t)=1-sqrt(1-t^2).
Circle_InOut The timing function 'EaseCircle_InOut' defines an animation, which starts slow, accelerates and then decelerates again using the circular function f(t)=1-sqrt(1-t^2).
Circle_Out The timing function 'EaseCircle_Out' defines an animation, which starts fast and then decelerates using the circular function f(t)=1-sqrt(1-t^2).
Custom The item 'Custom' determines a user defined timing function curve based on a Bezier curve. See description of the class Effects::Effect.
EaseIn_EaseOut The timing function 'EaseIn_EaseOut' describes an animation which starts slow, accelerates and then decelerates again.
EaseIn_FastOut The timing function 'EaseIn_FastOut' describes an animation which starts slow and then accelerates.
Elastic_In The timing function 'EaseElastic_In' defines an animation, which similarly to a spring oscillates back and forth around its start position increasing with every oscillation its amplitude. The total number of oscillations can be determined. With the end of the last oscillation the animation reaches its final position. This timing is based of the formula f(t)=t^3*sin(t*90*(1+4*Oscillations)). The parameter 'Oscillations' can be configured.
Elastic_InOut The timing function 'EaseElastic_InOut' defines an animation, which 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 can be determined. With the end of the last oscillation the animation reaches its final position. This timing is based of the formula f(t)=t^3*sin(t*90*(1+4*Oscillations)). The parameter 'Oscillations' can be configured.
Elastic_Out The timing function 'EaseElastic_Out' defines an animation, which similarly to a spring oscillates back and forth around its finish position decreasing with every oscillation its amplitude. The total number of oscillations can be determined. With the end of the last oscillation the animation reaches its final position. This timing is based of the formula f(t)=t^3*sin(t*90*(1+4*Oscillations)). The parameter 'Oscillations' can be configured.
Exp_In The timing function 'Exp_In' defines an animation, which starts slow and then accelerates using the formula f(t)=(exp(Exponent*t)-1.0)/(exp(Exponent)-1.0). The parameter 'Exponent' can be configured.
Exp_InOut The timing function 'Exp_InOut' defines an animation, which starts slow, accelerates and then decelerates again using the formula f(t)=(exp(Exponent*t)-1.0)/(exp(Exponent)-1.0). The parameter 'Exponent' can be configured.
Exp_Out The timing function 'Exp_Out' defines an animation, which starts fast and then decelerates using the formula f(t)=(exp(Exponent*t)-1.0)/(exp(Exponent)-1.0). The parameter 'Exponent' can be configured.
FastIn_EaseOut The timing function 'FastIn_EaseOut' describes an animation which starts fast and then decelerates.
FastIn_FastOut The timing function 'FastIn_FastOut' describes an animation which starts fast, decelerates and then accelerates again.
Linear The timing function 'Linear' describes an animation which follows a straight line.
Power_In The timing function 'Power_In' defines an animation, which starts slow and then accelerates using the power function f(t)=t^Exponent. The parameter 'Exponent' can be configured.
Power_InOut The timing function 'Power_InOut' defines an animation, which starts slow, accelerates and then decelerates again using the power function f(t)=t^Exponent. The parameter 'Exponent' can be configured.
Power_Out The timing function 'Power_Out' defines an animation, which starts fast and then decelerates using the power function f(t)=t^Exponent. The parameter 'Exponent' can be configured.
Sine_In The timing function 'EaseSine_In' defines an animation, which starts slow and then accelerates using the sine function f(t)=sin(t*90).
Sine_InOut The timing function 'EaseSine_InOut' defines an animation, which starts slow, accelerates and then decelerates again using the sine function f(t)=sin(t*90).
Sine_Out The timing function 'EaseSine_Out' defines an animation, which starts fast and then decelerates using the sine function f(t)=sin(t*90).

 

set DialogAlignment
{
item AlignHorzLeft;
item AlignHorzCenter;
item AlignHorzRight;
item AlignVertTop;
item AlignVertCenter;
item AlignVertBottom;
}

The definition Effects::DialogAlignment determines the set of constraints to control how dialog components are aligned within the boundary area of their owners when the dialogs are presented. See also Effects::FadeInOutTransition, Effects::ScaleTransition, Effects::ShowHideTransition and Effects::SlideTransition.

Items Description
AlignHorzCenter The constraint 'AlignHorzCenter' aligns the dialog component horizontally in the middle of its owner's area.
AlignHorzLeft The constraint 'AlignHorzLeft' aligns the dialog component to the left edge of its owner's area.
AlignHorzRight The constraint 'AlignHorzRight' aligns the dialog component to the right edge of its owner's area.
AlignVertBottom The constraint 'AlignVertBottom' aligns the dialog component to the bottom edge of its owner's area.
AlignVertCenter The constraint 'AlignVertCenter' aligns the dialog component vertically in the middle of its owner's area.
AlignVertTop The constraint 'AlignVertTop' aligns the dialog component to the top edge of its owner's area.

 

autoobject Effects::FadeInOutTransition FadeInOutCentered;

The global autoobject Effects::FadeInOutCentered represents the fade-in/out operation affecting the opacity of a given GUI component. When using the transition for the fade-in operation, the GUI component is automatically arranged to appear centered within the area of its owner component. This transition is thus ideal wherever one GUI component should smoothly appear or disappear in context of another component. The duration of the transition is configured per default to take 500 ms.

This object exists for your convenience permitting you to simply refer the transition wherever it is required in your implementation without having to take care of the creation and configuration of the object. If you require the transition to run with other configuration (e.g. other timing parameters), create a copy of this object and adapt its properties accordingly.

autoobject Effects::ScaleTransition ScaleCentered;

The global autoobject Effects::ScaleCentered represents the fade-in/out operation affecting the size and the opacity of a given GUI component. When using the transition for the fade-in operation, the GUI component appears slightly downsized in the center of its owner component and continues changing its size until it reaches its original size again. When using the transition for the fade-out operation, the component shrinks. While the transitions are performed, the opacity of the GUI component fades-in or fades-out accordingly. This transition is thus ideal wherever one GUI component should appear or disappear within another component by smoothly changing its size. The duration of the transition is configured per default to take 500 ms and the timing is configured to start fast and then slow down the animation (FastIn_EaseOut). The scaling factor is configured with 50 %.

This object exists for your convenience permitting you to simply refer the transition wherever it is required in your implementation without having to take care of the creation and configuration of the object. If you require the transition to run with other configuration (e.g. other scaling factor or timing parameters), create a copy of this object and adapt its properties accordingly.

autoobject Effects::ShowHideTransition ShowHideCentered;

The global autoobject Effects::ShowHideCentered represents the most primitive fade-in/out operation affecting the pure visibility of a given GUI component. When using the transition for the fade-in operation, the GUI component is automatically arranged to appear centered within the area of its owner component. This transition is thus ideal wherever one GUI component should instantly appear or disappear in context of another component without any animation effects.

Please note, with this transition the fade-in operation is performed just at the beginning of all other transitions running simultaneously, in other words, the GUI component appears during the start phase of the transition. In turn, to fade-out the component, the operation is executed during the end phase of the transition.

This object exists for your convenience permitting you to simply refer the transition wherever it is required in your implementation without having to take care of the creation and configuration of the object. If you require the transition to run with other configuration (e.g. to show the GUI component at the end instead of the start phase), create a copy of this object and adapt its properties accordingly.

autoobject Effects::SlideTransition SlideDownCentered
{
preset Direction = Core::Direction.Bottom;
}

The global autoobject Effects::SlideDownCentered represents the fade-in/out operation affecting the position and the opacity of the given GUI component. When using the transition for the fade-in operation, the GUI component slides from the top edge of its owner component and continues moving vertically until it reaches the owner's center position. When using the transition for the fade-out operation, the component slides down until it leaves the visible area of its owner component. Additionally, while the transitions are performed, the opacity of the GUI component fades-in or fades-out accordingly. This transition is thus ideal wherever one GUI component should smoothly slide-in/out in context of another component. The duration of the transition is configured per default to take 500 ms and the timing is configured to start fast and then slow down the animation (FastIn_EaseOut).

This object exists for your convenience permitting you to simply refer the transition wherever it is required in your implementation without having to take care of the creation and configuration of the object. If you require the transition to run with other configuration (e.g. other timing parameters), create a copy of this object and adapt its properties accordingly.

autoobject Effects::SlideTransition SlideLeftCentered
{
preset Direction = Core::Direction.Left;
}

The global autoobject Effects::SlideLeftCentered represents the fade-in/out operation affecting the position and the opacity of the given GUI component. When using the transition for the fade-in operation, the GUI component slides from the right edge of its owner component and continues moving horizontally until it reaches the owner's center position. When using the transition for the fade-out operation, the component slides to the left until it leaves the visible area of its owner component. Additionally, while the transitions are performed, the opacity of the GUI component fades-in or fades-out accordingly. This transition is thus ideal wherever one GUI component should smoothly slide-in/out in context of another component. The duration of the transition is configured per default to take 500 ms and the timing is configured to start fast and then slow down the animation (FastIn_EaseOut).

This object exists for your convenience permitting you to simply refer the transition wherever it is required in your implementation without having to take care of the creation and configuration of the object. If you require the transition to run with other configuration (e.g. other timing parameters), create a copy of this object and adapt its properties accordingly.

autoobject Effects::SlideTransition SlideRightCentered
{
preset Direction = Core::Direction.Right;
}

The global autoobject Effects::SlideRightCentered represents the fade-in/out operation affecting the position and the opacity of the given GUI component. When using the transition for the fade-in operation, the GUI component slides from the left edge of its owner component and continues moving horizontally until it reaches the owner's center position. When using the transition for the fade-out operation, the component slides to the right until it leaves the visible area of its owner component. Additionally, while the transitions are performed, the opacity of the GUI component fades-in or fades-out accordingly. This transition is thus ideal wherever one GUI component should smoothly slide-in/out in context of another component. The duration of the transition is configured per default to take 500 ms and the timing is configured to start fast and then slow down the animation (FastIn_EaseOut).

This object exists for your convenience permitting you to simply refer the transition wherever it is required in your implementation without having to take care of the creation and configuration of the object. If you require the transition to run with other configuration (e.g. other timing parameters), create a copy of this object and adapt its properties accordingly.

autoobject Effects::SlideTransition SlideUpCentered
{
preset Direction = Core::Direction.Top;
}

The global autoobject Effects::SlideUpCentered represents the fade-in/out operation affecting the position and the opacity of the given GUI component. When using the transition for the fade-in operation, the GUI component slides from the bottom edge of its owner component and continues moving vertically until it reaches the owner's center position. When using the transition for the fade-out operation, the component slides up until it leaves the visible area of its owner component. Additionally, while the transitions are performed, the opacity of the GUI component fades-in or fades-out accordingly. This transition is thus ideal wherever one GUI component should smoothly slide-in/out in context of another component. The duration of the transition is configured per default to take 500 ms and the timing is configured to start fast and then slow down the animation (FastIn_EaseOut).

This object exists for your convenience permitting you to simply refer the transition wherever it is required in your implementation without having to take care of the creation and configuration of the object. If you require the transition to run with other configuration (e.g. other timing parameters), create a copy of this object and adapt its properties accordingly.