FMX.AnimationDemoHD Sample

From RAD Studio Code Examples
Jump to: navigation, search

This sample illustrates how to create HD animations with FireMonkey.


You can find the AnimationDemoHD sample project at:

  • Start | Programs | Embarcadero RAD Studio Athens | Samples and then navigate to:
    • CPP\Multi-Device Samples\User Interface\AnimationDemoHD
  • Subversion Repository:
    • You can find C++ code samples in GitHub Repositories. Search by name into the samples repositories according to your RAD Studio version.


The AnimationDemoHD sample animates several visual objects on a FireMonkey form. To this end, the sample uses TColorAnimation, TFloatAnimation, TPathAnimation, and TBitmapAnimation.

How to Use the Sample

  1. Navigate to the location given above, and open AnimationDemoHD.cbproj.
  2. Select the target platform.
  3. Press F9 or choose Run > Run.
  4. See the different animations.


File in C++ Contains


The project itself.


The main form where the components are located.

AnimationDemoHDPCH.h, AnimationDemoHD.cpp

Used to define and implement the sample.


TForm1 is the main form that represents the main window of the sample. It contains the following components:


  • The sample uses:
    • TAniIndicator to represent an animated spinning indicator used for illustrating an indefinite waiting time for application processes.
    • TLabel to display text in FireMonkey forms.
    • TEllipse to define a 2D ellipse shape.
    • TRectangle to define a 2D rectangle shape.
    • TRoundRect to define a 2D rectangle shape with rounded corners.
    • TText to define 2D text object.
    • TPath to define 2D path-type shapes representing groups of connected curves and lines.
    • TPathAnimation to move a visual object on a specified path.
    • TImage to display and define 2D image components.
    • TBitmapAnimation to change the display of an image over time.
    • TColorAnimation to change the color of a FireMonkey object over time.
    • TFloatAnimation attached to a 3D object in order to animate it.

When you run the application, you see several animated FireMonkey objects. The animations do the following:

  • FloatAnimation1 is attached to Ellipse1. It has the PropertyName set to RotationAngle with the StartValue set to 0 and the StopValue set to 360. This means that the ellipse rotates from 0 degrees to 360 degrees. Moreover, Its Loop property is set to True, in order to repeat the animation.
  • FloatAnimation2 is attached to Rectangle2. It has the PropertyName set to Opacity, which means that the animation customizes the transparency of the rectangle. Moreover, the Loop property of the animation is set to True, which means that the animation is repeatedly executed.
  • FloatAnimation4 is attached to Rectangle3. It has the PropertyName property set to Position.X, which means that the animation moves the rectangle through the X axis.
  • PathAnimation1 is attached to RoundRect1. It makes the round rectangle follow the path determined by the Path1 object. The duration property of the animation indicates that the rectangle completes the path in 6 seconds.
  • PathAnimation2 is attached to Text7. It makes the text follow the path determined by the Path1 object. The duration property of the animation indicates that the text completes the path in 3 seconds.
  • ColorAnimation1 is attached to Rectangle1. It has the PropertyName property set to Fill.Color. It fills the shape with a certain color.
  • BitmapAnimation1 is attached to Image1. It has the PropertyName property set to Bitmap and the Trigger and TriggerInverse properties set to IsMouseOver=true and IsMouseOver=false, respectively. This means that Image1 changes when the mouse is on the image. The inverse of the animation starts when the mouse leaves the image.


See Also