From Clomosy Docs
No edit summary |
ClomosyAdmin (talk | contribs) No edit summary |
||
| (8 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 ClAnimateFloatDelay(Object: TCLComponent; PropName: String; TargetValue, Duration,Delay, TAnimationType.In, TInterpolationType.Linear: Integer;); | |||
</div> | |||
This function allows you to animate a specific property of a component or object over a specified duration.<br> | |||
The general usage is as follows:<br> | |||
*<span style="color: | *<span style="color:blue"><i>Object</i></span>: Represents the control or component that is the target of the animation. | ||
*<span style="color: | *<span style="color:blue"><i>PropName</i></span>: Specifies the name of the property to which the animation will be applied. | ||
*<span style="color: | *<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: | *<span style="color:blue"><i>Duration</i></span>: Specifies the duration of the animation in seconds. | ||
*<span style="color: | *<span style="color:blue"><i>Delay</i></span>: Delay before animation (in seconds) | ||
*<span style="color: | *<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: | *<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> | |||
<b>Example</b><br> | |||
For example, an image is created within the program and its X position will be increased by 500 pixels after 1 second with a delay of 30 seconds. The codes of the program are provided below.<br> | |||
<pre> | |||
var | |||
MainForm : TclForm; | |||
iconImg : TCLProImage; | |||
{ | |||
MainForm = TclForm.Create(self); | |||
iconImg = MainForm.AddNewProImage(MainForm,'iconImg'); | |||
iconImg.ALign = AlNone; | |||
iconImg.Height = 100; | |||
iconImg.clProSettings.PictureAutoFit = True; | |||
iconImg.clProSettings.PictureSource = 'https://www.clomosy.com/demos/cornerArrow.png'; | |||
iconImg.SetclProSettings(iconImg.clProSettings); | |||
clAnimateFloatDelay(iconImg,'Position.X',500,1,0.5,0,7); | |||
MainForm.Run; | |||
} | |||
</pre> | |||
<h2> See Also </h2> | |||
* [[ | * [[System_Library#Cl_Utilities_Functions | Cl Utilities Functions]] | ||
{{#seo:|description=Use ClAnimateFloatDelay in Clomosy to animate a component's property with customizable delay, duration, animation type, and smooth transitions.}} | |||
Latest revision as of 10:36, 24 December 2024
procedure ClAnimateFloatDelay(Object: TCLComponent; PropName: String; TargetValue, Duration,Delay, TAnimationType.In, TInterpolationType.Linear: Integer;);
This function allows you to animate a specific property of a component or object over a specified duration.
The general usage is as follows:
- Object: Represents the control or component that is the target of the animation.
- PropName: 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.
- Delay: Delay before 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.
Example
For example, an image is created within the program and its X position will be increased by 500 pixels after 1 second with a delay of 30 seconds. The codes of the program are provided below.
var
MainForm : TclForm;
iconImg : TCLProImage;
{
MainForm = TclForm.Create(self);
iconImg = MainForm.AddNewProImage(MainForm,'iconImg');
iconImg.ALign = AlNone;
iconImg.Height = 100;
iconImg.clProSettings.PictureAutoFit = True;
iconImg.clProSettings.PictureSource = 'https://www.clomosy.com/demos/cornerArrow.png';
iconImg.SetclProSettings(iconImg.clProSettings);
clAnimateFloatDelay(iconImg,'Position.X',500,1,0.5,0,7);
MainForm.Run;
}