ClAnimateFloatWait

The clAnimateFloatWait function of Clomosy allows you to animate the properties of a component or object over a specified duration. This function is commonly used when you need to apply animated effects to objects in the user interface (e.g., a form or a component).

The general usage is as follows:

clAnimateFloatWait(MyControl,PropertyName,TargetValue,Duration,TAnimationType.In,TInterpolationType.Linear);

• MyControl: Represents the control or component that is the target of the animation.
• PropertyName: Specifies the name of the property to which the animation will be applied.
• TargetValue: Specifies the target value that the property should reach at the end of the animation.
• Duration: Specifies the duration of the animation in seconds.
• TAnimationType: It is one of the animation types and typically represents an animation type that involves an increase in a value or the visibility of a specific property.
• TInterpolationType: It is used to control the smooth transition of values in animations.

TAnimationType

TAnimationType is a data type used to represent animation types. This data type is typically used to specify the types of animations that are used to change the appearance of a component or to make a component move in a certain way.

Here are the animation types represented by TAnimationType and explanations of what they are used for:

 TAnimationType = (&In, Out, InOut);

• In (Input):

This animation type is used to animate the entrance of a component onto the screen. For example, it can be used to smoothly slide a component onto the screen or make it appear with a specific effect. Such animations are typically used when presenting a component to the user or drawing attention to it.

• Out:

This animation type is used to animate the exit of a component from the screen. For example, it can be used to smoothly slide a component off the screen or make it disappear with a specific effect. Such animations are typically used after presenting a component or completing a specific operation.

• InOut (Input and Out):

This animation type is used to animate both the entrance and exit of a component using the same animation. For example, it can be used to smoothly slide a component onto the screen and then smoothly slide it off the screen. Such animations are typically used before or after a specific operation to draw attention or emphasize a certain action.

The indices of the animation types in TAnimationType also start from 0.

TInterpolationType

TInterpolationType is an enum type used to determine the transitions of animations and transformations between values. This enum type allows animations to occur more naturally and smoothly.

Here are the descriptions of the animation transition types within TInterpolationType:

TInterpolationType = (Linear, Quadratic, Cubic, Quartic, Quintic, Sinusoidal, Exponential, Circular, Elastic, Back, Bounce);

• Linear: This interpolation type allows the animation to progress at a constant rate, providing a linear transition between values.

• Quadratic: This interpolation type gradually increases or decreases the animation speed, providing a quadratic transition between values.

• Cubic: This interpolation type further gradually increases or decreases the animation speed, providing a cubic transition between values.

• Quartic: This interpolation type further smoothens the increase or decrease in animation speed, providing a quartic transition between values.

• Quintic: This interpolation type provides an even smoother increase or decrease in animation speed, providing a quintic transition between values.

• Sinusoidal: This interpolation type allows the animation to transition in a sinusoidal wave-like manner, providing a smooth oscillation between values.

• Exponential: This interpolation type exponentially increases or decreases the animation speed, providing an exponential transition between values.

• Circular: This interpolation type allows the animation to transition in a circular manner, providing a circular transition between values.

• Elastic: This interpolation type allows the animation to move elastically, providing an elastic transition between values.

• Back: This interpolation type allows the animation to start its movement by pulling back, providing a backward transition between values.

• Bounce: This interpolation type allows the animation to transition by bouncing, providing a bouncing transition between values.

In the TInterpolationType enum, the animation transition types also start from index 0.
In this case, if the values in this enum type are sequential, they are numbered accordingly, such as Linear 0, Quadratic 1, Cubic 2, and so on.

For example, you can use the following code to animate the opacity of a button:

clAnimateFloatWait(nextBtn,'Opacity',1, 1,0,0);

Example: For example, an image is created within the program, and the opacity of the image is increased and decreased over a certain period of time. The codes of the program are provided below.

Base Syntax

var
 MainForm : TclForm;
 iconImg : TCLProImage;
 informationLbl : TclLabel;

procedure Animation;
begin
   clAnimateFloatWait(iconImg,'Opacity',0,1,0,0);
   clAnimateFloat(iconImg,'Opacity',1, 1,0,0);
end;

begin
 MainForm:=TclForm.Create(self);
 MainForm.SetFormBGImage('https://clomosy.com/demos/bg.png');
 
 informationLbl:= MainForm.AddNewLabel(MainForm,'informationLbl','Click on the image to see the animation.');
 informationLbl.StyledSettings := ssFamily;
 informationLbl.TextSettings.Font.Size:=14;
 informationLbl.Align := alTop;
 informationLbl.Margins.Left:= 10;
 informationLbl.Margins.Top:= 10; 
 informationLbl.Height := 50;
 informationLbl.Width := 150;
 informationLbl.AutoSize := True;
 informationLbl.WordWrap := True;

 iconImg := MainForm.AddNewProImage(MainForm,'iconImg');
 iconImg.Align := alTop; 
 iconImg.Height := 250;
 iconImg.Margins.Top := 50;
 iconImg.Margins.Left := 50;
 iconImg.Margins.Right := 50;
 iconImg.clProSettings.PictureSource := 'https://clomosy.com/demos/moon.png';
 iconImg.clProSettings.PictureAutoFit := True;
 iconImg.SetclProSettings(iconImg.clProSettings);
 MainForm.AddNewEvent(iconImg,tbeOnClick,'Animation');

 MainForm.Run;
end;

TRObject Syntax

var
 MainForm : TclForm;
 iconImg : TCLProImage;
 informationLbl : TclLabel;

void Animation;
{
   clAnimateFloatWait(iconImg,'Opacity',0,1,0,0);
   clAnimateFloat(iconImg,'Opacity',1, 1,0,0);
}

{
 MainForm=TclForm.Create(self);
 MainForm.SetFormBGImage('https://clomosy.com/demos/bg.png');
 
 informationLbl= MainForm.AddNewLabel(MainForm,'informationLbl','Click on the image to see the animation.');
 informationLbl.StyledSettings = ssFamily;
 informationLbl.TextSettings.Font.Size=14;
 informationLbl.Align = alTop;
 informationLbl.Margins.Left= 10;
 informationLbl.Margins.Top= 10; 
 informationLbl.Height = 50;
 informationLbl.Width = 150;
 informationLbl.AutoSize = True;
 informationLbl.WordWrap = True;

 iconImg = MainForm.AddNewProImage(MainForm,'iconImg');
 iconImg.Align = alTop; 
 iconImg.Height = 250;
 iconImg.Margins.Top = 50;
 iconImg.Margins.Left = 50;
 iconImg.Margins.Right = 50;
 iconImg.clProSettings.PictureSource = 'https://clomosy.com/demos/moon.png';
 iconImg.clProSettings.PictureAutoFit = True;
 iconImg.SetclProSettings(iconImg.clProSettings);
 MainForm.AddNewEvent(iconImg,tbeOnClick,'Animation');

 MainForm.Run;
}

See Also

• Controls
• ClAnimateFloat
• ClAnimateFloatDelay