From Clomosy Docs
procedure clAnimateFloat(Object: TCLComponent; PropName: String; TargetValue, Duration, TAnimationType.In, TInterpolationType.Linear: Integer;);
Clomosy's clAnimateFloat is a procedure that allows a TCLComponent derived component's properties to smoothly transition from one value to another over a specified period of time.
This procedure is particularly useful when creating animated transitions for graphical user interface (GUI) elements or adding visual effects.
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.
- 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.
Exampled, the codes of the program where an image is created within the program and its height will be increased by 250 pixels after 10 seconds are provided below.
Example
var
MainForm : TclForm;
iconImg : TCLProImage;
{
MainForm = TclForm.Create(self);
iconImg = MainForm.AddNewProImage(MainForm,'iconImg');
iconImg.ALign = AlTop;
iconImg.Height = 100;
iconImg.Margins.Right = 50;
iconImg.Margins.Left = 50;
iconImg.Margins.Top = 50;
iconImg.clProSettings.PictureAutoFit = True;
iconImg.clProSettings.PictureSource = 'https://www.clomosy.com/demos/cornerArrow.png';
iconImg.SetclProSettings(iconImg.clProSettings);
clAnimateFloat(iconImg,'Height',350,10,1,6);
MainForm.Run;
}