From Clomosy Docs
No edit summary |
ClomosyAdmin (talk | contribs) No edit summary |
||
| (12 intermediate revisions by one other user not shown) | |||
| Line 1: | Line 1: | ||
<div class="alert alert-ligth border border-3 border-primary-subtle rounded-5 p-4 shadow-sm" role="alert"> | |||
procedure clAnimateFloatWait(Object: TCLComponent; PropName: String; TargetValue, Duration, TAnimationType.In, TInterpolationType.Linear: Integer;); | |||
</div> | |||
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 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: | The general usage is as follows:<br> | ||
*<span style="color:blue"><i>Object</i></span>: Represents the control or component that is the target of the animation. | |||
*<span style="color:blue"><i>PropertyName</i></span>: Specifies the name of the property to which the animation will be applied. | |||
*<span style="color:blue"><i>TargetValue</i></span>: Specifies the target value that the property should reach at the end of the animation. | |||
*<span style="color:blue"><i>Duration</i></span>: Specifies the duration of the animation in seconds. | |||
*<span style="color:blue"><i>TAnimationType</i></span>: 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. | |||
*<span style="color:blue"><i>TInterpolationType</i></span>: It is used to control the smooth transition of values in animations. | |||
<span style="color:blue"><i>TAnimationType</i></span> | |||
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: | |||
<div class="alert alert-light" role="alert" data-bs-theme="light"> | |||
TAnimationType = (&In, Out, InOut); | |||
</div> | |||
*<b>In (Input)</b>: | |||
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. | |||
*<b>Out</b>: | |||
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. | |||
*<b>InOut (Input and Out)</b>: | |||
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. | |||
<span style="color:blue"><i>TInterpolationType</i></span> | |||
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: | |||
<div class="alert alert-light" role="alert" data-bs-theme="light"> | |||
TInterpolationType = (Linear, Quadratic, Cubic, Quartic, Quintic, Sinusoidal, Exponential, Circular, Elastic, Back, Bounce); | |||
</div> | |||
*<b>Linear</b>: This interpolation type allows the animation to progress at a constant rate, providing a linear transition between values. | |||
*<b>Quadratic</b>: This interpolation type gradually increases or decreases the animation speed, providing a quadratic transition between values. | |||
*<b>Cubic</b>: This interpolation type further gradually increases or decreases the animation speed, providing a cubic transition between values. | |||
*<b>Quartic</b>: This interpolation type further smoothens the increase or decrease in animation speed, providing a quartic transition between values. | |||
*<b>Quintic</b>: This interpolation type provides an even smoother increase or decrease in animation speed, providing a quintic transition between values. | |||
*<b>Sinusoidal</b>: This interpolation type allows the animation to transition in a sinusoidal wave-like manner, providing a smooth oscillation between values. | |||
*<b>Exponential</b>: This interpolation type exponentially increases or decreases the animation speed, providing an exponential transition between values. | |||
*<b>Circular</b>: This interpolation type allows the animation to transition in a circular manner, providing a circular transition between values. | |||
*<b>Elastic</b>: This interpolation type allows the animation to move elastically, providing an elastic transition between values. | |||
*<b>Back</b>: This interpolation type allows the animation to start its movement by pulling back, providing a backward transition between values. | |||
*< | *<b>Bounce</b>: This interpolation type allows the animation to transition by bouncing, providing a bouncing transition between values. | ||
<div class="alert alert-warning" role="alert" data-bs-theme="light"> | |||
In the TInterpolationType enum, the animation transition types also start from index 0.<br> | |||
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. | |||
</div> | |||
For example, you can use the following code to animate the opacity of a button:<br> | For example, you can use the following code to animate the opacity of a button:<br> | ||
| Line 17: | Line 74: | ||
clAnimateFloatWait(nextBtn,'Opacity',1, 1,0,0); | clAnimateFloatWait(nextBtn,'Opacity',1, 1,0,0); | ||
<b>Example</b><br> | |||
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.<br> | |||
<pre> | |||
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; | |||
} | |||
</pre> | |||
<h2> See Also </h2> | |||
* [[ | * [[System_Library#Cl_Utilities_Functions | Cl Utilities Functions]] | ||
{{#seo:|description=clAnimateFloatWait animates component properties with customizable types and smooth transitions, controlling values like opacity, size, and position.}} | |||
Latest revision as of 10:21, 24 December 2024
procedure clAnimateFloatWait(Object: TCLComponent; PropName: String; TargetValue, Duration, TAnimationType.In, TInterpolationType.Linear: Integer;);
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:
- Object: 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.
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;
}