TAnimation - FireMonkey Guide

Back up to FireMonkey Library

Unit: FMX.Types with children in FMX.Ani and FMX.Controls.
Parent: TFMXObject

(And note that some animation classes have slight variations in the exact properties used, notably the StartValue and StopValue properties depending on what is being animated).

TAnimation and it’s descendants animate (change the value over time) of a property (PropertyName) (except TPathAnimation - see below) of it’s Parent object over a period of time (Duration) after an optional initial Delay.

The value starts at StartValue (unless StartFromCurrent is true) and ends at StopValue. The formula for the progression is given by Interpolation and can be modified by AnimationType. See Interpolation and AnimationType Illustrated for a visual guide to these two properties.

Animations can Loop continuously which may include AutoReverse. An Inverse animation is one which runs from the StopValue back to the StartValue.

Each time the animation is processed and the property value updated the OnProcess event is called and when the animation is complete the OnFinish event fires.

Animations can be run manually using the Start and Stop methods or the Enabled property or automtically using trigger properties.

Triggering Animations

Animation objects are commonly used in styles where they respond to a Trigger and/or a TriggerInverse  expression which is a conditional involving one or more trigger properties of the Parent object. Trigger properties are those named ‘IsXXX’.

Trigger runs the animation forwards (StartValue to StopValue), TriggerInverse runs the animation backwards (StopValue to StartValue) (as if Inverse where true).

Trigger and TriggerInverse take expressions of the form <property>=true|false and multiple trigger properties can be used by separating expressions with a semi-colon. For example

IsPressed=True
IsPressed
=True;IsMouseOver=False 

When multiple expressions are used they are combined with an and operation. The second example above will trigger when IsPressed is true and IsMouseOver is false. It’s common to use both Trigger and TriggerInverse to run animations when an item changes both into and out of a state, e.g.

TriggerIsPressed=true
TriggerInverse
IsPressed=false 

Trigger expressions are not case sensitive.

To create trigger properties for your own components see Triggering Effects and Animations.

Animation Classes

The following table shows the built in animation classes and the type of property they animate.

ClassProperty type
TAnimation, TCustomPropertyAnimationAbstract base classes.
TFloatAnimationAny floating point type (remember that component positions and sizes are of type single in FireMonkey, so you’ll use TFloatAnimation for moving and resizing objects).
TIntAnimationInteger.
TColorAnimationTAlphaColor (the color system used in FireMonkey).
TGradientAnimationTGradient
TRectAnimationTBounds Commonly used within Bitmap Styles to select an area of the image when a control changes state. (Sadly the BoundsRect property of TControl is a TRectF and can’t be animated by this class. Instead you can either fake what you want by animating the Margins or Padding properties, or manually process a TFloatAnimation or TRectAnimation by handling it’s OnProcess event).
TBitmapAnimationTBitmap - fades from StartBitmap to StopBitmap by varying their opacities.
TBitmapListAnimationAnimates a sequence of images stored in a single image in the AnimationBitmap property similar to a normal video file. The number of individual images in the bitmap is given by the AnimationCount (i.e. number of frames) which is sub-divided into the number or rows specified by AnimationRows and thus infering the number of columns.
TColorKeyAnimationAnimates through a set of color values (see below).
TFloatKeyAnimationAnimates through a set of floating point values (see below).
TPathAnimationAnimates it’s parent’s Position property along a Path with optional Rotate (See below).

Key Animations

The two key animation classes, TColorKeyAnimation and TFloatKeyAnimation animate through a set of values stored in the Keys property. Each key item stores a Key, which is a value between 0 and 1 representing a percentage completion of the animation duration and a Value. When the animation processes a tick it calculates a value by interpolating between the two Keys representing a time nearest the current time.

Suppose we have a TFloatKeyAnimation with a duration of 4 seconds and the keys (Time: 0, Value: 0), (Time: 0.5, Value: 1) and (Time: 1, Value: 0).

Here are the values processed each second:

Time is at three quarters of the duration, so find the keys nearest to 0.75, which is the second and third keys. The time (0.75) is half way between the keys of these items, so use a value half way between the two values.
Time (s)ValueReason
00First key with Time = 0.
10.5One second is a quarter of the duration, so we look at the two closest keys to 0.25. The first two keys are at 0 and 0.5. 0.25 is half way between the two, so we get a value half way between the values of the first and second keys.
21Half way through the duration, so use the key at 0.5 with a value of 1./td>
30.5
40Duration is complete so use the key whose key is 1 (the third key) which gives a value of zero.

So what we get in the above example is a value which moves linearly from zero to one and back to zero again - a saw tooth wave if looped.

TColorKeyAnimation behaves in the same way with TAlphaColors as values.

You can use these two classes to create complex animations over multiple values, even simulating complex curves if enough keys are used.

TPathAnimation

TPathAnimation is slightly different from the other animations in that it always animates it’s parents Position property. The parent component will, therefore, move along the course given in the Path property. If Rotate is true the parent will be rotated to point the same direction as the animation is pointing.

See also

Interpolation and AnimationType Illustrated
Triggering Effects and Animations.

Version: XE4

Categories:

div title=